--- title: Style Sheet Switcher date: Sat, 29 May 2004 00:00:00 +0000 categories: - blog - clockrocket layout: post --- We all know that the idea behind XHTML and CSS is to seperate content from style, and when this is done properly it allows us to change the design of an entire site simply by changing the CSS stylesheet. So why not have multiple stylesheets for your website and allow the user to change them? What follows is a step by step guide to exactly how I achieved the stylesheet switcher on ClockRocket.

Preparations

For this to work properly all elements relating to the 'design' of the page must be contained in the CSS. I won't go into any details about that here, but there are plenty of articles on the web about image replacement techniques. On such article can be found at Stopdesign; 'Using Background-Image to Replace Text'.

The Switcher Code

The first thing we will do is write some code that picks up a GET variable (which we will call 'style') and set a cookie for our dynamic stylesheet to pick up. We will put this code into an empty file and call it 'setstyle.php'.

<?php
    if ($_GET['style']) {
        setcookie("style", "$style", time() + 315360000, "/");
    }
?>

The 'style' variable will equal the name of the CSS file we want to change to, without the .css extension, eg. if your stylesheet is called 'default.css', then 'style' will equal 'default'. We need to reference this file in our index page now. Your index page must have a .php extension for this to work. Add the following line to the top of your index page.

<?php include("<$MTBlogSitePath$>setstyle.php");?>

The Stylesheet

We are going to create the master stylesheet now. This will be the file referenced by the HTML and will be written in PHP. Basically we are taking advantage of the fact that PHP can return data for any filetype. Here is the code. Put this in a new file and call it 'site-styles.php'.

<?php
    if (!$_COOKIE['style']) {
        /* here we check to see if the cookie exists
        and if it doesn't, set a default stylesheet */
        $style = "default";
    }
    /* output the correct HTTP header for the stylesheet */
    header("Content-Type: text/css");
    /* output the stylesheet itself */
    include("$style.css");
?>

This file needs to be referenced in your code in the place where you would normally reference the normal stylesheet. So change the appropriate line in your HTML to refer to 'site-styles.php'.

<link rel="stylesheet" href="styles-site.php" type="text/css" />

Allowing the user to change the Stylesheet

As of now, you should be able to change stylesheets by adding '?style=[style]' to your index URL in the browser window. But that's not very convenient or intuative for the user! So the last step is to create a way of letting the user change the stylesheet. We can do this a couple of ways. I chose to use a form with a combo box and submit button to list the stylesheets, but you can just as well use a list of links, each linking to the URL required for each stylesheet. Example code for each technique follows.

The Form Method

<form method="get" action="index.php">
    Style:<br /><select name="style">
        <option value="default"<?php if ($style == "default") { echo " selected=\"selected\""; } ?>>Default Stylesheet</option>
        <option value="another"<?php if ($style == "another") { echo " selected=\"selected\""; } ?>>Another Style</option>
        <option value="different"<?php if ($style == "different") { echo " selected=\"selected\""; } ?>>Different Style</option>
    </select> <input type="submit" class="button" value="Go" />
</form>

The Links Method

<a href="index.php?style=default">Default Stylesheet</a><br />
<a href="index.php?style=another">Another Stylesheet</a><br />
<a href="index.php?style=different">Different Stylesheet</a><br />

And that should be that! Comments are appreciated.