Joomla 1.5 Tutorial : How to make each menu item a different

[kdmonk1]

Joomla 1.5 Tutorial : How to make each menu item a different color or style

Step 1: Make sure your top menu or whatever menu that you are using is in “list” mode

In your Joomla administration panel, go to Extensions > Module Manager.
In the Module Manager, find the module associated with your top or named menu. Often times, this module is called “Top Menu” or whatever you created.
Click on the name of the module to enter the module editing screen. In this case, my top menu module is named “Top Menu”, so I’ll go ahead and click on that.
In the editing screen, look under the Module Parameters menu, and check the setting under “Menu Style”. The setting should be set at “List”. If it’s not – for example, if it’s set on any of the Legacy formats – you should change it to “List”.


TECHY WHYS AND WHEREFORES: Under Legacy mode, Joomla’s index.php file does not assign each menu item its own class. In List mode, the index.php file assigns each menu item its own CSS class, allowing you to simply add these classes to the CSS document and edit them, which we’ll cover how to do in this tutorial. Leaving your menu in Legacy mode means you’ve got to jump through a whole lot of hoops to get the same effect – something we’re trying to avoid here.
Save any changes you made and exit the editing screen.

Step 2: Note down all of your item ID numbers for the top menu
In your Joomla administration panel, go to Menus > Top Menu
You should now be looking at a list of all of the menu items in that menu. You don’t have to make any changes here, but you do have to note down all of the itemID numbers for every item in this menu. The menu item IDs for each item are located in the very right-hand column of the screen.

Just note down all the numbers listed here, in the same order that they appear on your site. In this case, I would simply note down, “28, 29, 18, 30, 65”. This is for your own reference only.

TECHY WHYS AND WHEREFORES: In “List” mode, the CSS classes that Joomla’s index.php file assigns to each menu item is based on the item ID number. Each item ID number is, very literally, the CSS class. So, for example, if one of your menu items has the ID “28”, then the code generated in the HTML is <a class=”item28”></a>. That’s why it’s important that you note the ID numbers down correctly, and in the same order that they are displayed on the site.

Step 3: Using Firebug, figure out which part of the CSS you need to edit

Sometimes, developers stick to the kinda-not-really-so-standard practice of naming their top menu div #pillmenu or some variation thereof, but definitely not always. So we need to first figure out which part of our CSS we’ll be editing.
If you already know the names of the CSS divisions and classes associated with the top menu, or you know how to find out some other way, you can skip this step. This is for those who’ve never done this before.
In a new window, open up your site in Firefox, and start Firebug (Tools > Firebug > Open Firebug).
In the Firebug window, click the “Inspect” button. You can now mouseover areas of your site, and the code / division names associated with those areas will be highlighted in the Firebug window, like so:
When I put my mouse over the division surrounding my menu, in the Firebug window below, I can see that in my case, this division is called “pillmenu”. Sweet! Now I know which part of my CSS I’ll need to edit. Note down whatever the division name is in your template.

Step 4: Edit the CSS

NOTE: Every single CSS template is different. Your code won’t look exactly like mine, and that’s why this tutorial requires at least a bit of CSS knowledge to get through. You need to be skilled enough to find the right part of the CSS code to work with. If you can do that, you can do this.

Go to Extensions > Template Manager
Click on the name of the template you are currently using, or that you wish to modify.
In the top right-hand navigation bar, click on “Edit CSS”.
Choose the name of the CSS template you want to edit, and click “Edit”.
In the CSS editing screen, do a search for the name of the division that you saw in Firebug. In my case, I’ll do a search for “pillmenu”. Ah hah, here it is in the code, the part that defines the background color for my menus:

#pillmenu li a {
font-family: Verdana, Tahoma, sans-serif;
font-size: 12px;
float: left;
display: block;
line-height: 116px;
padding: 0 25px;
margin: 0 1px;
color: #fff;
text-decoration: none;
font-weight: bold;
background: none;
height: 117px;
background: url('/../images/pillmenu_bg.png') center center repeat-x;
}

#pillmenu li a:hover {
color: #fff;
text-decoration: none;
background: url('/../images/pillmenu_bg_hover.png') center center repeat-x;
}
I can see here that my CSS calls two different images – I get one background image (pillmenu_bg.png) when the menu is sitting there all by its pretty little self, and the background image changes (to pillmenu_bg_hover.png) when it’s getting some mouse love.


I’m going to go head and COPY this entire block of code, and paste it in to the CSS file again – you want TWO copies of this block of code (or the corresponding code in your own CSS document). Leave the first copy alone for now.


Here’s the fun part: in your second copy of the block, add the item id of the second top menu item to the code, like this:

#pillmenu li.item29 a {
font-family: Verdana, Tahoma, sans-serif;
font-size: 12px;
float: left;
display: block;
line-height: 116px;
padding: 0 25px;
margin: 0 1px;
color: #fff;
text-decoration: none;
font-weight: bold;
background: none;
height: 117px;
background: url('/../images/pillmenu_bg2.png') center center repeat-x;
}

