Changing background color Twenty Seventeen

Hi there!

You should be able to change the background color in the Additional CSS in your Customizer.

Try giving this a try – it tweaks a couple of background colors also adjusts some of the spacing so there isn’t a gap at the top:

End result is that you get your full width header, above a white content section with a colored bar on each side:

/*Change main background color*/
.site-content-contain {
    background-color: #fff;
}

/*Remove top padding so main background color doesn't show above the content*/
div#content {
    padding-top: 0;
}

/*Set content background color, add a bit of spacing*/
#content .wrap {
    background: white;
    padding-top: 30px;
}

Give that a try and let me know if it’s what you had in mind ??

That doesn’t work unless the theme is set to light, if it is set to dark it simply does not change the color.

• This reply was modified 7 years, 10 months ago by flexinoodle.
• This reply was modified 7 years, 10 months ago by flexinoodle.

I wouldn’t recommend using the built in dark theme if you’re going with a white background. The dark theme using light gray text that will be very hard to read on the white background you’ve described needing – so you’d end up needing another, extra style (or styles) to recolor your text again.

Since your actual content will still be set against white, best to stick with the color template that plays off of that well.

That being said – if you do want to use this on the dark theme, you can change the first style to target the darker background:

.colors-dark .site-content-contain {
    background-color: #fff;
}

and replace #fff with whatever color you need it to be.

Thanks for the CSS, Chad. That’s close enough for me.

You’re welcome!

Does this apply to changing the menu color as well?

Hi @teresacuervo!

The menu color would be a different code:

.navigation-top {
    background-color: #fff;
}

Using whatever color you need (color codes can be grabbed at https://htmlcolorcodes.com/)

Thanks Chad for the help.
Much appreciated. I love the theme it just has to be adjusted to my brand.

Hi, I would like to change in the dark style, the dark gray for a real black, that is the whole theme to be completely dark, but #000, how can I do that?
Thanks!

Hi @yaneypaz75

We can take the theme’s original style for the dark background color and change it to black, like so:

body.colors-dark,
.colors-dark .site-content-contain,
.colors-dark .navigation-top,
.colors-dark .main-navigation ul {
	background: #000;
}

Add that into your customizer’s Additional CSS section and you should be in good shape.

It worked for me. Thanks!!

It seems I can see the changes in the editor but when I save the changes, clear my cache or even try a different browser I still get the default theme background..

The Background change works for me but the Header background colour change doesn’t. Any further suggestions?