Wednesday, March 16, 2016

Using Template Overrides in Joomla

When developing a Joomla template, there are many things you may want to override. It was easy for me to find documentation on overriding views, but there are many other things you can override as well (some of which were much harder for me to find documentation for). System images, views, jQuery, layouts, and plugins can all be overridden.

Overriding Layouts

Layouts are used in Joomla! to display things like icons, readmore, tags, etc. These are common things you will probably want to override if you're creating a custom template.
  • Navigate to your Joomla base directory and copy the file you want to override from layouts/whatever folder
  • Paste the file in your template folder/html/layouts 
For example:
joom/layouts/joomla/content/icons.php becomes joom/templates/mytemplate/html/layouts/joomla/content/icons.php
Now you can modify the file however you wish in the html folder of your template!

Overriding Views

Find the view you want, for example: joom/components/com_content/views/article/tmpl/default.php
Copy it to the html folder in your template: joom/templates/mytemplate/com_content/article/default.php
Note that you do not need to include the "tmpl" folder in the override html folder of your template

Overriding System Images

System images can be overridden by finding the image you want to override and placing your version in:

Overriding jQuery

jQuery can be overridden by placing the version of jQuery you want to use in the following folder of your template:
Now whenever something calls JHtml::_('jquery.framework'); when your template is active it will load your version of jQuery.

Overriding Plugins tmpl

You may override most core system plugin templates by creating a new folder in your html directory with the name of the plugin as defined in the administrator language folder. For example, in joomla/administrator/language/en-GB there is a file called "en-GB.plg_content_pagenavigation.ini" - this means we must create a folder called "plg_content_pagenavigation" in our template's html folder. Copy the default view from the plugin you are overriding into your new folder.
Thank you for Dean's Post on StackExchange for the plugin information


Post a Comment