You can take over control of virtually all the output that is generated by Joomla. Except for files that are provided in the Joomla! distribution itself, overrides or customization eliminate the need to hack core files that could change when the site is updated to a new version.

View and Layout in Joomla

Components have the ability to display different information in different ways. For example, the Articles Component (com_content) is able to display a single article, or articles in a category, or categories in a section. Each of the ways of representing the different types of data (an article, or a category, or a section) is called a view. The view is part of the MVC framework. Most components have many views. However, the view doesn't actually display the output. Output is displayed using what is called layout and it is possible for a view to have a variety of layouts.

So, components can have multiple views, and each view can have one or more layouts. Each view assembles a fixed set of information, but each layout can display that information in different ways. For example, the Category view in the Articles component assembles a number of articles. These articles could be displayed in a list or in a table.

Template versus Layout

The template sets up a structural framework for the page of the website. Within this framework are positions for modules and a component to display. What actually gets displayed is governed by the module layout, or the combination of view and layout in the case of the component.

Ancillary Customization - Chrome

In addition to layouts, modules have what is called chrome. The Chrome is the style with which a module is to display. There are many different built-in styles for modules (raw, xhtml, and so on). It is also possible to define your own chrome styles for modules. For example, you could design a chrome to display all the modules in a particular position.

Types of Component Output

In the file structure of a component, under the views directory, each view is placed in a directory of its own. For example, the content component has views: articles, category, archive, frontpage and section.

Under the articles directory, there are number of files. There is almost always a file called view.html.php. This is the view file, but there can be more than one depending on the type of output to produce. It has a specific naming convention, view.output_type.php, where the output type can be html, feed, pdf, raw or error. What this means is when you want HTML output for this particular view, the view.html.php file is used. When you want the RSS output, the view.feed.php file is used.

Layouts

Under the view directory there is a tmpl directory in which the layout files reside. Each PHP file in this directory represents a layout. For example, article/tmpl/default.php is the default layout for an article whereas article/tmpl/form.php is the edit form for an article; category/tmpl/default.php is the default layout for a category whereas category/tmpl/blog.php displays the list of article differently.

The relationship between component views and layout can be seen when adding a new menu item. Having clicked on Articles (which represents com_content), the tree expands to show the list of views and each layout within the view.

Copying or Creating Layout Files

Layout overrides only work within the active template and are located under the html directory in the template. For example, the overrides for the JA Purity template are under templates/ja_purity/html/. If you create overrides in one template, they will not be available in other templates.

Structure for component overrides

/html/com_component_name/view_name/layout_file_name.php

If we want to override the default layout for an article, first you need to copy the following file to the override location given above.

/components/com_content/views/article/tmpl/default.php

After the files are copied, you are free to customize these files.

Sub-Layouts

In some views, some of the layouts have a group of files that start with the same name. For example, the category view blog layout actually has three parts: the main layout file blog.php and two sub-layout files, blog_item.php and blog_links.php. These sub-layouts are loaded in the blog.php file using the loadTemplate method.

echo $this->loadTemplate('item');
// or
echo $this->loadTemplate('links');

When loading sub-layouts, the view already knows what layout you are in, so you don't have to provide the prefix (that is, you load just 'item', not 'blog_item').

It is possible to override just a sub-layout without copying the whole set of files. For example, if you fine with the default output for the blog layout, but just want to customize the item sub-layout, you could just copy:

/components/com_content/views/category/tmpl/blog_item.php

Module Layout Overrides

Similar to components, under the main module directory there is a tmpl directory. There is usually only one layout file but there could be more also. The structure for module overrides is:

/html/mod_module_name/layout_file_name.php

How To Create Overrides

Joomla has a way to add overrides in the administration area in 'Extensions' >Templates > Templates > Click on the title of your template > 'Create Overrides' tab.