Menu and Link COlors

– Open your website in Google Chrome,
– Right click on the element you want to colour,
– Select ‘Inspect element’,
– A new toolbar appears. Look to the right of it. Look at the CSS,
– Find the CSS that applies the colour (scroll down if you need to),
– Copy the found style,
– Go to your Child Theme style.css file,
– Paste,
– Change colour.

Rinse & repeat for other elements.

It doesn’t seem to want to work. Is it because my base stylesheet is ng.css?

There could be many reasons why. Link the webpage with the issue.

https://mustangdaily.net/alum

So what CSS did you add to your Child Theme regarding the colour changes?

}

a:link,
a:visited{
	color: #1a2955;
	text-decoration: none;
}

}

#lb-bp-nav ul.menu > li a:hover,
#lb-bp-nav ul.menu > li a:active {
	padding: 1em;
	background: #29551a;
	color: #fff;
}

div#menu,
div.menu {
	border-color:#29551a;
	border-style: solid;
	border-width: 1px 0 1px 0;
	background-color: #29551a;
	width: 100%;
	margin: 0 auto;
	float: none;

}

#menu a:active,
#menu a:hover {
	background: #fff;
	color: #867754;
}

}

.children li.current_page_item > a:link,
.children li.current_page_item > a:visited,
#lb-bp-nav ul.menu > li.current-menu-item a:link,
#lb-bp-nav ul.menu > li.current-menu-item a:visited {
	color: #000;
}

li.current_page_item a:hover,
li.current_page_item a:active,
#lb-bp-nav ul.menu > li.current-menu-item a:active,
#lb-bp-nav ul.menu > li.current-menu-item a:hover {
	background: #fff;
	color: #867754;
}

}

#primarysb h4,
#secondarysb h4,
#footerleft h4,
#footerright h4 {
	background-color: #29551a;
	width: 97%;
	color: #fff;
	padding: 3px;
	font-weight: bold;
}

div#footer {
	background: #29551a;
}

Sorry, you need to be specific as to what style you added that is not working.

I just added it to my Child’s Theme style.css.

Under my child theme’s settings, I have ng.css selected as my Theme Stylesheet.

Is that what you meant?

I just don’t understand your issue.

Okay, so I tried again. Erased all the code on my Child’s Theme style.css, so it’s back to what is was when I downloaded it.

I used the developer tools on Google Chrome. When I inspected the sidebar menu’s gray bar (“Recent News”), I looked at the CSS (Under Matched CSS Rules) I saw this:

media="screen"               mustangdaily.net
#primary sb h4, #secondarysb h4,    ng.css:342
   background-color: #333;
   width 97%;
   color: #fff;
   padding: 3px;
}

I clicked on “ng.css:342” which opened up the CSS. Showing me this:

}

#primarysb h4,
#secondarysb h4,
#footerleft h4,
#footerright h4 {
	background-color: #333;
	width: 97%;
	color: #fff;
	padding: 3px;
}

I changed 333 to 29551a and copied just that code onto my Child’s Theme style.css.

The change did not show up after I updated the file.

So I was thinking it had to do with the ng.css.

calpoly:
First off: wow! The site looks great! Definitely one of my favorite implementations thus far.

Specificity is weird in version 1.3.x. I’m working hard to fix this in 1.4, but the crux of your issue is that you’ll need to out-specify ng.css in order to make your changes “take”.

It looks like, though, you figured it out.