Creating Custom Templates      for Joomla! 2.5   Dallas/Fort Worth Joomla User Group               January 14, 2013     ww...
A Bit About Me: Don Cranford• Partner / Lead Developer at Katalyst Creative  Group  • Web Design/Dev, Branding, Content, S...
Today We’ll Cover:• Custom Template Basics for Joomla! 2.5  •   File Structure  •   templateDetails.xml  •   index.php  • ...
Today We’ll Cover:• Advanced Topics  • HTML Overrides  • Parameters  • Language Overrides• Installation                 ww...
Creating Custom Templates for Joomla! 2.5THE BASICS
Template File Structure• Required Files:  •   index.php  •   templateDetails.xml  •   template_thumbnail.png  •   css fold...
Template File Structure• Optional Files  •   html (folder… used for overrides)  •   language (for language overrides)  •  ...
Template File Structure• Show image here…               www.KatalystCreativeGroup.com
templateDetails.xml• Used during the installation process  • Tells what files to install• Provides the optional parameters...
templateDetails.xml<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN""h...
templateDetails.xml  <files>        <folder>css</folder>        <folder>html</folder>        <folder>images</folder>      ...
templateDetails.xml  <positions>       <position>debug</position>       <position>position-0</position>       <position>po...
templateDetails.xml     <config>          <fields name="params">                <fieldset name="advanced">                ...
index.php• The primary file that controls the layout.• Can use regular php within the file• Uses tags (<jdoc include type=...
Creating Custom Templates for Joomla! 2.5ADVANCED TOPICS
Html Overrides: What Are They?• Override the layout for any MVC components  and modules  • MVC = Model, View, Controller• ...
Html Overrides: How To?• Create folder name that corresponds to  component or module under html• Create folder name that c...
Template Parameters• Derived from the templateDetails.xml  • <config><fields name=“params”>…</fields></config>• Each param...
Template Parameters• Access in the index.php with:  • $this->params->get(‘*parameter field name+);                  www.Ka...
Template ParametersConfigure the parameters in the Joomla Template admin                       www.KatalystCreativeGroup.com
Language: Files & Overrides• Provides the text for the language strings in  the template• Two files in the language/en-GB/...
Creating Custom Templates for Joomla! 2.5INSTALLATION
Installation• Create archive (.zip or .tar.gz) file   • Install like any other extension in Control Panel   • Extensions >...
Creating Custom Templates for Joomla! 2.5FOR MORE GUIDANCE
Resources• http://magazine.joomla.org/issues/issue-may-  2012/item/740-How-to-convert-Joomla-15-template-to-  Joomla-25• h...
Get In Touch•   www.katalystcreativegroup.com•   dcranford@katalystcg.com•   @katalystsol.com•   817-900-8787             ...
Creating Custom Templates      for Joomla! 2.5    www.KatalystCreativeGroup.com
Upcoming SlideShare
Loading in...5
×

Creating Custom Templates for Joomla! 2.5

25,763
-1

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
25,763
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
254
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×