Joomla Templates Club 406,261 posts

[rapid Friend rapidJoin date: November 2006Posts: 50Downloads:0Uploads:5 Thanks: 11]

#127355

Hi…
Not having much experience with CSS, can someone advise how I can make the top menu buttons have different colours. For example; after clicking “home” button = blue, “services” = green etc.

Many thanks.

[kashxo Friend kashxoJoin date: April 2007Posts: 605Downloads:0Uploads:21 Thanks: 11 Thanked: 78 times in 40 posts]

#244810

Actually, no.
The CSS does not do the trick. You have to make some code for this. you can PM me the details, URL I will check if I can help.

[kashxo Friend kashxoJoin date: April 2007Posts: 605Downloads:0Uploads:21 Thanks: 11 Thanked: 78 times in 40 posts]

#245351

For anyone who want it, this is solutions:
<blockquote>The easiest way for you to go is using this kind of CSS.
When generating menu item, Joomla! have put class for each item like: menu-item1, menu-item2,….
You can define them in the template_css.css or template.css file similar as below:
<blockquote>
/* Define this if you want color image for each item */
#ja-cssmenu a.menu-item1 {
background: #CC0000 url(../../images/red/yourimage1.gif) repeat-x scroll center top !important;
}
/*******************************************************/
/* This is for menu item when hover */
#ja-cssmenu a.menu-item1:hover,
#ja-cssmenu a.menu-item1:focus,
#ja-cssmenu a.menu-item1:active,
{
background: #CC0000 url(../../images/red/yourimage2.gif) repeat-x scroll center top !important;
}
/* This is for menu item when clicked */
#ja-cssmenu a#menu1.active {
background: #CC0000 url(../../images/red/yourimage3.gif) repeat-x scroll center top !important;
}
</blockquote>
replace yourimage1.gif,yourimage2.gif, yourimage3.gif with your actual color image. image2 and 3 can be the same.
And then continue doing that with menu-item2, menu-item3,…</blockquote>

[Author]

Posts