#pillmenu li.item29 a:hover {
color: #fff;
text-decoration: none;
background: url('/../images/pillmenu_bg_hover2.png') center center repeat-x;
}


Then you can go ahead and modify the background image to suit your needs.



In this instance, I designed a different background image for the item 29 class, uploaded it to my template/images file through FTP, and now the second menu item shows my second image. But you could just as easily not put an image in there, and just change the background color instead (in fact, your template may already be written this way).



Save the CSS file. Check your work!



Repeat step 4 for each menu item in your top menu, making sure to reference the right item ID. For example, if you have five links in your menu, you need to repeat this 5 times, and modify 5 blocks of code.



You’re done! Enjoy!

[tobiasn]

This is all right and well, but remember that you don't need to declare everything twice. You "second block" only need to include what's different from the standard, in this case this would do:

Code: Select all

#pillmenu li.item29 a {
background: url('/../images/pillmenu_bg2.png') center center repeat-x;
}

#pillmenu li.item29 a:hover {
background: url('/../images/pillmenu_bg_hover2.png') center center repeat-x;
}

[padzhp]

cool.. thanks for the tutorial..

[webuserdan]

Hi it looks like you are using images for your menu items here. I am doing the same thing however I don't want the text to be displayed at all so I've done a similar thing to you above however this puts the menu item text on the item. The only way I can see to get rid of the text on the menu item is to choose an image for the menu in the menu manager however when you do this the mouse-over won't work since it uses background images so what I have done is include another style up the top that says:

ul.menuentourage img
{
display:none;

}

where entourage is the menu class suffix - this hides the main menu image so you can use your background images.

I also needed

ul.menuentourage li:hover
{
cursor:pointer;
}

to show the pointer when you moused over it. and

ul.menuentourage
{
list-style:none;
padding:0px;
margin:0px;

}

to get rid of the bullet points

I noticed it doesnt work in IE 6

I'd be very surprised if there isn't a better way to do this but this is the only way I could figure it out.

[awebdesigner]

forget the above, the display none removed the link as well so the meny doens't work. Surely there is an easy way to do a mouseover menu in Joomla?

[designsedge]

Awesome! Spent an hour researching and accomplished my goal with this....

Code: Select all

ul.menu-suckerfish li.item6 {
	background: #73b5ca;	
}

[kdmonk1]

Awesome! Spent an hour researching and accomplished my goal with this....

Code: Select all

ul.menu-suckerfish li.item6 {
	background: #73b5ca;	
}

Great! I am glad that you were able to accomplish what you needed

[emal011]

And what happend when i find:

td.pill_m {
background: url(../images/mw_menu_normal_bg2.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}

using milky way temaplte...

[emal011]

ok, lo logré, pero no me funciona el:

#pillmenu a#active_menu-nav {
background: url(../images/white/mw_menu_active_bg.png) 0 0 repeat-x;
color: #fff;
}

que se supone que si el menu esta activo este toma la apariencia del grafico!

[kdmonk1]

And what happend when i find:

td.pill_m {
background: url(../images/mw_menu_normal_bg2.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}

using milky way temaplte...

Not for sure what you are asking for , but I would presume that you would make changes to your .css file such as the colors and styles that you desire. Clarify in detail if you have additional questions.

[Piccoro]

I'm using JA Sulfur, and I'm trying, with no success, to make each Top menu item different but it doesn't work.

Example, when I add (either in tempate.css or ja.cssmenu.css):

Code: Select all

#ja-cssmenu li a {
	background: url(../../images/myimage.gif) no-repeat left top;
	
	}

ALL the menu items appear with the same image.

But when I add .item3:

Code: Select all

#ja-cssmenu li.item3 a {
	background: url(../../images/myimage.gif) no-repeat left top;
	
	}

the images disappear from the menu!
What am I doing wrong? The Joomlart templates don't recognize .itemX to be menu items?
Can somebody help me?

This is my website url: http://188.40.90.147/~notemaqu/

[clickwebdesign]

Hi, well written tut:)

I wonder if you can help me take this further.

I am using a artisteer generated template and would like to style the "r" span below

<li class="active item152" id="current"><a class="active" href="/blahblah"><span class="l"> </span><span class="r"> </span><span class="t">Website Packages</span></a></li>

this is generated from the default.php file. I'm not sure how to append the itemid to the class with php?

an extract from the default file:

// add extra spans for top level items, required for design
if ($element->level() == ($options['start'] + 1) * 2) {
$lspan = & $element->addChild('span', array('class' => 'l'));
$lspan->setData(' ');
$rspan = & $element->addChild('span', array('class' => 'r'));
$rspan->setData(' ');
$tspan = & $element->addChild('span', array('class' => 't'));
$container = & $tspan;
} else {
$container = & $element;
}

Cheers
Chris