Change background colors for each individual page

wing23 · #1 Mar 29, 2009, 11:12 AM

Does anyone have an idea how to change the background color of individual pages content?

It would need to override the themes CSS somehow??

Thanks

Flynn · #2 Mar 30, 2009, 01:35 PM

This is possible since 3.3

Add a HTML/CSS Inserts -> CSS Insert

HTML Code:

body#body-page-XX div.post {
background: #123456;
}

Or to change only the post body, without header, footer...

HTML Code:

body#body-page-XX div.post-bodycopy {
background: #123456;
}

Replace XX with the ID of the page in question

vito · #3 Aug 11, 2009, 07:24 AM

Hi,
is this still possible?

I'm using 3.4.1 and I'd like to style every page individually. --> color or background image.

Nothing changed after inserting

body#body-page-84 div.post {
background: #000000;
}

into "CSS inserts".

But:
The following works - almost - fine. It displays the image inside the post area.

div#post-84 {
background: url(/testumgebung/wp-content/themes/atahualpa/images/test/da-vinci-vitruvian-man_1280.jpg) no-repeat;
}

Any ideas?

Thank you!! Best, Vito

juggledad · #4 Aug 11, 2009, 08:40 AM

as of 3.4, body-page-XX is now page-id-XX

vito · #5 Aug 12, 2009, 04:01 AM

Then this "CSS insertion" should have effect, shouldn't it?

body#page-id-84 {
background: url(/testumgebung/wp-content/themes/atahualpa/images/test/da-vinci-vitruvian-man_1280.jpg) no-repeat;
}

Intention: individual background image on a special page.

Flynn · #6 Aug 13, 2009, 09:29 AM

Well, does it work or not?

vito · #7 Aug 13, 2009, 12:29 PM

No, it doesn't work.

Flynn · #8 Aug 15, 2009, 04:08 PM

Look into the browser rendered source code (Browser -> View Source) to see if you have <body class="page-id-84 ..."

View yourdomain.com/testumgebung/wp-content/themes/atahualpa/images/test/da-vinci-vitruvian-man_1280.jpg in the browser to see if it exists at that location