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:
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
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.
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.
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.
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. About me...