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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Creating Custom Templates for Joomla! 2.5

Ähnlich wie Creating Custom Templates for Joomla! 2.5 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Creating Custom Templates for Joomla! 2.5