Your SlideShare is downloading. ×
Creating Custom Templates for Joomla! 2.5
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Creating Custom Templates for Joomla! 2.5


Published on

In this presentation to the Dallas/Fort Worth Joomla User Group, we covered the basics of custom Joomla templates for Joomla 2.5. We discussed: …

In this presentation to the Dallas/Fort Worth Joomla User Group, we covered the basics of custom Joomla templates for Joomla 2.5. We discussed:

The Basics of Joomla Templates
- Overall File Structure
- templateDetails.xml file
- index.php file

Some Advanced Template Topics
- HTML Overrides to override the output of Joomla components and modules
- Template Parameters to use in the Template Styles
- Language Overrides

Two Methods of Installing Your Custom Template

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Creating Custom Templates for Joomla! 2.5 Dallas/Fort Worth Joomla User Group January 14, 2013
  • 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.
  • 3. Today We’ll Cover:• Custom Template Basics for Joomla! 2.5 • File Structure • templateDetails.xml • index.php • CSS
  • 4. Today We’ll Cover:• Advanced Topics • HTML Overrides • Parameters • Language Overrides• Installation
  • 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”
  • 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
  • 8. Template File Structure• Show image here…
  • 9. templateDetails.xml• Used during the installation process • Tells what files to install• Provides the optional parameters • Used in configuring the style options.
  • 10. templateDetails.xml<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"""><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></authorUrl> <copyright>Copyright Info Goes Here</copyright> <license>Copyright License Goes Here</license> <version>2.5.0</version> <description>TPL_MYTEMPLATE1_XML_DESCRIPTION</description>
  • 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>
  • 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>
  • 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>
  • 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” />
  • 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!
  • 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
  • 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+” />
  • 19. Template Parameters• Access in the index.php with: • $this->params->get(‘*parameter field name+);
  • 20. Template ParametersConfigure the parameters in the Joomla Template admin
  • 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
  • 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
  • 24. Creating Custom Templates for Joomla! 2.5FOR MORE GUIDANCE
  • 25. Resources• 2012/item/740-How-to-convert-Joomla-15-template-to- Joomla-25•
  • 26. Get In Touch•••• 817-900-8787
  • 27. Creating Custom Templates for Joomla! 2.5