DeveloperShack

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

I don't seem to run across many Joomla websites with different color menu items. I thought this would be a nice challenge 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 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.

 

  1. #menulink_1-suckerfish-horizontal, a.mainlevel-suckerfish-horizontal
  2. {
  3. background-color: transparent;
  4. background-image: url(../images/first-tab-bg.gif);
  5. background-repeat: no-repeat;
  6. background-attachment: scroll;
  7. background-x-position: left;
  8. background-y-position: top;
  9. }

 

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

  1. active_menu_class=1
  2. class_sfx=-suckerfish-horizontal
  3. expand_menu=1
  4. 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.

Comments (2)Add Comment

Write comment
You must be logged in to a comment. Please register if you do not have an account yet.

busy