One Joomla! Template, Unlimited Stylesheet Options

It took me a while to like Joomla!. It’s not the most immediately welcoming of content management systems either in its user interface or to design and style. I’ve worked with it for a while now and it’s definitely grown on me. It’s a flexible and powerful content management system, and is flexible enough to allow a lot of interesting design work once you’ve got the trick of it. I recently worked out a simple and quick solution for increasing the design options and variation in a single Joomla! site.

One of the problems with a content management system like Joomla is providing a varied number of layouts. With a single base template file from which the site’s appearance is developed, it’s easy to end up with a site that looks good but doesn’t provide much flexibility. The template loads certain CSS files which define the layout of the HTML, and that’s that. But what if you want some pages to have a two column layout, others to have three columns, or you want to switch menu positions depending on the page people are browsing to? That’s more complicated.

Loading Modules On A Joomla! Page

Joomla! uses modules for much of the page functionality outside the main content. Modules can be pretty much any kind of functionality, and you can specify different modules to load only on certain pages within Joomla!. You can also define various tags which can be linked to each module within the Joomla! administration.

The code within the index.php template file for including a module would be something like this:

countModules(‘user1′)) : ?>

In the Joomla administration section you would assign to a module two variables – the (in this case “user1″) and the pages on which it loads (all the pages on a site, selected pages, or no pages at all). When the page loads it checks if there the module is specified to load on the page, and its assigned .

Tweaking The Code To Allow Conditional Stylesheets

Let’s say I have three pages on a site. A homepage, a ‘latest news’ page, and an ‘about us’ page. I want the homepage to be a dual column layout, the latest news page to be three column, and the about us page to be single column. Yet in the index.php header I’m only loading specific stylesheets from my Joomla template. I can vary the content of the pages easily enough from the Joomla! admin, but how do I change the layout?

Check the code above again. It’s a pretty simple PHP function that says “if x is true, then do y”. In this case, if there is a module for this page with the “user1″ then activate this jdoc:include function to load the module. Except there’s nothing at all to say that we have to put a jdoc:include function in that PHP. We can put any code we want in there. We don’t have to tell it to load the module, we can put any code in there to activate when the module is active in Joomla!

So how about this?

countModules(‘user1′)) : ?>

When the page loads it still checks to see if the module is specified, and its assigned position, but it doesn’t load the module. Instead it loads the stylesheet that we’ve specified.

Putting The Elements Together

Defining the element

Joomla! templates have a templateDetails.xml file. In that file you can specify the following:

…

dualcolumn

threecolumn

singlecolumn …

These positions will then be available to assign to modules in the Joomla! administration.

Creating the module

In the Joomla! administration, go to Module Manager and create a new module. It doesn’t actually matter what the content of the module is, because we’re not loading it, instead we’re just using it to activate stylesheets. I tend to choose the ‘Custom HTML’ module type. Name the module something appropriate. Then define the “Position” of the module to the that we defined in the XML file, and use the “Menu Assignment” option to specify which pages we want to have that layout.

So for example I mentioned above I create a module that is called “Layout – Single Column”, I set the “Position” to be “singlecolumn” and I assign the module to be active on the ‘About Us’ page. I then create other “Layout – Dual Column” and “Layout – Three Column” modules and configure them as necessary.

Defining the index.php

I place the following in the section of the index.php page, after the code which loads the universal stylesheets for the page.

countModules(’singlecolumn’)) : ?>

countModules(‘dualcolumn’)) : ?>

countModules(‘threecolumn’)) : ?>

Now, when the page loads the ‘About Us’ page it will search for the singlecolumn.css file, which will define the layout, the homepage will search for the dualcolumn.css and the ‘Latest News’ page will find the threecolumn.css.

More Flexible Joomla! Design

The example I’ve used here demonstrates how you can use this method to define different column layouts to the same Joomla! template file. You’re loading seperate stylesheet files, though, so it’s far more flexible than that. More extensive stylesheets could see different pages within the same Joomla! site have entirely different appearances in color, font style, background images, really the options are as varied as your styling options are.

I’ve found the ability to vary the appearance of pages within a single Joomla! site using this method has given me far more creative control, leading to better designs and more user appropriate results.