07 3103 2894

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:

1. Defining the menu parameter
2. Using the menu parameter to load a CSS file
3. Defining the CSS file

Defining the menu parameter

Navigate to /components/com_content/views/article/tmpl/default.xml and add the following parameter definition in between the declarations.

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.

Using the menu parameter to load a CSS file

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 /templates//index.php but some template builders may have put a header_include.php or some such indirection so you need to find the list of stylesheet inclusions for the template and ensure this code goes immediately after them.

//
// 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.

Defining the CSS file

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 /templates//css/template.css and associated files together with a view of the relevant web page using Firebug to identify the CSS classes that you want to modify. As a trivial example, create /templates//css/redh2.css containing

@charset "utf-8";
/* CSS template override to color h2 headings red */

h2 {
color:#FF0000;
}

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.

Afterword...

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.

TrackBack URI for this entry

Comments (6)

Subscribe to this comment's feed

It works!!!
written by emerson sanchez, February 17, 2010

Thanks for sharing this...You definitely save me some time...Great article!!!

• 
• +0
• 
• 

I want to take it to the next level
written by Kevin Steinmetz, March 12, 2010

I want to set a class on the body tag based on the article category or section REGARDLESS of what menu item is active. Direct links from inside the article or a module will not consistently change the class on the body tag. Case and point the news section has a front_page class but in the admin area it has: page class suffix:topmenu I am assigning the class this way:

$pageclass = "";
$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );

• 
• +0
• 
• 

Re: taking it to the next level
written by Paul Whipp, March 15, 2010

Hi Kevin,

If you are looking for css styling on a per article basis its probably better to add a css file to the template and put your classes in there. You can then use a div in the article to pick the style you want for the article.

On the other hand if you want to restyle the entire web page for a particular article based on its section and/or category I think I'd be inclined to set up an appropriate menu item and then use the menu itemid explicitly in any links where I wanted that style to be used. The menu item need not be published for this to work if you don't need it, it just needs to exist.

This would give you full control over both the style and the modules etc. you want to present alongside articles in a particular section or category.

• 
• +0
• 
• 

nice one
written by essay, July 27, 2010

love this

• 
• +0
• 
• 

...
written by pdu acrylic awards, December 04, 2010

Thank you for the information.

• 
• +0
• 
• 

...
written by rabiya, January 11, 2012

You are making a lot of great points during this blog post however it is almost impossible in my situation to focus on this content on the complicated page design!
search engine optimization rankings

• 
• +0
• 
• 

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment