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

2.
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

3.
Today We’ll Cover:• Custom Template Basics for Joomla! 2.5 • File Structure • templateDetails.xml • index.php • CSS www.KatalystCreativeGroup.com

4.
Today We’ll Cover:• Advanced Topics • HTML Overrides • Parameters • Language Overrides• Installation www.KatalystCreativeGroup.com

5.
Creating Custom Templates for Joomla! 2.5THE BASICS

6.
Template File Structure• Required Files: • index.php • templateDetails.xml • template_thumbnail.png • css folder • Folder must be named “css” www.KatalystCreativeGroup.com

7.
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

8.
Template File Structure• Show image here… www.KatalystCreativeGroup.com

9.
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

10.
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

11.
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

12.
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> www.KatalystCreativeGroup.com

13.
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

14.
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” /> www.KatalystCreativeGroup.com

15.
Creating Custom Templates for Joomla! 2.5ADVANCED TOPICS

16.
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

17.
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

18.
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

19.
Template Parameters• Access in the index.php with: • $this->params->get(‘*parameter field name+); www.KatalystCreativeGroup.com

20.
Template ParametersConfigure the parameters in the Joomla Template admin www.KatalystCreativeGroup.com

21.
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

22.
Creating Custom Templates for Joomla! 2.5INSTALLATION

23.
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

24.
Creating Custom Templates for Joomla! 2.5FOR MORE GUIDANCE

25.
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

26.
Get In Touch• www.katalystcreativegroup.com• dcranford@katalystcg.com• @katalystsol.com• 817-900-8787 www.KatalystCreativeGroup.com

27.
Creating Custom Templates for Joomla! 2.5 www.KatalystCreativeGroup.com