[SOLVED] Different Background Colors on Specific Pages

charlton · #1 Apr 7, 2010, 12:02 PM

Is it possible to set different background colors on specific pages?

I'm thinking I can probably do this via Add HTML/CSS Inserts, but what selectors should I use and how do I reference the specific pages that require this alternative colour scheme?

Looks like I need to change the body, center column, right sidebar and footer background colors of at least four pages.

lmilesw · #2 Apr 7, 2010, 01:08 PM

Check out this thread on the forum.

charlton · #3 Apr 7, 2010, 01:26 PM

Excellent. Thank You.

That takes care of the body and center column backgrounds.

body.page-id-382 {
background: #56000F;
}

Now I just need selectors for the footer and right sidebar. I tried footer.page-id-382 {background:#56000F;} but no luck. And the right sidebar is a real mystery.

lmilesw · #4 Apr 7, 2010, 02:23 PM

How about td#right for the right sidebar and td#footer for the footer? At least that's what Firebug gave me.

charlton · #5 Apr 7, 2010, 02:33 PM

Thanks Larry;

I just tried:

body.page-id-382 {
background: #56000F;
}

td#footer.page-id-382 {
background-color: #56000F;
}

td#right.page-id-382 {
background-color: #56000F;
}

but still, the footer and side bar remain unchanged. Am I using the page selector wrong I wonder?

I really appreciate your help with this. Firebug. Why didn't I think of that. I will keep working away at it.

charlton · #6 Apr 7, 2010, 02:41 PM

Yup, in Firebug, I can change those values and it works fine, so somehow I must not be using the page selector correctly.

lmilesw · #7 Apr 7, 2010, 03:09 PM

If you want them the sidebar and footer to be the same color as the background just take out the background color CSS in the ATO>Style & Configure SIDEBARS and the ATO>Style and Edit FOOTER sections or maybe !important needs to be added to the CSS such as

HTML Code:

td#footer.page-id-382 {
background-color: #56000F !important;
}

charlton · #8 Apr 7, 2010, 03:24 PM

That was it!

Figures, I was using too much code.

I was setting the background colour for both the footer and the sidebar in the ATO settings when I didn't have to. The whole thing can easily be set using the body background alone leaving the footer and sidebar transparent.

The page specific changes to the body background colour now deal with all of these elements.

Perfect. Thank you so much for your help.

John