Module overrides and how to use them in Joomla!

When we strive to create different user experiences on our Joomla! websites we can take advantage of some of the options, that are available with the Joomla! overrides. One of those options is overriding the output of every Joomla! module that we install on our site. If we change the files in the original module directory we can loose all our work when we update the module or the joomla system. Template overrides work with copying a file from the original module folder to our template folder.

Lets look at a basic joomla module structure when we install a module. The modules are installed in the root_directory/modules. They have a prefix of mod_ followed by the name of the module. E.g. the module responsible for the breadcrumbs is mod_breadcrumbs. After we open the folder we can see several files and one folder inside.

Folder structure of joomla breadcrumb module.

To use the module layout overrides we have to look in the template folder and copy the default.php file to our template directory.

In our template directory we have to create an html directory, following by the creation of a module folder (your_template_name/html/mod_breadcrumbs). In the module folder we then copy the default.php file from the original module directory.

Organizing html override folder in a joomla template folder.

Now if we open up the default.php file we can start changing its contents without worrying to break something in Joomla. If we delete something we can simply delete the file and copy it again from the original module folder. In the html folder of our template we can do exactly the same for components overrides. Just create a folder name with the component name and copy the default.php file. Some components have more files in the template folder so be sure to copy them all if you need them. The best thing about this is that sites wont break if you update a module or a component, because the changed files are saved in your template directory.

With Joomla! 1.7 we have new possibilities with changing our layouts. We call them Alternative layouts. I will speak more about them in the next tutorial.