User talk:Arjuninfo
From Joomla! Documentation
How to make each menu item a different style in J1.5
How to make each menu item a different color or style in Joomla 1.5
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”.
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.
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.