Joomla Templates Club 406,261 posts

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#134486

Is there a way to change the color of every button in the main navigation individually ??

That would help me a lot.

Thanks in advance!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#275603

Can you give us your live URL, any screenshot or more details of the problem will be helpful

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#275609

The website is: http://nvandijk.com/skillsmasters/

The main navigation buttons are all grey. can they be another color?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#275610

you can edit template.css (line 847)

#ja-mainnav {
background:#333333 url(../images/grad-2.gif) repeat-x scroll center top;
padding:0;
position:relative;
width:100%;
}

1 user says Thank You to Sherlock for this useful post

1. peterva

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#275654

Thanks. I found it. Now is it possible to make every button another color? Like this:

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#275776

Hi
please add those lines to template.css


a#menu27 {

---add CSS here
}
a#menu67 {

---add CSS here
}
a#menu2 {

---add CSS here
}
a#menu78 {

---add CSS here
}
a#menu27 {

---add CSS here
}
a#menu88 {

---add CSS here
}
a#menu104 {

---add CSS here
}
a#menu11 {

---add CSS here
}

Add CSS into them for each menu

1 user says Thank You to Sherlock for this useful post

1. peterva

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#276214

Thanks for the reply.

Could you be a bit more specific?

Do i put it under “/* MAIN NAVIGATION”?

Like this?

#ja-mainnav {
padding: 0;
background: url(../images/grad-2.gif) repeat-x top #ffffff;
width: 100%;
position: relative;
}

a#menu27 {
padding: 0;
background: url(../images/grad-3.gif) repeat-x top #ffffff;
width: 100%;
position: relative;
}

Cool, This worked!

Thanks a lot! This can be marked a solved 🙂

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#276221

yes, you can add anywhere in template.css

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#278713

Hi,

I know how to change the color of the button now. How do you change the TEXT on the buttons??

thanks!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#278774

Hi
you can edit ja.cssmenu.css (line 96)

#ja-cssmenu li:hover a, #ja-cssmenu li.sfhover a, #ja-cssmenu li.havechildsfhover a, #ja-cssmenu li.havechild-activesfhover a {
background:#666666 url(../../images/mainnav-hover.gif) repeat-x scroll left top;
color:#FFFFFF;
}

Change color as you want

If you use code like as I said above :

a#menu27 {

---add CSS here
}


you can add color into it

1 user says Thank You to Sherlock for this useful post

1. peterva

[peterva Friend petervaJoin date: October 2006Posts: 41Downloads:0Uploads:0 Thanks: 6 Thanked: 9 times in 1 posts]

#278802

Thanks again!

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#278892

Can someone advise me how to change the colour of the gradient main nav button in photoshop cs? I want to change the green button to a lime colour.
Thanks

[iainmac Friend iainmacJoin date: September 2006Posts: 62Downloads:0Uploads:3 Thanks: 25 Thanked: 2 times in 1 posts]

#278953

Found the answer to my own question, it’s simple when you know how!
1. Highlight the image you want to change the colour of within the psd file.
2. Go to Image, Adjustments & Hue/Saturation
3. Move the Hue lever right or left until you get the colour you want.

Hope this helps somebody else!

[Author]

Posts