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

26,477 views

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 www.KatalystCreativeGroup.com
  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. www.KatalystCreativeGroup.com
  3. 3. Today We’ll Cover:• Custom Template Basics for Joomla! 2.5 • File Structure • templateDetails.xml • index.php • CSS www.KatalystCreativeGroup.com
  4. 4. Today We’ll Cover:• Advanced Topics • HTML Overrides • Parameters • Language Overrides• Installation www.KatalystCreativeGroup.com
  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” www.KatalystCreativeGroup.com
  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 www.KatalystCreativeGroup.com
  8. 8. Template File Structure• Show image here… www.KatalystCreativeGroup.com
  9. 9. templateDetails.xml• Used during the installation process • Tells what files to install• Provides the optional parameters • Used in configuring the style options. www.KatalystCreativeGroup.com
  10. 10. 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> www.KatalystCreativeGroup.com
  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> www.KatalystCreativeGroup.com
  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> www.KatalystCreativeGroup.com
  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> www.KatalystCreativeGroup.com
  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” /> www.KatalystCreativeGroup.com
  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! www.KatalystCreativeGroup.com
  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 www.KatalystCreativeGroup.com
  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+” /> www.KatalystCreativeGroup.com
  19. 19. Template Parameters• Access in the index.php with: • $this->params->get(‘*parameter field name+); www.KatalystCreativeGroup.com
  20. 20. Template ParametersConfigure the parameters in the Joomla Template admin www.KatalystCreativeGroup.com
  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 www.KatalystCreativeGroup.com
  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 www.KatalystCreativeGroup.com
  24. 24. Creating Custom Templates for Joomla! 2.5FOR MORE GUIDANCE
  25. 25. 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 www.KatalystCreativeGroup.com
  26. 26. Get In Touch• www.katalystcreativegroup.com• dcranford@katalystcg.com• @katalystsol.com• 817-900-8787 www.KatalystCreativeGroup.com
  27. 27. Creating Custom Templates for Joomla! 2.5 www.KatalystCreativeGroup.com

×