Change background color of each page

Viewing 12 replies - 1 through 12 (of 12 total)
  • Anonymous User 7658014

    (@anonymized_7658014)

    9 years, 9 months ago

    Like for the whole page?

    body.page-id-8 {
	background: #dae0d0;
}
    Thread Starter azish1

    (@azish1)

    9 years, 9 months ago

    Thanks!

    Also this worked:
    #post-8 {background-color: #f0eaf7 !important;}

    But there is still a white border around the page. Any way to change that color?

    Anonymous User 7658014

    (@anonymized_7658014)

    9 years, 9 months ago

    Sure, assign the background color to the wrapping elements.

    body.page-id-8 .site-content,
body.page-id-8 .content-area {
	background: #f0eaf7;
}
    Thread Starter azish1

    (@azish1)

    9 years, 9 months ago

    It works! Thanks!

    Thread Starter azish1

    (@azish1)

    9 years, 9 months ago

    Is it possible to change the color for all pages to one color and a few selected pages to another color?

    I used this combo, it turns all pages to light gray but page 15 did not change to dark gray(#8b8b8b).

    Thanks!

    body.page .site-content,
    body.page .content-area {
    background: #f0eaf7!important;
    }
    body.page-id-15 .site-content,
    body.page-id-15 .content-area {
    background: #8b8b8b!important;
    }

    Anonymous User 7658014

    (@anonymized_7658014)

    9 years, 9 months ago

    Try dropping !important, it makes things complicated. For page #15 try 

    body.page.page-id-15 .site-content,
body.page.page-id-15 .content-area {
    background: #8b8b8b;
}
    Thread Starter azish1

    (@azish1)

    9 years, 9 months ago

    I tried:

    body.page.page-id-15 .site-content,
    body.page.page-id-15 .content-area {
    background: #8b8b8b;
    }

    The color for page id 15 is still #f0eaf7

    Anonymous User 7658014

    (@anonymized_7658014)

    9 years, 9 months ago

    Sorry, can’t help without a URL to the page in question.

    Thread Starter azish1

    (@azish1)

    9 years, 9 months ago

    Here is the link to page id 15.

    http://antxplore.com/gallery/

    Thanks!

    Anonymous User 7658014

    (@anonymized_7658014)

    9 years, 9 months ago

    Alright, you have this somewhere:

    body.page .site-content, body.page .content-area {
    background: #f0eaf7!important;
}

    Remove the !important, it overrides your other declaration. Then switch the 2 selectors I mentioned here to their according id attributes like this:

    body.page.page-id-15 #content,
body.page.page-id-15 #primary {
    background: #8b8b8b;
}

    Does that work for you?
    Maybe reading up a bit on CSS basics can’t hurt also? 😉

    Thread Starter azish1

    (@azish1)

    9 years, 9 months ago

    After removing !important the code to turn all pages to #f0eaf7 no longer works.

    body.page .site-content,
    body.page .content-area {
    background: #f0eaf7;
    }

    But page id 15 turns to #8b8b8b with this code.

    body.page.page-id-15 #content,
    body.page.page-id-15 #primary {
    background: #8b8b8b;
    }

    Anonymous User 7658014

    (@anonymized_7658014)

    9 years, 9 months ago

    Ok, I don’t think I’m going to solve this for you, but what we’ve done so far pretty much shows the principles you need.

    1. Use the WordPress body classes to address specific pages.
    2. As your theme seems to do so, use #id selectors rather than .classes to address containers. (#primary, #content)
    3. Avoid using !important unless absolutely necessary as it makes your cascade harder to maintain.

    Godspeed! 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Change background color of each page’ is closed to new replies.