Joomla Templates Club 406,261 posts

[abalto Friend abaltoJoin date: February 2010Posts: 27Downloads:0Uploads:7 Thanks: 3]

#153452

Hello,

I have been trying to use Firebug to find out what stylesheet is dictating the color of the JA Nickel default dropdown menu items color. In template settings I have it set to
Default Style: Default
Menu Type: mainmenu
Menu Style: CSS Menu

For me the default dropdown color is Red and I want to change this to a custom blue color based on the clients’ logo color.
See live site: http://linux5.hypmedia.com/bodienagle

I have tried to find the color of red in CSS > ja_cssmenu > ja.cssmenu.css

But I can’t seem to find it.

Can you please tell me which CSS files need to be changes so that I can change the color of the dropdown menu from red to my custom blue?

Thanks!

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#352371

Open your bodienagle/templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu.css line 251

/* 2nd level and above */

#ja-cssmenu li ul {
border: 1px solid #202020;
background: url(../../images/trans-bg.png);
}
the background image is >> http://linux5.hypmedia.com/bodienagle/templates/ja_nickel/images/trans-bg.png

you wont even see it >> its 1×1 size.

Either you can replace that with your color or delete the background line and replace with


background-color : #00B0D8;
Hope it works.

Arvind

[abalto Friend abaltoJoin date: February 2010Posts: 27Downloads:0Uploads:7 Thanks: 3]

#352484

Hi Arvind,

This works. Is there a way for me to change that text to be darker on hover, it is just a bit too light… see here
http://linux5.hypmedia.com/bodienagle/

What should I look for to change that now that the blue is in place?

Should I change this block:
#ja-cssmenu li ul a {
border-right: none;
margin: 0;
padding: 5px 10px;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 92%;
white-space: nowrap;
color: #CCCCCC !important;
}

Should color: #CCCCCC be the thing to change?

Thank you kindly!

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#352490

Yes. change that code to the one sample below : try this on the same file line 141

Change this :

#ja-cssmenu li ul a {
border-right: none;
margin: 0;
padding: 5px 10px;
background: none !important;
text-transform: none;
font-weight: bold;
font-size: 100%;
white-space: nowrap;
color: #FFFFFF !important;
}

Arvind

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#352491

I changed the font-size, font-weight and color params above.

Arvind

[abalto Friend abaltoJoin date: February 2010Posts: 27Downloads:0Uploads:7 Thanks: 3]

#352947

Got it! This worked, thanks 🙂

[Author]

Posts