Forums

Changing CSS according to query string (page ID)

Permalink 1 user found helpful
Hi guys,

Let me explain in short what I need. I want to change an element in my stylesheet based on the query string (or Page ID).

So for instancehttp://websitename.com/index.php?cID=3... uses; 

#header_home{
    background: url(images/header_bg.png) no-repeat;
}


Andhttp://websitename.com/index.php?cID=14... (with another cID) uses; 

#header_home{
background: url(images/another_header_bg.png) no-repeat;
}


Could I use simple if/else statements like for instance

<?php
   if ($c->getCollectionID() == "2") {


Or should I do something else. (Never done this before...)

Thank you all in advance!
GreyhorseDesign
 
Mainio replied on at Permalink Best Answer Reply
Mainio
Why you don't just use cID in the CSS selectors:
#header_1 {
  background: ...
}



And in the HTML:
<div id="header_<?php echo $c->getCollectionID() ?>">
...
</div>
glockops replied on at Permalink Reply
glockops
Mainio ya beat me! Here's some more detail.

If you turn on pretty URLs at some point, then your plan to match up to a URL variable (cID) will probably stop working.

Instead, you want to take advantage of the "cascade" of CSS.
You can add the following to your theme page type files
<body id="style-<?php echo $c->getCollectionID(); ?>">
... Rest of HTML
</body>


Then in your CSS you can reference styles for specific page collection IDs
.header { /* default styles that are used everywhere should be defined here */}
/* The following are either new styles or overrides to .header that are tied to a specific page (using it's collectionID) */
#style-1 .header { /* so CSS styles here, only applied to the page with a cID of 1 */ }
#style-200 .header { /* same thing, only applying to page with cID of 200 */}


Keep in mind if you go this route, your CSS will only work for your site, as the collection with the ID of 200, will be unique to your site (might be your "About Page" when it's my "I like cheese" page).
GreyhorseDesign replied on at Permalink Reply
GreyhorseDesign
Manio and Glockops, thank you both for taking the time to respond to my question. The solution of Manio works for me!
Glockops, thanks for the explanation on how I can use reference styles for specific page collection ID's when giving an id to the body tag. It's really helpful!