Change background color for entire site

[11thwonder]

Hi, I am a noob. here is my problem:

I am trying to change the background color on my entire site. In Safari, the background shows up as a dark blue. In Chrome, the background shows up as white. I would like it all to show up as #FFF7B0. Could you please direct me to where in the Pro UI I can change the color, or where I should add CSS (and what that CSS should be?)

The website I am working on is www.wallbutterpainting.com

Attached is a picture of the dark blue margins to show you what I am experiencing on my end:

Thanks
Brian

[friech]

Hi Brian,

Thank you for writing in, it seems you already use a custom CSS to change the body background to transparent, the body background-color can be change under Theme Options > Layout and Design > Background Color

Hope it helps,
Cheers!

[11thwonder]

Hi @friech,

I have removed the CSS and set the background color under the Theme Options > Layout and Design > Background Color to the desired color. I am still getting a dark blue background on the sides of the page when I view it horizontally on a mobile device (see attached picture).

Could this be an issue because I am working on an Under Construction page? I have looked at other Pro sites and they have a custom color that appears instead ( https://wishcandle.com/about/ )

Also, I have a white bar at the top and bottom of my page that I cannot figure out how to remove. Any direction would be appreciated!

[friech]

Hi @11thwonder,

@11thwonder

Could this be an issue because I am working on an Under Construction page?

So that is a custom under construction page, yeah that could be the issue. It looks like you set that page as the frontpage and posts page as well?

Please do this, navigate to PRO > Under Construction, uncheck the Use a custom Under Construction Page option for a while.

Then scroll down a bit you’ll see a background color option there, please change that to the desired color, then check the Use a custom Under Construction Page back and save/update.

@11thwonder

Also, I have a white bar at the top and bottom of my page that I cannot figure out how to remove.

Please add this to your custom under construction page, Page > CSS area.

.blog .x-main .hentry {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

Hope it helps,
Cheers!

[11thwonder]

Hi @friech!

Both those suggestions worked perfectly! Thank you for your time and help!

[friech]

We are delighted to assist you with this.

Cheers!