Its a common request, particularly for the 'brochure' or relatively static pages of a website...
I'd like to vary the fonts or background colours on a particular page.
Of course, in Joomla a page means a menu item and the 'pages' in question are generally single article pages so I'll consider this as an enhancement to the available Joomla 1.5 behaviour with respect to the Article Layout menu item.
To achieve this with a general and extendable solution, I want to add a menu parameter to the article layout option that will let me specify a CSS file that is to take precedence over the default template CSS definitions. This will let us change the logo, colours etc. of the template for each menu item displaying a single article should we wish to do so (leaving the parameter blank will use the default template settings).
There are three parts to this problem:
At some stage we'll perhaps look to adding a type that lets us pick a file but text will do for now.
I found the source information for this procedure in the very useful Joomla community magazine.
OK, this is the trickiest bit and it involves some PHP to modify the existing template. Life would be easy if we had access to the menu parameters in the template but, Joomla passes a jDocumentHTML object to the template because it assumes that the template can handle all of the presentation stuff. This assumption is usually correct but our modification is attempting to change the presentation using a menu item parameter because tracking the menu item's presentation in the template is a pain, requiring user manipulation of menu item IDs or other user complexities.
Add the following code just after the last of the style sheet entries in the header block for the template. Usually it will be in
// Pull up the active menu so we can grab its stylesheet
$menus = &JSite::getMenu();
$menu = $menus->getActive();
$menu_params = new JParameter($menu->params);
/templates/template?>/css/get('menu_stylesheet'); ?>.css" rel="stylesheet" />
What we're doing here is plucking the menu back out of the site application object and accessing our parameter. Then we're using that parameter to load up the css file to overwrite any existing styles as we see fit.
The CSS file can be as complex as you like but I recommend keeping it simple and just changing a few things like colour shades and/or the header background image. Use the
/* CSS template override to color h2 headings red */
Now you can create a menu item using Article Layout and enter redh2.css in the "Select style sheet" parameter. When you use this menu item on your site, any h2 formatted headings in the article appear in red.
Ideally we'd like to do this in a way that is robust when we upgrade Joomla or when we change or modify the default template. As it stands there is a risk of significant changes to the template or upgrades to Joomla overwriting the alterations that we have made.
I chose to do this on a per menu item basis because I think that fits most needs well and is where users are likely to look for the option. It is equally possible to apply the same technique additionally to sections and categories allowing the addition of CSS files to articles being opened under the section or under the category. There is nothing preventing the addition of stylesheet additions for all three things but the order of overwriting could become confusing (I'd probably put the menu item last, then the category and then the section so that the more 'specific' element has its CSS stylesheet overwrite the rest). However, I believe that over 90% of the issues will be covered with the menu option which is the most specific. Just remember that if you have two menus items that access the 'same' page you will need to set the menu stylesheet parameter for both menu options to see an effect.
Australia: 07 3103 2894
International: +61 410 545 357