WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] content div background color change between parent pages (8 posts)

  1. visinno
    Member
    Posted 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.

  2. CrouchingBruin
    Member
    Posted 7 months ago #

    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;
    }
  3. visinno
    Member
    Posted 7 months ago #

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

  4. CrouchingBruin
    Member
    Posted 7 months ago #

    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.

  5. visinno
    Member
    Posted 7 months ago #

    Thank you!!!

  6. MCnewBiz
    Member
    Posted 4 months ago #

    What if you want to change the background color in a section of a page ... like, making the "Festivities section" background "white" at: http://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:)

  7. CrouchingBruin
    Member
    Posted 4 months ago #

    @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.

  8. MCnewBiz
    Member
    Posted 4 months ago #

    Thank you so much!!!!

Reply

You must log in to post.

About this Topic