The Joomla! Forum ™

Is there a way to style a menu so that a button / link can be a certain colour?

E.g. For the top menu can I have Button 1 with a style of background-color: red, then button 2 with a style of background-color: blue ?

Mod Note:
Topic moved from Joomla! 1.5 development to Joomla! 1.5 - Templates & CSS

_________________
Robert Dam - Joomla Forum Moderator
Dutch Boards | Joomla Coding Boards | English Support Boards

All menu link items are assigned an "id" number when created. You can find this in the far right column of the menu item lising. This is the key to individual styling.

What is needed is to create a CSS for "EACH" menu link item by taking the parameters for the main menu and copying it "x number" of times, then taking the "li" within the CSS and renaming it "li#" corresponding to the menu link item id number.

After that, code each one up the way you want.

Of course, if you want ALL items to have the same color, hover, etc. You don't need to do that. But, to make each one separate you need to relate a CSS to a "li#" of the item.

Also... if you want to use a graphic that includes text in the image, you need to get rid of the text generate by Joomla! for the button name. How?

Easy. For the item add "margin-left: -300px;" which shoves the generated text left out off the page and allows the graphic only to appear. You can't NOT use a menu link item name, as you know, so you have to "hide" it away off the screen. The -300 value should be enough but you can keep increasing it as needed.

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.

it seems like everyone is really interested in doing this - including me.

I've seen a lot of answers like this. My question is this: how did THIS site do it? go ahead, view source for any *.joomla.org. all the menu items across the top have single class names. Clearly, them list items don't NEED to have class="item38" or whatever database ID they were assigned, and clearly they can be added without forcing an ID="" in the rendered HTML.

is there anybody, anywhere, that can tell us poor schmoes how this site (joomla.org) was built????

how do you change your body background color? how do you apply class names to your list items?

Moderators? Developers? Core Team? Honor Role? Working Groups?

_________________
If you disagree with everybody else, you're probably wrong.

The whole key to individually styled menu items is the menu item id#, which is found to the far right when you have the menu open. Its actually a fairly easy process but repetative for each menu link item.

Accordingly, this translates to using the "li" as the identifier by making it "li#" in the CSS.

So, take the instances of the menu CSS that contains the "_menu ul li" and copy all of them. Or, take the whole group of CSS that controls your menu using whatever declarations are part of the default, and copy them to make a new CSS array for the menu.

Then go in and add the # to each instance of "li" in the copied CSS - make the font/color, etc changes you want.

You need to do this for "each" menu link item as each has a different id#.

You do not have to create a class call in the html...each "li" is intelligent and picks up its id# while rendering the page. The CSS simply needs to have the # in the code string to identify the "id#" for the menu item.

Nowthen, if you want to use a graphic with embeded words/images as the background, you need to shove the generated menu link item name off the page: add to the CSS = "margin: -300px" (yes, a minus sign!). This pushes the text out of vision and the background image is all your see (you can do a:link, a:active, a:visted).

I'm travelling to Washington, DC today for a client meeting and if you have more questions, I will respond to them on Saturday morning (USA, Eastern Time Zone).

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.

The whole key to individually styled menu items is the menu item id#, which is found to the far right when you have the menu open. Its actually a fairly easy process but repetative for each menu link item.

Accordingly, this translates to using the "li" as the identifier by making it "li#" in the CSS.

So, take the instances of the menu CSS that contains the "_menu ul li" and copy all of them. Or, take the whole group of CSS that controls your menu using whatever declarations are part of the default, and copy them to make a new CSS array for the menu.

Then go in and add the # to each instance of "li" in the copied CSS - make the font/color, etc changes you want.

You need to do this for "each" menu link item as each has a different id#.

You do not have to create a class call in the html...each "li" is intelligent and picks up its id# while rendering the page. The CSS simply needs to have the # in the code string to identify the "id#" for the menu item.

Nowthen, if you want to use a graphic with embeded words/images as the background, you need to shove the generated menu link item name off the page: add to the CSS = "margin: -300px" (yes, a minus sign!). This pushes the text out of vision and the background image is all your see (you can do a:link, a:active, a:visted).

I'm travelling to Washington, DC today for a client meeting and if you have more questions, I will respond to them on Saturday morning (USA, Eastern Time Zone).

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.

