• I would like to change the entire background (not just the immediate area) around the widgets of the front page widget area to something like this:

    https://kenmorealliance.com/

    I’ve tried:

    `
    .widgets {
    background-color: #EEEEEE;
    }
    `

    This only changes the immediate area. How can I do this for the whole area (below the slider on my frnt page).

    I am using twentytwelve theme w/ child

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    #secondary {
     background: #eee;
     overflow: hidden;
    }
    Thread Starter trinker

    (@trinker)

    Thank you very much.

    That’s very close, anyway to extend it all the way to the edge of the “page like sheet” in twenty twelve? It also appears to effect the widget areas in the side bar as well.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’ll need to modify the HTML structure.
    One of the <div> elements, I think <div id="page"> has padding which is stopping your widgets from reaching the sides.

    So you need to close off that <div id="page"> (and maybe other <div>s preceding it) before the sidebar element is opened…

    Then you’ll probably have to apply apply the same width and margin styles from <div id="page"> and onto your sidebar.

    After that, you should open up <div id="page"> again for other elements preceding the sidebar (like the footer). But there’s a problem now. That problem is you cannot, well, should not, have two elements that have the same “id” attribute on a webpage.

    So you get into all sorts of trouble.

    It sounds like a lot of effort.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘change background color front page widget area’ is closed to new replies.