Creating Custom Templates for Joomla! 2.5

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.


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


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”



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



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!


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


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


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


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



Get In Touch

• www.katalystcreativegroup.com• [email protected]• @katalystsol.com• 817-900-8787


mailto:[email protected]

mailto:[email protected]

Creating Custom Templatesfor Joomla! 2.5


Technology

Creating Custom Templates for Joomla! 2.5