How to set global site background and text colors in Genesis Framework

[Doug]

I’m using the Genesis Sample theme, and am wanting to set the background and text color to light text on a dark background, across the entire site. Variations will then be made within specific blocks.

Ideally I’d like to do this with a CSS class and Customize > Additional CSS.

Looking at Inspect, it seems like there are 2 CSS classes I need to change.
Site header: site-header
Main body of site: body

I’ve tried the following code in Customize > Additional CSS..

.site-header {
	background-color: #000000;
	color: #FFFFFF;
}

body {
	background-color: #000000;
	color: #FFFFFF;
}

That worked for 3 of the 4 modifications, but didn’t make the color of the site-header text white.

So I did more research and tried this:

#header .site-title a, #header .site-description {
    color: #000000 !important;
}

That didn’t produce any change in the site header text.

I’m not that good with Inspect and am not sure why this isn’t working or what direction I should explore.

Would greatly appreciate any input or direction on this.

https://dougschumacher.com/

[Brad Dalton]

Remove #header.

---

Get Help – Book Consultation.

[Doug]

Thx Brad!

I did this, below, and the site header background is now dark and the site title is white, but the nav is still dark on the dark background.

.site-header {
	background-color: #000000;
	color: #FFFFFF;
}

.site-title a, .site-description {
    color: #FFFFFF !important;
}

I then tried adding this:

.main-navigation li.menu-item a {

color: #FFFFFF;

}

Result:
Didn't change the navigation menu text color to white.

[Brad Dalton]

I think you might have the wrong selector class. Test it in your browser first but this might help. https://wpsites.net/genesis-tutorials/changing-the-primary-navigation-colors-in-studiopress-themes/

---

Get Help – Book Consultation.

[Doug]

Thanks, Brad. That was exactly it.

Great article you linked to. Bookmarking that!

[Author]

Posts