HTML Overrides in Joomla
Presented by Justin Kerr Prototaph Interactive justin@prototaph.com
What are HTML Overrides?
What are HTML Overrides? •
An additional option for Joomla templates
What are HTML Overrides? •
An additional option for Joomla templates
•
Control structure for com_content (and modules)
What are HTML Overrides? •
An additional option for Joomla templates
•
Control structure for com_content (and modules)
Allows for pretty much total control over the HTML output of Joomla's dynamic elements •
Getting Started with Overrides
Getting Started with Overrides •
Pretty good online documentation: http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core
Getting Started with Overrides •
Pretty good online documentation: http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core
•
Great examples in default templates … especially for Joomla 1.5 Beez … Joomla 1.6 templates don't have as many examples as 1.5
Getting Started with Overrides •
Pretty good online documentation: http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core
•
Great examples in default templates … especially for Joomla 1.5 Beez … Joomla 1.6 templates don't have as many examples as 1.5
•
Start by looking in: <site root>/templates/<default template name>/html/
Process for Creating Overrides
Process for Creating Overrides 1. Find PHP file for element you want to change <site root>/components/<component_name>/views/<view_type>/tmpl/<filename>.php ex. <site root>/components/com_content/views/article/tmpl/default.php
Process for Creating Overrides 1. Find PHP file for element you want to change <site root>/components/<component_name>/views/<view_type>/tmpl/<filename>.php ex. <site root>/components/com_content/views/article/tmpl/default.php
2. Copy to <template name>/html/ subdirectory <site root>/templates/<template_name>/html/<component_name>/<view_name>/<filename>.php ex. <site root>/templates/<template_name>/html/com_content/article/default.php
Process for Creating Overrides 1. Find PHP file for element you want to change <site root>/components/<component_name>/views/<view_type>/tmpl/<filename>.php ex. <site root>/components/com_content/views/article/tmpl/default.php
2. Copy to <template name>/html/ subdirectory <site root>/templates/<template_name>/html/<component_name>/<view_name>/<filename>.php ex. <site root>/templates/<template_name>/html/com_content/article/default.php
3. Change code of PHP file
Process for Creating Overrides 1. Find PHP file for element you want to change <site root>/components/<component_name>/views/<view_type>/tmpl/<filename>.php ex. <site root>/components/com_content/views/article/tmpl/default.php
2. Copy to <template name>/html/ subdirectory <site root>/templates/<template_name>/html/<component_name>/<view_name>/<filename>.php ex. <site root>/templates/<template_name>/html/com_content/article/default.php
3. Change code of PHP file 4. Voila!
Some Common Use Cases: ●
Rearrange structure of component elements
●
Add that extra CSS class just where you need it.
●
Get rid of junk you don't need/want
●
Adjust structure of modules
Custom PHP in Overrides The Site of Big Shoulders (sobs.org) employs custom overrides:
At right, sobs.org home page articles employ a special blog view.
Custom PHP in Overrides Sobs.org home page HTML shows Article ID-specific CSS classes in blog view items
Custom PHP in Overrides Article ID-specific CSS class enabled by PHP commands in the override file: sobs.org/templates/sobs_4.1/html/com_content/frontpage/default.php
Custom PHP in Overrides Specific CSS class definitions allow for specific, targeted styling of a blog view item
Advanced Topics
Advanced Topics â&#x2014;?
Be cognizant of security concerns when using PHP in overrides
Advanced Topics ●
●
Be cognizant of security concerns when using PHP in overrides Joomla 1.6 now offers Alternative Layouts … like HTML overrides; just create a new PHP file in the template override directory and give it a different name (e.g. altlayout.php).
Questions and More Information
●
Use JoomlaChicago.com to ask questions
●
Justin Kerr – justin@prototaph.com