This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

color of background out beyond “body”

Resolved 9 replies customizationpluginplugin-siteorigin-css
Clare Durst
8 years ago · Last reply by Clare Durst 8 years ago

I am developing a website and can’t seem to make the outer edge a different color. I’ve been playing with the CSS editor, which is marvelous! but while I can make the “body” background (90%) the color I want, I can’t make the outside 10% a different color. I’m sure it’s simple, I just can’t identify what element it is. Changing the wrapper color doesn’t do it. Here’s the current site: http://ehub52.webhostinghub.com/~midcoa11/?page_id=11

Any help would be gratefully accepted.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Alex S Staff 8 years, 11 months ago

    Hi Clare,

    I’m glad you’re liking it mate. :)
    Are you referring to the background of the box? If so, you can adjust that with the following CSS:

    #masthead.site-header {
  background-color: #0f0;
}

#main.site-main {
    background-color: #0f0;
}

    With that said, you don’t actually have to use CSS for this. Please navigate WP AdminAppearanceCustomize, Theme Design. Open the Page settings group and adjust the Masthead Background and the Page Background settings.

  2. Clare Durst 8 years, 11 months ago

    Actually, no, I don't mean the background of site-header or main. I want to adjust what THOSE sit on top of. Look at
    http://ehub52.webhostinghub.com/~midcoa11/ – that navy blue that surrounds the white #main and #masthead.site-header. I have the feeling it's a border, and I well may have put it in myself but I can't locate it now.

  3. Alex S Staff 8 years, 11 months ago

    Hi Clare,

    I can’t seem to seem to see any navy blue on your page. Can you please send me a screenshot of what you see? Please note that we currently don’t support attachments so you’ll need to upload the image to a third party image hosting like vgy.me or imgur.

  4. Clare Durst 8 years, 11 months ago

    I’m sending you a link to a google drive file.
    https://drive.google.com/open?id=0BxF_4YX2GmbGQ0hQVzRnREpQTE0

  5. Clare Durst 8 years, 11 months ago

    actually, it’s not quite navy blue. Dark blue.

  6. Alex S Staff 8 years, 11 months ago

    Hi Clare,

    Okay, so it’s the background of the page – just wanted to confirm, thank you.

    Please navigate toWP AdminAppearanceCustomize, Colors and adjust that background color as desired.

  7. Clare Durst 8 years, 11 months ago

    Yeah, ok, but there is no COLOR item in the menu, either just under Customize or under the Vantage theme customizations. What is the css tag? This is the first page of css: note that all the backgrounds are #ffffff, which is what I want for them; it’s what is “behind” them that is the dark blue that I want to change.

    body.layout-full {
    width: 100%;
    align-content: center;
    background-color: #ffffff;
    }

    body.sidebar-position-left.page-template-template-full-notitle #primary {
    display: none;
    }

    .so-widget-sow-image.so-widget-sow-image-default-3f547a15eaaa {
    width: 100%;
    }

    #main.site-main {
    text-align: left;
    position: relative;
    align-content: center;
    background-color: #fffffff;
    margin: 0px;
    }

    body.responsive.layout-full #page-wrapper {
    width: 90%;
    float: none;
    align-content: center;
    background-color: #fffffff;
    clear: none;
    margin: 40px;
    }

    #main {
    background-color: #ffffff;
    border-color: #ffffff;
    }

    .main-navigation ul li:hover > a {
    padding: 5px;
    position: relative;
    }

    #masthead.site-header {
    background-color: #ffffff;
    }

    #masthead .hgroup .logo {
    background-color: #ffffff;

  8. Alex S Staff 8 years, 11 months ago

    Hi Clare,

    That’s odd. It definitely should be there. Hm. Maybe try navigating to WP AdminAppearanceCustomize, Theme DesignPage adjust the Page Background settings. Then go up a menu and open Footer. Adjust the Footer Background.

    Regardless, you can do this with the following CSS:

    #colophon, body.layout-full {
    background: #293975 !important;
}
  9. Clare Durst 8 years, 10 months ago

    That css did it. THANK YOU! What’s weird is that the page background was already white (when I changed it to red, i could see.) THe back background was still blue. But this fixed it! THANK YOU SO MUCH.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread