How do I change the background color behind content

  • Author
    Posts
  • #128411
    leebu
    Member

    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

    #128574
    leebu
    Member
    Original poster

    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;
    }

    #128600
    whereisdevin
    Theme Author

    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?

  • The topic ‘How do I change the background color behind content’ is closed to new replies.