font and overlay colour change

[moira nordholt]

hi bill,

is there any way to get a white or lighter background and black font for the “about” pages and longer posts like the blog?

thank you!

moira

[Bill Robbins]

Good Morning Moira,

Fantastic question. It is possible to change the background color. Do you only want to change it on certain pages/posts or is this something you’d like to do everywhere. It can be done either way. Just let me know.

Thanks,
Bill

[moira nordholt]

thanks so much for getting back to me bill! just wanting to change background colour on text-heavy pages like the “about” page and the blog. so glad to know that’s possible and look forward to your help!

moira

[Bill Robbins]

Thanks for letting me know Moria. Let’s first tackle how you would approach this with a text heavy page, that isn’t the blog page. We’ll need to install and activate a plugin called Style Buddy (https://wordpress.org/plugins/style-buddy/). It lets you add CSS styling that only applies on a specific page.

Next edit the page where you’re planning on having a different background color. In the Style Buddy box, enter this:

body #sidebar,
body #content {
	background-color: rgba(0, 0, 0, 0.8);
}

That sets the background color of the sidebar and content sections of the site. You can change that color by altering the rgba(0, 0, 0, 0.8) to the color you’d like to use. That particular type of color allows for an “alpha” channel to set the opacity of the background color. There is a RGBA color picker at https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/ColorPicker_Tool if you’d like to have a tool to help out with that.

Update your page and that should change the color there for you.

---

For the blog page, the idea is similar. Unfortunately WordPress ignores content added to the blog page. So we’ll have to do this differently to make that change. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .blog #sidebar,
   .blog #content {
   	background-color: rgba(0, 0, 0, 0.8);
   }
   

3. Replace the rgba(0, 0, 0, 0.8) with the color of your choice.
4. Update your settings.

See if that does’t get you to where you’d like to go. Let me know if you have any questions or trouble.

Take care,
Bill

[Author]

Posts