Pages with different colors

yukoner · #1 Mar 16, 2012, 05:35 PM

I would like to have different colors on some of my pages.

e.g. Home page has an image but some pages are to have a black background.

How can I do that please?

Norm

juggledad · #2 Mar 16, 2012, 06:55 PM

use the FireBug extension in FireFox to see what CSS is being used to set the background. Then on the pages you want to change it use 'body.page-id-nn' to prefix the rest of the selector. nn is the id of the page.

yukoner · #3 Mar 16, 2012, 07:25 PM

Thanks Juggledad. I appreciate your time.

This is what I see with Firebug

<body class="page page-id-114 page-template-default">

I am not well versed in this at all so I'm not sure where I should put what as I don't know what to use as a selector for the background for each page and where to put this.

i.e. body.page-id-114 background: #000000;

juggledad · #4 Mar 16, 2012, 08:18 PM

You need to take a tutorial for CSS (htmldog.com has a good one)

You need to put it in the 'CSS Inserts' (ato->add HTML/CSS Inserts) in the format

HTML Code:

body.page-id-114 {background: #000000;}

yukoner · #5 Mar 16, 2012, 08:49 PM

Thanks again Juggledad.
Not only for the help, but for the suggestion of and link to a good CSS tutorial site

Norm

lmilesw · #6 Mar 18, 2012, 08:25 PM

I just happened to be looking at a plugin for that function recently. Here is a link.

yukoner · #7 Mar 18, 2012, 08:31 PM

Thanks lmilesw.

Norm

pakelly · #8 Mar 22, 2012, 08:53 AM

Hi,
Great help here, thanks! However, this changes the background behind the page and I'm trying to change the color of a page. Is there a code for this?
Thanks!
Paul

juggledad · #9 Mar 22, 2012, 09:57 AM

actually it changes the page, you want to change the container. This is doable but move involved because the containor has multiple parts - header, left sidebar, middle, right sidebar, footer - and all of them can have their color set.

You would still use the body.page-id-nnn selector but then add
body.page-id-nnn #container ...
body.page-id-nnn #header
body.page-id-nnn #left
etc etc. The best way to find them all is use FireBug in FireFox and change the colors for each area so you get them all.