Jure Stern Design & Development

458 words
1 min 31 sec

Using Alternative module layout in Joomla 1.7

Published on 29 Dec 2011 Comments

In Joomla 1.6 and 1.7 we have the option to use several different alternative layouts for individual styling. Alternative layouts differ from standard Joomla overrides in that, you can have unlimited alternative layout files. We also use different naming conventions and we must enable the layout in the Alternative Layout option field.

We can create the following alternative layout files:

  1. Alternative layout file for Modules
  2. Alternative layout file for Categories
  3. Alternative layout file for Articles
  4. Alternative layout file for Menus

Lets say we want to have two login modules on our web page with different styling and form. We could achieve the same result with module overrides, module class suffixes and CSS. But the easiest option is to create 2 different login module files and apply them to the two modules in the backend. The great thing about this workflow is, that you won't delete your files if you will be updating your Joomla! installation. It is the same as when using standard module overrides.

To procedure for creating the required files is almost the same as the one for creating standard Joomla! overrides. We need to create an html folder inside our template folder. In that folder we will create the mod_login folder (your_template_name/html/mod_login). If we already have a folder with the name created, we probably have a file inside it named default.php. That is the file for the standard Joomla! override.

For our two modules we will create two different files. One will be responsible for the horizontal appearance and one for the vertical appearance of the login module. We have to follow the naming conventions precisely, or else our layout won't work. Your initial file name must not contain any underscores! Underscores are used in the file names that get called from a parent file.

I created two files named horizontal.php and vertical.php. If I wanted to include a call to a second file from horizontal.php, I can create a file named horizontal_1.php. But the parent files have to be always present. The filenames with the underscores won't be shown in the Alternative Layout fields.

View of alternative layout files for modules in the Joomla! html override folder
View of alternative layout files for modules in the Joomla! html override folder.

The content of the files can be copied from the original default.php file in the login module (modules/mod_login/tmpl/default.php). After we finish editing the files we need to take another important step to apply our new layouts. We need to choose the layout in the module settings in the backend.

Choosing the Alternative Layout override for login module
Choosing the Alternative Layout override for login module.

As you can see we now have the option to choose our layout override file. Alternative Layout files always override the default template overrides, so we must be careful to remember where we are using them.

All in all, creating unique designs with layout files is a great opportunity to create designs with great user experience. In my blog I used them throughout the website. Maybe module layout files are not as popular as the ones for articles, categories and menus. More about using those will come in the next blog post.

About the Author

A picture of Jure Stern

Jure Stern is a Freelance Web Designer & Developer from Slovenia. He worked at a startup in Canada and is now living his dream of being a freelancer.

comments powered by Disqus