Overrides

You have already created a style, changed the CSS files and the main page of your template and you are still unhappy with the result? :-) Then this is the perfect time to discuss overrides. In Joomla! there are two kinds of overrides: template overrides and alternative layouts.

Template overrides

Let's assume you want to change the layout of the search result page. A component like the search component has a default template layout, which is stored in the file /httpdocs/components/com_search/views/search/tmpl/default.php. This file makes the search page look the way it looks. Add a few words to the file, save it and you will immediately see the result! For example, add

<strong>I have changed something :-) </strong>

in line 13 and see what happens (Figure 1).

cocoate.com/node/6476Template override

Figure 1: Changes in the HTML output

The result is good for your motivation because it was so easy and is displayed in every template. However, it is not good for your reputation because you have just changed core code. With the next Joomla! update, your changes will be gone!

A better alternative would be to use template overrides in each template. Copy the changed file to your template folder to /httpdocs/templates/[template_name]/html/com_search/search/default.php and remove the changes in the original file. The result on the webpage is the same but, behind the scenes, you have overridden the original .../default.php file with your desired content layout - without changing core code - well done!

This system was introduced in the year of 2007 with the release of Joomla! 1.5 and still works very well today.

Alternative layouts

In Joomla! 2.5 the overrides have an enhancement called alternative layouts. I am sure you have already seen the Alternative Layout field in the edit form of articles, modules and categories (Figure 2).

cocoate.com/node/6476Alternative Layout

Figure 2: Alternative layout in an article

Why do we need alternative layouts? Imagine, you are an administrator or webmaster and a template comes with three alternative layouts for an article. Sometimes it is a 'normal article', sometimes it should look like a product, and sometimes like a book page. You only have to choose which layout you would like to use. That sounds like a great feature and, of course, it is.

The technique is the same as with template overrides. You have to create a folder with the same name as the component or module and a subfolder for the view. There are two differences:

  1. Obviously the file name has to be something other than default.php as this one has already been reserved for template overrides.
  2. The alternative layout is, of course, not automatically selected.

Additionally to the alternative layout, menu item types can be added to the layout and the option items of that article can be controlled by defining them in an xml file with the same name as the alternative layout file (Figure 3).

cocoate.com/node/6476Additional Menu item Type

Figure 3: Additional menu item types

The creation of these files are no beginner's topic but I am sure third-party templates will soon make use of these new possibilities (Figure 4).

cocoate.com/node/6476More alternative layouts

Figure 4: Additional layouts in an article

 

Comments

Just wanted to say thanks for this article. After many hours of searching, this was the first article I found that clearly described how to properly override a component template in 2.5. Lots of articles exist on overriding module templates, but not on component templates and they are a little tricky because the "views" folder should not be included in the path where the override file needs to reside. This isn't intuitively clear, especially because that level of folder does not exist for modules.

Anyway, thank you very much. This is the second time I've found something on your site that was very helpful to me, so I'm sure I'll be coming back more in the future!