How to change the color of a specific menu item in Joomla

Very important news to the viewers of this site. As of next week this site will no longer be available. I will be taking content from a few sites and putting it all into The Template Blog. I would suggest going over and checking it out. Make sure you subscribe to the e-mail updates as there will be quite a few in the coming weeks \ months.

Home

Templates

All Templates

I don't seem to run across many Joomla websites with different color menu items. I thought this would be a nice chalenge to figure out how to do it. As it turn out it was actually pretty simple with the extended menu module.

Once you get the module downloaded and installed you need to add some css to to your menus. I will assume that you already have the menus setup and working. Now to add a little css to diferentiate between the different menu items.

#menulink_1-suckerfish-horizontal, a.mainlevel-suckerfish-horizontal
{
background-color: transparent;
background-image: url(../images/first-tab-bg.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}

Also you are going to need to make a change to your menu.ini to add the element_id. It should look something like

active_menu_class=1
class_sfx=-suckerfish-horizontal
expand_menu=1
element_id=1

I don't currently have an example of the different menu colors, but I do have an example of a different menu shape at rcnovice. If you notice the home menu item has a small curve on the leading edge.

Trackback(0)

TrackBack URI for this entry

Comments (0) Add Comment

Subscribe to this comment's feed

Show/Hide comments

Write comment

Show/Hide comment form

Distribution Tips