Successfully reported this slideshow.

Creating Custom Templates for Joomla! 2.5

3

Share

Loading in …3
×
1 of 27
1 of 27

Creating Custom Templates for Joomla! 2.5

3

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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.5 THE 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.5 ADVANCED 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 Parameters Configure 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.5 INSTALLATION
  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.5 FOR 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

×