content div background color change between parent pages

  • Resolved visinno

    (@visinno)


    11 years, 7 months ago

    I am trying to change the background color of the content div on a parent page and its child pages from the color of the other pages on the site. How do I do that? I thought it was a simple css code but can’t remember.

Viewing 7 replies - 1 through 7 (of 7 total)

  • If you examine the <body> tag of the parent page that you want to affect, it should have a class like page-id-n, where n is the page id for the page. Each child of that page will have, as one of the classes for its <body> tag parent-pageid-n (note that there’s no hyphen between page and id, which seems inconsistent).

    So if the parent page has an id of 5, you should be able to use this CSS rule to change the background color of the container div for the parent page and its children:

    .page-id-5 #container,
.parent-pageid-5 #container {
   background-color: #0000dd;
}

    Thread Starter visinno

    (@visinno)

    still does not work…
    Between these two lines is the inspect element code from firebug
    below the second line is the css code
    ———————–

    <body class=”page page-id-242 page-parent page-template-default header-full-width content-sidebar”>
    <div id=”wrap”>
    <div id=”header”>
    <div id=”nav”>
    <div id=”inner”>
    <div id=”content-sidebar-wrap”>
    <div id=”content” class=”hfeed”>
    <div class=”wrap”>
    <div class=”post-242 page type-page status-publish hentry”>
    </div>
    </div>
    <div id=”sidebar” class=”sidebar widget-area”>
    </div>
    </div>

    ——————-

    #content {
    background: #F5FCFB;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    width: 470px;
    }

    .page-id-242 #container,
    .parent-pageid-242 #container {
    background-color: #fff8d5;
    }

    Sorry, on my site, the main div which contains my content is called container, so I used that as an example. Change container to content in the selector for yours.

    Thread Starter visinno

    (@visinno)

    Thank you!!!

    What if you want to change the background color in a section of a page … like, making the “Festivities section” background “white” at: https://edlovesholly.com/

    I originally used a table but then it’s not responsive on the iPhone … I’m old school and have a lot to learn. Would really appreciate help:)

    @mcnewbiz, unfortunately it’s very poorly designed from a CSS standpoint; each “section” should have been enclosed in a DIV with a unique ID in order to make it easier to style. Right now there are sixteen column DIVs with one-third columns DIVs in one long list. What’s worse, though, is that the column and columns classes have top & bottom margins defined to separate them from one another, which means even if you set the background property of each one of those elements separately, the green from the body is going to show through the margins. So the first thing to do is to enclose each section in its own DIV and give each section a unique ID (like “festivities” or “engagement”). Then you can set the background color of the section.

    Thank you so much!!!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘content div background color change between parent pages’ is closed to new replies.