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.

---

Tutorials for StudioPress Themes.

[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/

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad. That was exactly it.

Great article you linked to. Bookmarking that!

[zombie]

It seems like you're on the right track with your CSS code. However, the issue with the site header text color not changing to white might be because of the specificity of the CSS selector.

Try using the following code instead:

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

This selector is more specific and should target the site header text. You can also remove the "!important" declaration as it's generally not recommended to use unless necessary.zombiesapk

Also, make sure to clear your browser cache and refresh the page to see the changes take effect. If it still doesn't work, you can try using the browser's developer tools to inspect the site header element and see if there are any other CSS rules that might be overriding your styles.

[salmakhan]

Setting global site background and text colors in the Genesis Framework can be a great way to customize the look and feel of your tech site. This can help you create a cohesive brand image and improve the overall user experience. Thanks for sharing this helpful tip!

[biancarao]

Creating a tech site that stands out from the competition can be challenging, especially when it comes to design and layout. However, there are several ways you can customize the look and feel of your tech site to make it more appealing and user-friendly. Here are some tech tips to help you get started:

Choose the Right Theme: The theme you choose for your tech site will determine its overall appearance and functionality. Make sure to select a theme that is both visually appealing and easy to navigate. There are many free and paid themes available that are specifically designed for tech sites.

Optimize for Speed: Speed is critical when it comes to website design. Slow-loading sites can result in higher bounce rates and lower search engine rankings. Optimize your site for speed by minimizing the use of large images, optimizing your code, and using caching plugins.

Use High-Quality Images: Using high-quality images can make a significant difference in the overall look and feel of your tech site. Use images that are both visually appealing and relevant to the content on your site.

Implement a Responsive Design: With more people accessing the internet from mobile devices than ever before, it's essential to have a site that is optimized for mobile users. Implementing a responsive design will ensure that your site looks great and functions properly on all devices.

Customize Your Typography: The font you choose for your tech site can have a significant impact on its overall appearance. Make sure to choose a font that is easy to read and fits the overall style of your site.

Use White Space: White space, also known as negative space, is the area between elements on your website. It can help to create a clean and uncluttered look, making it easier for users to focus on your content.

Incorporate Multimedia: Adding multimedia elements like videos, infographics, and audio can make your tech site more engaging and informative. Just make sure to use these elements sparingly and in a way that enhances your content rather than detracting from it.

By implementing these tips, you can customize the look and feel of your tech site and make it stand out from the competition. Remember to keep your site fast, visually appealing, and easy to navigate, and you'll be on your way to success.

[Author]

Posts