[Resolved] Background Color of Blog Pages Content

[stlayman]

I have GP premium and am having trouble with changing the background color of the blog pages, archive pages, content only to a white background. My site is using a different background color that’s showing through instead. I’ve tried the CSS mentioned in other forum articles, but it’s not working.

[Roberto Enrique]

What exactly you want to change? The body background or the content background?
You should be able to do that using the included options in the customizer.
If instead you need to have different background for your blog, archives, pages, ecc independently you should use custom css.
For doing so i suggest you to use this plugin:
https://wordpress.org/plugins/simple-css/

Don hesitate to post here if you need further assistance 🙂

[stlayman]

The content only blocks for the blog templates. I already have a body background color set globally in the customizer and am using a child theme for CSS. So, the body bg color is just showing through the content. Thanks.

[Roberto Enrique]

You should be able to target blog (archives) pages using something like:

body.blog {
    background: #000;
}

Remember that wordpress adds custom classes to your body element for every page/content/archive in yuor website. You can target almost everything with that 🙂

View post on imgur.com

Can you share your live website link?

[stlayman]

Ok, it’s the blog articles actual posts content here: http://www.americansleepmedicine.org/bedroom-settings-for-quality-sleep/ I already created the main blog page how I’d like it to be.
Thanks again.

[stlayman]

I wouldn’t want to have to target each individual blog article page… trying to make it easier than that for my client.

[Tom]

If you’re wanting to apply a background color to the content of single blog posts, you could try this:

.single.separate-containers .inside-article {
    background: #FFF;
}

[stlayman]

Perfect! Except how would I add the ‘categories’ and ‘archive pages’ too?

[Tom]

Like this:

.single.separate-containers .inside-article,
.category.separate-containers .inside-article,
.archive.separate-containers .inside-article {

}

[stlayman]

Great, thanks so much – have been going around and around on this 🙂

[Tom]

Glad we could help 🙂

[Kris]

What is the CSS for having white BG on the blog page

http://staging.beaumontcare.com.au/news/

and

Individual posts
http://staging.beaumontcare.com.au/wamuran-aged-care-home-officially-opened/

[David]

Hi there,

try this CSS:

body.blog,
body.blog .container,
body.single-post,
body.single-post .container {
    background-color: #fff;
}

[Kris]

Works like a charm, David! Thanks! http://staging.beaumontcare.com.au/news/
What about putting 1 pixel grey horizontal line below the navbar? Or a bit more space between the nav menu and the posts? It looks a bit cramped. /Kris

[David]

I would suggest increasing the Top padding in your Customizer > Layout > Container.
This will push the content away from the nav.

IF you want to add a border below the nav you can add this CSS:

.site-header {
    border-bottom: 1px solid #ccc;
}

[Author]

Posts