Site logo

Archived topic

Background Color of Blog Pages Content

18 replies · Started by stlayman on December 21, 2016

Viewing posts 1–15 of 19

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.

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 :-)

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.

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 :-)

https://i.imgur.com/uKEsff4.png

Can you share your live website link?

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

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;
}

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

Like this:

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

}

Great, thanks so much - have been going around and around on this :)

Glad we could help :)

Hi there,

try this CSS:

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

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

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;
}
This archived topic is closed to new replies.