Creating Custom Templates for Joomla! 2.5

Creating Custom Templates
for Joomla! 2.5
Dallas/Fort Worth Joomla User Group
January 14, 2013
www.KatalystCreativeGroup.com

A Bit About Me: Don Cranford

• Partner / Lead Developer at Katalyst Creative
Group
• Web Design/Dev, Branding, Content, SEO
• Started using Joomla! (Mambo) in 2004
• Joomla! is our primary tool, but also do some
WordPress and Drupal.
• Custom Joomla! templates and extensions.


Today We’ll Cover:

• Custom Template Basics for Joomla! 2.5
• File Structure
• templateDetails.xml
• index.php
• CSS


Today We’ll Cover:

• Advanced Topics
• HTML Overrides
• Parameters
• Language Overrides
• Installation


Creating Custom Templates for Joomla! 2.5

THE BASICS

Template File Structure

• Required Files:
• index.php
• templateDetails.xml
• template_thumbnail.png
• css folder
• Folder must be named “css”



• Optional Files
• html (folder… used for overrides)
• language (for language overrides)
• error.php (to override 404… errors page layout)
• component.php (to override component layout)
• template_preview.png



• Show image here…


templateDetails.xml

• Used during the installation process
• Tells what files to install
• Provides the optional parameters
• Used in configuring the style options.


templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">
<name>mytemplate1</name>
<creationDate>January 14, 2013</creationDate>
<author>My Name</author>
<authorEmail>My Email</authorEmail>
<authorUrl>http://www.my-url.com</authorUrl>
<copyright>Copyright Info Goes Here</copyright>
<license>Copyright License Goes Here</license>
<version>2.5.0</version>
<description>TPL_MYTEMPLATE1_XML_DESCRIPTION</description>


templateDetails.xml
<files>
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>
<folder>javascript</folder>
<folder>fonts</folder>
<folder>language</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>component.php</filename>
<filename>error.php</filename>
</files>


templateDetails.xml
<positions>
<position>debug</position>
<position>position-0</position>
…
</positions>

<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_mytemplate1.ini</language>
<language tag="en-GB">en-GB/en-GB.tpl_mytemplate1.sys.ini</language>
</languages>


templateDetails.xml
<config>
<fields name="params">
<fieldset name="advanced">
<field name="wrapperSmall" type="text" default="53"
label="TPL_MYTEMPLATE1_FIELD_WRAPPERSMALL_LABEL"
description="TPL_MYTEMPLATE1_FIELD_WRAPPERSMALL_DESC"
filter="integer" />
…
</fieldset>
</fields>
</config>
</extension>


index.php
• The primary file that controls the layout.
• Can use regular php within the file
• Uses tags (<jdoc include type=“…” />) to
determine where to output different pieces
• <jdoc include type=“head” />
• <jdoc include type=“component” />
• <jdoc include type=“module” name=“*position+” />
• <jdoc include type=“message” />



ADVANCED TOPICS

Html Overrides: What Are They?

• Override the layout for any MVC components
and modules
• MVC = Model, View, Controller
• Gives Joomla tremendous flexibility!


Html Overrides: How To?
• Create folder name that corresponds to
component or module under html
• Create folder name that corresponds to the
view name (ie. html/com_content/article)
• Create default.php file
• Can copy from the original as a starting point
• Ex: html/com_content/article/default.php


Template Parameters
• Derived from the templateDetails.xml
• <config><fields name=“params”>…</fields></config>
• Each parameter defined as a field
<field name=“…” type=“text” default=“…”
label=“*language string from language file+”
description=“*language string+” />


Template Parameters

• Access in the index.php with:
• $this->params->get(‘*parameter field name+');


Template Parameters
Configure the parameters in the Joomla Template admin


Language: Files & Overrides

• Provides the text for the language strings in
the template
• Two files in the language/en-GB/ folder
• en-GB.tpl_mytemplate1.ini
• Language strings used in the template
• en-GB.tpl_mytemplate1.sys.ini
• Language strings used in installation and admin



INSTALLATION

Installation
• Create archive (.zip or .tar.gz) file
• Install like any other extension in Control Panel
• Extensions >> Extension Manager >> Install
• Discover
• Copy folder and files to templates directory
• Extensions >> Extension Manager >> Discover
• Click Discover button
• Select and install



FOR MORE GUIDANCE

Resources
• http://magazine.joomla.org/issues/issue-may-
2012/item/740-How-to-convert-Joomla-15-template-to-
Joomla-25

• http://docs.joomla.org/Category:Template_Development


Get In Touch

• www.katalystcreativegroup.com
• dcranford@katalystcg.com
• @katalystsol.com
• 817-900-8787


Creating Custom Templates
for Joomla! 2.5

Creating Custom Templates for Joomla! 2.5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Creating Custom Templates for Joomla! 2.5

Semelhante a Creating Custom Templates for Joomla! 2.5 (20)

Último

Último (20)

Creating Custom Templates for Joomla! 2.5