changing background color of menu bar subtabs?

Holly Dilatush
@holly-dilatush
8 years ago
212 posts

Hello all,

We've been trying to find this option in the style section, but so far no luck.

IS there a way to change the color of the background of the subtabs off the main menu bar links?

http://lewwwp.com and hover over "Record" to see an example.

We'd like to 'play' with the colors of the text and background color to match the color scheme of our site a bit better.

Help?
Thanks,
updated by @holly-dilatush: 02/12/17 03:03:54AM

Strumelia
@strumelia
8 years ago
3,603 posts

As someone not logged in, I don't see "record" anywhere there. Do you mean along the very top of the page, menu bar, like the drop-down menu under Blogs and Calendar ?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Holly Dilatush
@holly-dilatush
8 years ago
212 posts

Yup. All subtabs have black background.

[and I'm glad to know that apparently our Record tab is not visible to signed out members, thanks]

@michael
8 years ago
7,744 posts

The CSS that controls that black color is:

#menu ul a:hover

Its most likely in your skin at:
/skins/(YOUR-SKIN)/css/menu.css

Its not guaranteed that that will be able to be changed in the STYLE tab of the ACP. You have more control over skins when you're using the file system.

Strumelia
@strumelia
8 years ago
3,603 posts

Hi Michael,
It seems the setting for this specific item is not available in the Style tab of ACP.... no menu.css option there.

So... I looked at my menu.css file in my active skin via ftp.
There, I see the following code under where you indicate:

#menu ul a:hover {
    background-color: #111;
    background-image: -moz-linear-gradient(#111, #000);
    background-image: -webkit-linear-gradient(#111, #000);
    background-image: -o-linear-gradient(#111, #000);
    background-image: -ms-linear-gradient(#111, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#111), to(#000));
    background-image: linear-gradient(#111, #000);
    color: #0FB1DD;

I tried substituting my color #code for the top one #111, but it did not seem to do the trick.
Are you able to say which of the above css #color numbers is the one to change the black link hover to a different color? See screenshot...

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@michael
8 years ago
7,744 posts

#111 is a very dark color just lighter than black.

on your site strumelia, it looks like you need to change the #menu ul a as well.

#menu ul a:hover {
    background-color: #111;
    background-image: -moz-linear-gradient(#111, #000);
    background-image: -webkit-linear-gradient(#111, #000);
    background-image: -o-linear-gradient(#111, #000);
    background-image: -ms-linear-gradient(#111, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#111), to(#000));
    background-image: linear-gradient(#111, #000);
    color: #0FB1DD;

to

#menu ul a:hover {
    background-color: green;
    color: #0FB1DD;

I chose 'green' but you can pick whichever color you want.

and find:

#menu ul {
     background: rgba(0, 0, 0, 0) linear-gradient(#444, #111) repeat scroll 0 0

and change it to

#menu ul {
     background-color: green;

Strumelia
@strumelia
8 years ago
3,603 posts

Thank you Michael!
But to clarify things in my head, may I ask-

1) if I need to make it a specific color, say #979D9B which is a light grey, then instead of a word, like "green" or "navy", I'd put :

#menu ul a:hover {
    background-color:  #979D9B;

...correct?
And I would NOT be changing the line at all where it says:

color: #0FB1DD;

...right?

and 2) I'm seeing your post above in the second location change within the

#menu ul

area, ...do I change to my #979D9B color where it says "background:" OR where it says "background-color:" ? (since you showed me both of those) I'm GUESSING I'm supposed to change only the line in that section where it says "background-color"...and not the "background:" gradient etc line ?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 11/07/16 03:37:10AM

Strumelia
@strumelia
8 years ago
3,603 posts

I still need some clarification on the above post questions so i can proceed, please.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@douglas
8 years ago
2,793 posts

Strumelia:
Thank you Michael!
But to clarify things in my head, may I ask-

1) if I need to make it a specific color, say #979D9B which is a light grey, then instead of a word, like "green" or "navy", I'd put :

#menu ul a:hover {
    background-color:  #979D9B;

...correct?
And I would NOT be changing the line at all where it says:

color: #0FB1DD;

...right?

That is correct.

The code - color: #0FB1DD; - is the text color.

Strumelia:
and 2) I'm seeing your post above in the second location change within the #menu ul area, ...do I change to my #979D9B color where it says "background:" OR where it says "background-color:" ? (since you showed me both of those) I'm GUESSING I'm supposed to change only the line in that section where it says "background-color"...and not the "background:" gradient etc line ?

Try changing just one and if it doesn't give the desired results change both.

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 11/10/16 02:00:37PM

@michael
8 years ago
7,744 posts

Sorry, I think I looked at it, figured you'd just change it and see, so glanced over it.

"background:" and "background-color:" are similar. "background:" is the short hand version that allows many attributes.

More info if interested:
https://developer.mozilla.org/en/docs/Web/CSS/background

Strumelia
@strumelia
8 years ago
3,603 posts

Did it! Thanks ever so much Michael and Douglas!

Wasn't too sure about changing all those "background:" gradient settings in the #menu UL area, and it wasn't working if I didn't change them, so I wound up making those gradients blend from my color to ...the same color... lol. Dumb maybe, but it worked.

Love the new look, and have always wondered how i could change it since it wasn't right there in the ACP style css settings and wasn't sure what to look for. :D

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@michael
8 years ago
7,744 posts

Nice one!

You've just gone up a level in configurability. Well done.

The hover is still black. Thats controlled by

#menu ul a:hover {
    background-color:  ????????;

If you want to change it.

@douglas
8 years ago
2,793 posts

Also, if you don't want to use a gradient background, you can remove them all and just use the background-color: etc... ;

Example:

Change this:

    background: #444444;
    background: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);

to this:

    background-color: #444444;

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 11/13/16 03:36:33AM

@joanna
8 years ago
88 posts

I used your tips and changed the background color in our subtabs. However I like this gradient effect so changed only the first color.

Michael, Douglas, Strumelia - thank you

Strumelia
@strumelia
8 years ago
3,603 posts

Douglas, thank you - i've now removed the gradient stuff.

michael:
You've just gone up a level in configurability. Well done.
The hover is still black. Thats controlled by...
If you want to change it.

Thanks Michael, I've now fixed the Hover to harmonize nicely as well. (but i left the turquoise font there on hover, i kinda like it). How great is this? Wheee!

I didn't dwell on this dropdown menu detail aside from always finding it vaguely ugly and not having it accessible for changing through my ACP, ....but now that I've changed it right on my server I can see how very much nicer it looks on both my sites. The top menu hierarchy of 3 tones of my header color is elegant and pleasing.

Yeah, this was very cool...I'm like a brain surgeon now. hahaha
Thanks as well to Holly for bringing up this subject.
One thing I've learned (the hard way) is to take five minutes to back up my whole site before doing anything like this, and to make a copy of the original .css file just in case I really mess up...I could just replace the original again via ftp.

Thank you!

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

solved changing background color of menu bar subtabs?

Tags