How to assign css to a specific menu item in Joomla 1.5

If your building sites for clients you need to stress the dynamic nature of Joomla from the onset of the project. Be sure they understand that the look, for the most part will carry through the entire site with very few exceptions.

Recently, I had the opportunity to do a full site conversion. They would like the exact look of the site to be transferred over to Joomla. This includes images for menu items, and specific images on each content item. Clearly this was not the intent of Joomla, but they had their reasons.

My first roadblock to building this site was how to apply specific css to the content of a specific menu item. The idea was that they wanted background images that closely mirrored the message of the text. Again, clearly this was not the intent of Joomla, sure to the fact that once set in css you would loose some of the dynamic nature of the CMS.

After some digging, I found the easiest way for me was to assign an id to a variable then set specific css for each menu item.

<div class="mainbody"> <div id="menu<?php echo $Itemid; ?>_image"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> </div>
So in a nutshell what this does is echos the menu id in to the id of menu.

Your css would look something like the following:

#menu3_image { <enter what ever css you would like to apply to the content here> }

Popularity: 29% [?]