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

24,444
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: …

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
24,444
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
243
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Creating Custom Templates for Joomla! 2.5 Dallas/Fort Worth Joomla User Group January 14, 2013 www.KatalystCreativeGroup.com
  • 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. Today We’ll Cover:• Custom Template Basics for Joomla! 2.5 • File Structure • templateDetails.xml • index.php • CSS www.KatalystCreativeGroup.com
  • 4. Today We’ll Cover:• Advanced Topics • HTML Overrides • Parameters • Language Overrides• Installation www.KatalystCreativeGroup.com
  • 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” www.KatalystCreativeGroup.com
  • 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. Template File Structure• Show image here… www.KatalystCreativeGroup.com
  • 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. 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. 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. 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. 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. 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. 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! www.KatalystCreativeGroup.com
  • 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. 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. Template Parameters• Access in the index.php with: • $this->params->get(‘*parameter field name+); www.KatalystCreativeGroup.com
  • 20. Template ParametersConfigure the parameters in the Joomla Template admin www.KatalystCreativeGroup.com
  • 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. 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 www.KatalystCreativeGroup.com
  • 24. Creating Custom Templates for Joomla! 2.5FOR MORE GUIDANCE
  • 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. Get In Touch• www.katalystcreativegroup.com• dcranford@katalystcg.com• @katalystsol.com• 817-900-8787 www.KatalystCreativeGroup.com
  • 27. Creating Custom Templates for Joomla! 2.5 www.KatalystCreativeGroup.com