This topic is: resolved
- This topic has 4 replies, 2 voices, and was last updated 1 month ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- You must be logged in to reply to this topic.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
Community Forums › Forums › General Genesis Framework Discussions › How to set global site background and text colors in Genesis Framework
Tagged: css, genesis sample, nav menu, primary menu
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/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.
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/
Thanks, Brad. That was exactly it.
Great article you linked to. Bookmarking that!
© 2023 WPEngine, Inc.