Creating Custom Templatesfor Joomla! 2.5
Dallas/Fort Worth Joomla User GroupJanuary 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.
www.KatalystCreativeGroup.com
Today We’ll Cover:
• Custom Template Basics for Joomla! 2.5• File Structure• templateDetails.xml• index.php• CSS
www.KatalystCreativeGroup.com
Today We’ll Cover:
• Advanced Topics• HTML Overrides• Parameters• Language Overrides
• Installation
www.KatalystCreativeGroup.com
THE BASICSCreating Custom Templates for Joomla! 2.5
Template File Structure
• Required Files:• index.php• templateDetails.xml• template_thumbnail.png• css folder
• Folder must be named “css”
www.KatalystCreativeGroup.com
Template File Structure
• 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
www.KatalystCreativeGroup.com
Template File Structure
• Show image here…
www.KatalystCreativeGroup.com
templateDetails.xml
• Used during the installation process• Tells what files to install
• Provides the optional parameters• Used in configuring the style options.
www.KatalystCreativeGroup.com
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>
www.KatalystCreativeGroup.com
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>
www.KatalystCreativeGroup.com
www.KatalystCreativeGroup.com
templateDetails.xml
<positions><position>debug</position><position>position-0</position><position>position-1</position><position>position-2</position>…<position>position-15</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>
www.KatalystCreativeGroup.com
www.KatalystCreativeGroup.com
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 TOPICSCreating Custom Templates for Joomla! 2.5
Html Overrides: What Are They?
• Override the layout for any MVC components and modules• MVC = Model, View, Controller
• Gives Joomla tremendous flexibility!
www.KatalystCreativeGroup.com
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
www.KatalystCreativeGroup.com
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]” />
www.KatalystCreativeGroup.com
Template Parameters
• Access in the index.php with:• $this->params->get(‘[parameter field name]');
www.KatalystCreativeGroup.com
Template Parameters
www.KatalystCreativeGroup.com
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
www.KatalystCreativeGroup.com
INSTALLATIONCreating Custom Templates for Joomla! 2.5
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
www.KatalystCreativeGroup.com
FOR MORE GUIDANCECreating Custom Templates for Joomla! 2.5
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
www.KatalystCreativeGroup.com
Get In Touch
• www.katalystcreativegroup.com• [email protected]• @katalystsol.com• 817-900-8787
www.KatalystCreativeGroup.com
Creating Custom Templatesfor Joomla! 2.5
www.KatalystCreativeGroup.com