Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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:

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

Creating Custom Templates for Joomla! 2.5

  1. 1. Creating Custom Templates for Joomla! 2.5 Dallas/Fort Worth Joomla User Group January 14, 2013
  2. 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. 3. Today We’ll Cover:• Custom Template Basics for Joomla! 2.5 • File Structure • templateDetails.xml • index.php • CSS
  4. 4. Today We’ll Cover:• Advanced Topics • HTML Overrides • Parameters • Language Overrides• Installation
  5. 5. Creating Custom Templates for Joomla! 2.5THE BASICS
  6. 6. Template File Structure• Required Files: • index.php • templateDetails.xml • template_thumbnail.png • css folder • Folder must be named “css”
  7. 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. 8. Template File Structure• Show image here…
  9. 9. templateDetails.xml• Used during the installation process • Tells what files to install• Provides the optional parameters • Used in configuring the style options.
  10. 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. 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. 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. 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. 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. 15. Creating Custom Templates for Joomla! 2.5ADVANCED TOPICS
  16. 16. Html Overrides: What Are They?• Override the layout for any MVC components and modules • MVC = Model, View, Controller• Gives Joomla tremendous flexibility!
  17. 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. 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. 19. Template Parameters• Access in the index.php with: • $this->params->get(‘*parameter field name+);
  20. 20. Template ParametersConfigure the parameters in the Joomla Template admin
  21. 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. 22. Creating Custom Templates for Joomla! 2.5INSTALLATION
  23. 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. 24. Creating Custom Templates for Joomla! 2.5FOR MORE GUIDANCE
  25. 25. Resources• 2012/item/740-How-to-convert-Joomla-15-template-to- Joomla-25•
  26. 26. Get In Touch•••• 817-900-8787
  27. 27. Creating Custom Templates for Joomla! 2.5