Give Blog white background with black lettering

Support
#1

Hello
I would like to make the blog background white as opposed to the rest of the site with black lettering. Can I get some css or something to make this work?

Thanks!

#2

Hello @Lifestylez,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

body.blog {color: #000;}

.blog .entry-wrap {
    background-color: #fff;
}

.blog h2 a, .blog h4 {
    color: #000;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Hey There

Thanks for that. Unfortunately it didnt work. Any other suggestions?

Best,

Nate

#4

Hi There,

Please update the previous CSS to this:

body.blog,
.blog .entry-wrap{
    background-color: #fff;
    color: #000;
}

.blog h2 a, 
.blog h4,
.blog .entry-content,
.blog .h-landmark{
    color: #000;
}


Let us know how it goes!

#5

That perfect and thank you so much! I also need each post to be white when clicked on. Is there a way to do that as well?

thanks

#6

Hi,

Regretfully I am not entirely sure what you mean by white when click on. Can you provide more clarification and screenshots. Are you referring to the links?

You can try the following css code.

.blog a:active {
     color:#fff;
}

Hope that helps

#7

So theres the main blog page right? And then when you want to read a whole blog post you click on it’s link and it takes you to aNOTHER page to read the entire post. I need the background for each post to be white as well if that makes sense.

Thanks!

#8

Hi There,

Thank you for the clarification, please update the CSS code provided by Thai above to this:

body.blog,
.blog .entry-wrap,
.single-post .entry-wrap {
    background-color: #fff;
    color: #000;
}

.blog h2 a, 
.blog h4,
.blog .entry-content,
.blog .h-landmark, 
.single-post h4,
.single-post .entry-title {
    color: #000;
}

Hope it helps,
Cheers!

#9

Hey Friech

Thank you! Unfortunately that didnt work. Any other ideas?

Best,

N

https://www.lifestylez.com/how-to-shred-on-a-budget/

#10

Hello There,

To change the background color for your site can be done in X > Theme Options > Layout and Design > Background Options. You should be able to pick a white color using the color picker. This will make the entire body white leaving the header and footer to a dark color.

And if you want to change the background color for the single blog posts, please make use of this code instead:

.single-post {
    background-color: white;
}

.single-post .entry-wrap {
    border: none;
    box-shadow: none;
}

We would loved to know if this has work for you. Thank you.

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.