I wrote a tutorial a while back for the Web Design & Development Group forum on how to use PHP to generate dynamic stylesheets, and since then I’ve used the technique on a couple of different projects. Outside of the forum, a couple of designers have asked how I went about setting the stylesheets up to be dynamic, so I figured I may as well post the tutorial here so everyone can see it.
Its a relatively simple task. It also assumes you have PHP installed on your web server (for the 2nd you’ll need to be using Apache)
Method 1 – replacing your CSS file with a PHP file
1. Start by renaming your .css file to be a .php file
2. Change the link in your HTML file to call the new document name. ie:
<link rel="stylesheet" type="text/css" href="style.php" />
3. Add the following line to the top of your stylesheet:
<?php header("Content-type: text/css"); ?>
By placing that header at the top, it tells the web server to serve the file to the web browser as a CSS file, regardless of what the file extension is. The downside is that you lose the traditional .css file, but thats not a huge loss really!
Method 2 – Telling your web server to parse CSS files as a PHP file
To use this method, you’ll need to be able add/edit the .htaccess file on your web server.
1. Add the following line to your .htaccess file:
AddType application/x-httpd-php .css
2. Add the following line to the top of your stylesheet:
<?php header("Content-type: text/css"); ?>
This tells the web server to run all .css files through the PHP interpreter before sending them to the browser. This allows you to code your CSS files as you would have always done, but also add <?php ?> tags.
A method I’ve used is to pass parameters to the stylesheet, as such:
<link rel="stylesheet" type="text/css" href="style.css?page=home" />
Then do a check within the stylesheet for the page before deciding on what header graphic to show:
<?php if ( $_GET['page'] == "home" ) { ?>
div.header { background-image: url('/images/home-header.gif'); }
<?php } else { ?>
div.header { background-image: url('/images/generic-header.gif'); }
<?php } ?>
And there you have it, simple as. 😀
Yo, absolutely amazing technique! I applied it to a menu I’m working on at http://www.Oogie-Art.com and it works perfectly now; thanks a lot man.
Wait, I’ve run into a problem: if the page is recognized as “about,” I want an image to move down -27px, while moving down to -54px when hovered upon; right now the hover isn’t working though.
Here’s my code:
li#nav_about a.upperlevel { background-image: url(“http://www.oogie-art.com/img/nav/about.gif”); width: 135px;
margin-right:5px;
background-position: 0 -27px;}
li#nav_about a.upperlevel:hover a.upperlevel {background-position: 0 -54px;}
…
Is it possible to make both work?
li#nav_about a.upperlevel { background-image: url(“http://www.oogie-art.com/img/nav/about.gif”); width: 135px;margin-right:5px;background-position: 0 -27px;}
li#nav_about a.upperlevel:hover a.upperlevel {background-position: 0 -54px;}
li#nav_about a.upperlevel { background-image: url(“http://www.oogie-art.com/img/nav/about.gif”); width: 135px;margin-right:5px;}
I inserted “.” to show you all the code.
Oh, I forgot to mention I also have classes on my links:
About Oogie Art
Who We Are
Why Oogie Art?
Our Results
Oogie Art News
FAQ
Art Portfolio Program
High School Program
College Program
So “upperlevel selected” class shifts the image down to -54px, while “upperlevel” class shifts the image down to -27px. You can see the menu in action at http://www.Oogie-Art.com.
With your tutorial what I’ve done is if page=about,
li#nav_about a.upperlevel { background-image: url(“http://www.oogie-art.com/img/nav/about.gif”); width: 135px;margin-right:5px;background-position: 0 -27px;}
move the about image down to -27px (selected in blue) however the hover stops working at this point, so I wanted to include in the php declaration 2 points:
1. the above
2. li#nav_about a.upperlevel:hover a.upperlevel {background-position: 0 -54px;}
code I have now:
“”
“”
li#nav_about a.upperlevel { background-image: url(“http://www.oogie-art.com/img/nav/about.gif”); width: 135px;margin-right:5px;background-position: 0 -27px;}
li#nav_about a.upperlevel:hover a.upperlevel {background-position: 0 -54px;}
”
li#nav_about a.upperlevel { background-image: url(“http://www.oogie-art.com/img/nav/about.gif”); width: 135px;margin-right:5px;}
”
what I’m also thinking about is if instead of declaring the if statement in the css file, I want to try declaring it in my nav file; for example:
”
Home
Home
Home
About Oogie Art
Who We Are
but when I do it this way, I displays 2 Home buttons and doesn’t read the if else, why?
can’t seem to make the php show in comments, but in the last example i tried declaring an if else to choose between upperlevel and upperlevel selected classes if page=whatever. but ends up showing 2 buttons and ignores the if else statemnt. do you know why? or what i can do instead
Justin
I’m a little confused. Do you fancy sending me the details by email and I’ll take a look?
I know this is an old article, but:
This is a great idea. I wonder if this could be even better (not tested yet): Would it be possible to add a .htaccess rewrite rule that redirects requests to ‘/css/stylesheet.css’ to ‘css/stylesheet.php’ ?
That way, your server will automatically parse the file as PHP (because the file has a .php extension) but the client will see it as a css file (because from their end, the requested file appears to be a normal css file with a .css extension).