How do I change the background color behind content
- The topic ‘How do I change the background color behind content’ is closed to new replies.
Need help? Check out our Support site, then
I have a dark background, but the page content is inside a white box. I would like that to be the same dark color as page background.
I am working an a photography website and would like the [portfolio] to appear on a dark background.
I presume I can do that with CSS but I’m having trouble figuring out the style using Web Inspector…
Thanks, Lee
After some experimentation, I have come close with the following, however I cannot get rid of a small white blip at each corner from border rounding and it still looks like there is a box-shadow still there…
/* Change content bgcolor */
article {
background-color: #343838;
box-shadow: 0 0 0 0;
border-radius: 0 0 0 0;
border-image: none;
background-image: none;
}
nav {
background-color: #343838;
box-shadow: 0 0 0 0;
border-radius: 0 0 0 0;
border-image: none;
background-image: none;
}
/* Change header text to white */
.jetpack-portfolio .entry-header {
color: white;
}
Hi. It’s hard to know what’s happening without seeing your site. However, #content .module is the selector that defines the background for the articles, so perhaps use this instead of the definition you have for “article”.
#content .module {
border-radius: 0;
box-shadow: none;
background: #343838;
}
I set the box-shadow to none, but the default is a dark box-shadow- so it wouldn’t being causing any white blip.
If this doesn’t work, could you make your site public temporarily and I can take a quick look?