Why three different CSS files?
It would be much better simply to use a single CSS file, and then target the CSS classes applied to the <body> tag via the body_class() template tag, to override styles as appropriate?
There is a much simpler way to do this, but it relies on your theme adding semantic classes to the BODY element.
If it does then you can target your CSS classes depending on what page they’re on.
The body classes will probably add something like pageid-21, which means that only the page with the id of 21 can be addressed. For this example, I’m just going to use the H2 element and change its colour:
This CSS will define the H2 element to be red on all other pages, blue on page id 21 and green on page id 45:
h2 { color: red; }
.pageid-21 h2 { color: blue; }
.pageid-45 h2 { color: green; }
This method means that you can keep your php simple and, above all, you don’t have to duplicate all of your CSS for each page – all you need do is add the bits that change to the bottom of your CSS file.
Hope that helps
Peter
ps: Damn, Chip – beat me by 24 seconds!
I would indeed have helped to mention why I’m doing this hehe. Here it comes: I want to have a different background fullscreen image on each page. Therefor I use this piece of code inside the body tag:
body {
background: url(‘images/background1.jpg’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-size: 100%;
font-family: “Myriad Pro”, helvetica, sans-serif, Helvetica, Arial, Verdana;
}
on page 2 it’s ‘ background2.jpg’ and so on.
Is there a way to this in the way you guys mentioned? Or am I ‘doomed’ to do it in the way i tried?
First, ensure that you add <?php body_class(); ?> inside of the HTML <body> tag.
The rest is easy. Assuming your targeted pages have IDs of “123” and “456”:
body {
background: url('images/background1.jpg') no-repeat center center fixed;
/* etc. */
}
body.page-id-123 {
background-image: url('images/background2.jpg');
}
body.page-id-456 {
background-image: url('images/background3.jpg');
}
That’s it!
That did the trick! Thanks for helping me out on this!
Is it possible to have one page-id for several pages. For example; page-id 456 has several sub-pages. Do i have to combine the code to every page or can i say something like ‘this page has page id 456 to’. Thanks in advance!!
Each page, regardless of whether it is a parent or a child, has a unique ID. To find it out what the ID is, all you need do is hover the mouse over the Edit link under the page’s title in the pages edit section of the Dashboard. The tooltip will show a link that says something like: ...wp-admin/post.php?post=63&action=edit. So, in that instance, that page’s ID would be 63.
