Joomla Custom Templates

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.
www.KatalystCreativeGroup.com
Today Well Cover:

Custom Template Basics for Joomla! 2.5
File Structure templateDetails.xml index.php CSS
Today Well 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> <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 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-may2012/item/740-How-to-convert-Joomla-15-template-toJoomla-25 http://docs.joomla.org/Category:Template_Development
Get In Touch
www.katalystcreativegroup.com dcranford@katalystcg.com @katalystsol.com 817-900-8787


Joomla Custom Templates

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Joomla Custom Templates

Uploaded by

Copyright:

Available Formats

Creating Custom Templates for Joomla! 2.

A Bit About Me: Don Cranford

Today Well Cover:

Today Well Cover:

Creating Custom Templates for Joomla! 2.5

Template File Structure

Template File Structure

Template File Structure

Provides the optional parameters

Creating Custom Templates for Joomla! 2.5

Html Overrides: What Are They?

Gives Joomla tremendous flexibility!

Html Overrides: How To?

Each parameter defined as a field

Language: Files & Overrides

Creating Custom Templates for Joomla! 2.5

Creating Custom Templates for Joomla! 2.5

FOR MORE GUIDANCE

Creating Custom Templates for Joomla! 2.5

You might also like