Mou

Generating dynamic stylesheets on the fly using PHP

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. 😀


7 Responses to “Generating dynamic stylesheets on the fly using PHP”

  1. 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.

  2. 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?

  3. Justin Rhee

    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.

  4. Justin Rhee

    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?

  5. Justin Rhee

    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

  6. mou

    Justin

    I’m a little confused. Do you fancy sending me the details by email and I’ll take a look?

  7. 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).

  8.  
  1.  

Leave a Reply

css.php