The whole key to individually styled menu items is the menu item id#, which is found to the far right when you have the menu open. Its actually a fairly easy process but repetative for each menu link item.

Accordingly, this translates to using the "li" as the identifier by making it "li#" in the CSS.

So, take the instances of the menu CSS that contains the "_menu ul li" and copy all of them. Or, take the whole group of CSS that controls your menu using whatever declarations are part of the default, and copy them to make a new CSS array for the menu.

Then go in and add the # to each instance of "li" in the copied CSS - make the font/color, etc changes you want.

You need to do this for "each" menu link item as each has a different id#.

You do not have to create a class call in the html...each "li" is intelligent and picks up its id# while rendering the page. The CSS simply needs to have the # in the code string to identify the "id#" for the menu item.

Nowthen, if you want to use a graphic with embeded words/images as the background, you need to shove the generated menu link item name off the page: add to the CSS = "margin: -300px" (yes, a minus sign!). This pushes the text out of vision and the background image is all your see (you can do a:link, a:active, a:visted).

I'm travelling to Washington, DC today for a client meeting and if you have more questions, I will respond to them on Saturday morning (USA, Eastern Time Zone).

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.

I must admit to having a slow morning on this one, as at the moment I cannot get it to work.

Here is my HTML code for the menu...



and at the moment I cannot pin point the CSS needed to identify the specific <li> tag I need.

I was thinking that the CSS would have to be something like....


However, not sure that will work. Any further help would be fantastic as I'm recovering from my stag do at the weekend

The html is:

<li class="item#">

The CSS is:

ul.menu li.item# a {
font-family: ;
font-size: ;
font-weight: ;
color: ;
text-decoration:;
display:block;
}

Can also create: a:active, a:visited, etc.

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.

Many thanks!

I managed to get it working, but I just had to tweak the menu genertion code as it wasn't putting the Itemid into the HTML.

Thank you once again for your help.

Sorry if this is a really dumb question but where does the html code go?

I've been messing with the CSS doing exactly what you described above (and trying every variation possible) and nothing changes. It's got to be because I need to stick that html code in one of the html files but which one?

I'm using the beez template if that matters but tell me for any template where the html is that corresponds to menus and I can probably figure out where it is in beez.

This is how I did the css code to get the different menu items to turn different colors on mouse over.
Where 68 is the menu item number.

It didn't work. What's wrong with it?

#left ul li.68 a:hover,#left ul li.68 a:active,#left ul li.68 a:focus {
background:#0650F7 !important;
color:#fff !important;
}

I'VE GOT IT!!!

I can't believe it! I finally figured this out. It DOES work! I didn't realize that the word "item" must actually be IN the css. Literally. "item68" "item97" etc. NOT just the number!

#left ul li.item68.active a:link,#left ul li.item68.active a:visited {
background:#0650F7;
border-left:solid 4px #063BB2;
color:#fff;
border-bottom:solid 1px #063BB2;
padding:3px 0 3px 6px;
}

I'm sorry for doubting you helpful person above. I should be more careful. I hope my post helps provide further clarification for newbies like myself!

This is all good to know... did you edit this in the file called "template.css"? Or a different one?

no, the layout.css file. or whichever one contains stuff that looks like it controls the menus. In the Beez template, most stuff is in layout.css. Don't know about other templates.

OK, thanks!

very clever solition but i have one question. in the first line "#left ul li.item68.active a:link,#left ul li.item68.active a:visited {", you have written "#left". but i think it is up to the template you are using. and how can i find what i should type there for my template? i m using "siteground" template for joomla 1.5.4. thanks for helps :0)

yes that's true, it does depend on the template and I'm using Beez. I'm not sure how you find which one exactly other than trial and error and then I imagine as one gets more familiar with CSS you can sorta figure things out. Make a back-up then just play around with it.

the only place containing "ul li" is that in my template.css

