Tweaks to sidebar opacity

[Clare Thwaites]

Hi,

I found this thread :

Menu section fonts, post title rollover and nav box outline

and added this :

aside.sidebar nav a,
aside.sidebar nav a:visited,
aside.sidebar .widget,
header {
background-color: rgba(0,0,0,0.77);
}

to my custom css (great idea having the custom css by the way!)

so my site now looks like this : http://stef.electroluxart.com

I will test the colors later now I know how to change them, haha! 🙂

So I would like to know please:

1. How do I change the FONT, font SIZE, and font COLOR of the TEXT on the nav bar menu items??? I’d like to experiment with some different ones…

2. Weirdly, when I mouseover the menu items, only STAFF and Menu – Wine change color ?? ANy idea why?? As I would like to change the color they turn from the wine red color that is your default, to another color that I choose….

But it is only doing it on 2 of them so far and I need it to change color on mouseover of ALL of them?? Please can you help??

Thank you!

[Clare Thwaites]

Hi update to this sorry I was so keen as I just got this theme!

I figured out point 1 – the text using that fontible or whatever the plug in is 🙂

I DIDN’t figure out the mouseovers – the only ones NOW that change colour in my nav menu on mouseover is :

staff – igor

menus – dessert and wine list?!

I’d like them ALL to change color on mouseover so I can set it to something nicer than what I have right now… 🙂

thanks 🙂

[Bill Robbins]

Clare,

That is just bizarre. Let’s try this. Take out the colors you picked on the styling tab and paste this into the custom css box:

a, 
a:visited {
	color: #fff700 
}

a:hover {
	color: #ffbf00
}

aside.sidebar nav a, 
aside.sidebar nav a:visited, 
.current-menu-parent ul.sub-menu li a, 
aside.sidebar nav li li a, 
aside.sidebar nav li li a:visited {
		color: #fff700;
	}
	
aside.sidebar nav a:hover, 
aside.sidebar nav .current-menu-item a, 
.current-menu-parent ul.sub-menu li a:hover, 
aside.sidebar nav li li a:hover, 
.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-item ul.sub-menu li a:hover, 
ul.sub-menu li.current-menu-item a, 
nav.mobile li a:hover, 
nav.mobile li.current-menu-item a  {
	color: #ffbf00;
}

aside.sidebar nav a:hover, 
aside.sidebar nav .current-menu-item a, 
.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-item ul.sub-menu li a:hover, 
ul.sub-menu li.current-menu-item a, 
nav.mobile li a:hover, 
nav.mobile li.current-menu-item a  {
	background-color: #177329;
}

h4.widget-title, 
input#searchsubmit, 
article h1, h2.title, 
.page-content h1, 
.staff-list article h4, 
.newsletter input.button, 
h3.comments, a.comment-reply-link, 
a.button, 
a:visited.button, 
#comments input#submit, 
.button-alt, 
.product p.price, 
input.button, button.button {
	background-color: #177329;
}

Update your settings and see if that works better for you. I tried that in my CSS editor and that appeared to set it straight. Let me know if it still gives you trouble.

Bill

[Clare Thwaites]

Hi Bill,

That’s BRILLIANT thank you!

Please can you tell me what I can add in front of a line of text in the style.css so that I can add comments, so I know what bit of that whole chunk of code does each color?

I think its something like //* – you know what I mean – So I can just READ It but it’s not affecting the actual code, its just a comment so that I can quickly and easily change the exact colors I want?

Thanks SO MUCH, your support is the best! 🙂

[Bill Robbins]

Sure. Here are the styles with them commented by section:

/* Basic link */
a, 
a:visited {
	color: #fff700 
}

/* Basic Link Hover */
a:hover {
	color: #ffbf00
}

/* Default Navigation State */
aside.sidebar nav a, 
aside.sidebar nav a:visited, 
.current-menu-parent ul.sub-menu li a, 
aside.sidebar nav li li a, 
aside.sidebar nav li li a:visited {
		color: #fff700;
	}
	
/* Active or hover navigation states--text color */
aside.sidebar nav a:hover, 
aside.sidebar nav .current-menu-item a, 
.current-menu-parent ul.sub-menu li a:hover, 
aside.sidebar nav li li a:hover, 
.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-item ul.sub-menu li a:hover, 
ul.sub-menu li.current-menu-item a, 
nav.mobile li a:hover, 
nav.mobile li.current-menu-item a  {
	color: #ffbf00;
}

/* Active or hover navigation--background color */
aside.sidebar nav a:hover, 
aside.sidebar nav .current-menu-item a, 
.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-item ul.sub-menu li a:hover, 
ul.sub-menu li.current-menu-item a, 
nav.mobile li a:hover, 
nav.mobile li.current-menu-item a  {
	background-color: #177329;
}

/* Widget, page titles and buttons background color */
h4.widget-title, 
input#searchsubmit, 
article h1, h2.title, 
.page-content h1, 
.staff-list article h4, 
.newsletter input.button, 
h3.comments, a.comment-reply-link, 
a.button, 
a:visited.button, 
#comments input#submit, 
.button-alt, 
.product p.price, 
input.button, button.button {
	background-color: #177329;
}

Let me know if you need anything else,
Bill

[Clare Thwaites]

Hey Bill,

Oh bless you, I was going to figure all that out myself – I was just asking if it was

//

or /*

or //*

!!

Yet again you have over delivered!! Not to mention saved me a bunch of time, you’re a star, thank you SO MUCH!

Best wishes Clare 🙂

[Author]

Posts