Background Color Clashing

[Tina Walther]

Hi Bill,

Hope you are doing well!

My client would like to have their background a whole solid color of beige, which clashes with the header, text, and footer areas. How would I go about making those areas white? I know it has to do with the .divs and what not, but not sure which ones they would be.

Thanks in advance for your help!

[Bill Robbins]

Tina,

Believe it or not, I’ve been sick for almost a month. It’s crazy, but I’ve had a cold, respiratory infection, the flue and now walking pneumonia. But it’s still good, my kids are out of school for the summer and it’s great to be around them.

You can actually change the colors of those elements from inside the theme options page or the theme customizer. Go to the Theme Options page and choose the Styling tab. You can remove the header image there and then set a color for the background color there. You can change the footer color and the main content area too if you’d like.

If you run into any questions or trouble, let me know,
Bill

[Tina Walther]

Hi Bill,

Sorry to hear that you’re sick, and thank you for helping/replying! Hopefully having the kids home from school will help you get better 🙂

I’m not seeing any options to change the colors for content and foot areas in the Styling option area. Just options for link color, hover color, button, etc.?

Thanks!

[Bill Robbins]

Tina,

So sorry, I thought this was in the Bottega forum (yikes!). But the good news is you can still change the color in those areas. Go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

.wrap {
	background-color: #fff;
	padding: 20px;
}

and save your changes. That will set the background color of the wrapper that holds the site content to white. It’ll also add in 20 pixels of padding so your content won’t sit on the edge of the white color.

I am feeling better today thanks. It looks like the antibiotics have started to work and my kids are, as always, making me laugh.

If you run into trouble, let me know,
Bill

[Tina Walther]

No worries! Glad you’re feeling better!

That code worked great! Just one more thing, any way to get some brown space above and below the wrap? If you go to: http://www.jaronandassociates.com you’ll see what I mean.

Thanks!

[Bill Robbins]

You can add in some space there too. Just add a top and bottom margin like this:

.wrap {
	background-color: #fff;
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

Feel free to adjust the padding and margins to get the look you’re going for.

Bill

[Tina Walther]

Oh okay, great! Thank you so much for your help!

-Tina

[Bill Robbins]

Anytime

[Author]

Posts