div.module_menu ul li a:link, div.module_menu ul li a:visited {
line-height: 28px;
font-weight: bold;
font-family: Tahoma, Helvetica, Arial, sans-serif;
text-decoration:underline;

i've tried everything but couldn't do it.

Does the id number work in styling individual links when Search Engine Friendly URLs and Apache mod_rewrite are activated?

I've been trying to get this working with the above suggestions but getting nowhere

This is the css for the menu I want to style with different coloured links:

#header #active_menu-nav
{background:#000;color:#fff;}

#header ul
{background:#fff;display:block;margin:-7px 0 -2px 0;padding: 5px 0;text-align:right;}

#header ul li
{background:#000;color:#fff;display:inline;text-align:center;margin-right: 5px;}

#header ul li a:link,#header ul li a:visited
{background:#fff;color:#000;font-weight:bold;text-decoration:none;border: solid 1px #999;padding:2px 5px;line-height:1.2em;}

#header ul li a:hover,#header ul li a:active,#header ul li a:focus
{background:#666;color:#fff;font-weight:bold;}

Any help with the syntax appreciated.

#header ul li.item2 a:link{etc;etc;etc;} does not work, and neither do about a million other permutations....

Cheers

Cal

All people trying to make css changes to their templates need to download the firebug tool for firefox. It is available at: http://getfirebug.com/. This tool has saved me countless hours of needless coding. It helps pinpoint exactly what id's and classes you should be using in your css.

I usually open up the webpage in question, click the firebug icon (the little bug icon in the bottom right of the firefox browser) and click inspect. Then I hover over the part of the webpage I want to change, click there, and both the html and css are displayed across the bottom of the browser. You can then make changes in the css listed at the bottom to see what it would look like. The changes take effect immediately.

Don't worry about screwing things up because none of those changes will actually take place in your css file. They are only shown while firebug is open (if you refresh the browser all the changes will reset). I usually mess around in firebug until I get it right, then I copy the css from firebug and paste it into the css file through the joomla admin after I have the changes nailed down.

Firebug is amazing. I just wish there was one for Internet Explorer.

I finally found the solution for me and i think it is the only solution for "siteground" template.

1. Open your site and view the source.
2. Find your menu links code and you can see there the class of your links. (li class="item57", li class="item73" etc....)
3. Open the template.css
4. For example, if you want to add the black color as background of item73 link, add this line to the bottom of the file.

li.item73 {
background-color: #000000;
}

5. Save the css file and refresh your site.

If you using mainlevel class, the codes in your source will be changed. I am using list class for my menu module.

My problem was that the menu wasn't generating a class for each list item. For anyone having the same issue, it might help to know that the class html is only generated when the "List" menu style is set in the module parameters for your menu. Any of the "Legacy" styles don't seem to do it.

There is, It's called the Internet Explorer Developer Toolbar, and you'll find more on that here;
http://www.microsoft.com/downloads/deta ... laylang=en

Does anyone know how to style individual menu items with a vertical dropdown menu? That is, without buying SwMenuPro...

edit: I got it -- Extended Menu is the answer: http://extensions.joomla.org/component/ ... tstart,15/

Expert XHTML & CSS & CMS, but New to Joomla.

First, I have fundamental issues with assigning unique tags (based on item ID) to a class attribute... that's what the ID attribute is for. Classes are for general / re-usable selectors.

The CSS for this block is irrelevant, once I can get the structure down I can do pretty much anything I want with the display code...

I'm trying to execute this seemingly simple code snippet:


I can get the UL ID and CLASS set correctly via Module (Top Menu) Advance Parameters. So I'm getting this currently:


I've been looking all day with out any luck to get the LI and A classes set. I'd also like to remove the span tags. It would seem to be a template override, but none of the examples I've found show how to do this for a mod_mainmenu.

Personally, I've found Joomla extremely unfriendly and (good) information hard to find, but maybe I'm just too new at it... I've just never had issues like this with other CMS. I'd like to get to Joomla ninja status before I have to kill myself.

Any help or direction would be greatly appreciated.

viewtopic.php?f=466&t=322492&p=1409190

This got me down the road a bit and to the point where I could add the classes to the LI & A tags. I'm still trying to get rid of the unneeded SPANS and add a first and last class to the appropriate LI.

i have a top menu that looks like this (see attached). im using extended menu. i want to add images on the left side. is it possible? the menu class suffix is xtd_menu and im using the template menu.

pls help!...tnx

I enabled the Menu Template of Extended Menu i should say

Hi,
Is there also a way of using these class="item#" variables other then the menu? I like to have a header-div with a background which changes when the menu changes. Like:



where "item#" is the menu-itemnumber. When I look at the source code of a page I see a menu-item is like:



I would like to have the value "item54" stored in a variable so I can use this.
Is this possible?

Thanx,
Robin