CSS Stylesheet Switcher using PHP

30/11/05: This document has been superseded.

Please view the new article which describes a technique using no javscript or cookies to switch stylesheets:

CSS Stylesheet Switcher using PHP (Javascript free)

Hands up all those who have ever needed to have some kind of style sheet switcher on their site. Yep, that's what I thought, at least a couple of you! Seriously though, with the current move toward more fully accessible websites, the need for various stylesheets to be attached to your pages has become more of a neccessity than ever before. Indeed we use the following solution ourselves and you cen see it in action by clicking on the 'Zoom' button at the top of the page.

How does it work?

Essentially what you have is an array of predefined stylesheets that are called and set to and from a cookie. If the visitor has chosen to view the site in a style other than the one defined as default, then when they return to the site at a later date, it should be presented to then in the style that they were previously viewing in. All this is done in PHP with MINIMAL Javascript to make the process as painless as possible.

The script has 3 distinct parts:

1. Stylesheet Array and Default Selection
2. Stylesheet Links
3. Style Switcher

that are described below.

1. Stylesheet Array and Default Selection

<?
$styleSheets = array();

// DEFINE STYLESHEETS
$styleSheets[0]["text"]='Style 1 Version';
$styleSheets[0]["title"]='Click here to set Style 1 Version';
$styleSheets[0]["sheet"]='<link href="style1.css" rel="stylesheet" type="text/css" />';

$styleSheets[1]["text"]='Style 2 Version';
$styleSheets[1]["title"]='Click here to set Style 2 Version';
$styleSheets[1]["sheet"]='<link href="style2.css" rel="stylesheet" type="text/css" />';

// DEFAULT STYLESHEET
$defaultStyleSheet=0;

// SET STYLESHEET
if(!isset($_COOKIE["STYLE"])){
 echo $styleSheets[$defaultStyleSheet]["sheet"];
}else{
 echo $styleSheets[$_COOKIE["STYLE"]]["sheet"];
}
?>

The above code can be broken down into parts as follows:

DEFINE STYLESHEETS

Here you have a two dimensional array named `styleSheets` that holds the references to the text you wish to appear in the anchor tag for the sheet , the text for the title of the anchor tag, and the code for the actual link to the sheet as it will appear on the page (these will be explained further on in this article). These are stored in 'text', 'title', and 'sheet' respectively. Obviously the array can be extended to account for as many stylesheets as you could wish to have by simply adding another 'set' and incrementing the numeric index accordingly.

DEFAULT STYLESHEET

This is just a variable to allow you to define a default style sheet for when there is no cookie to read. Set this to any numeric index from the style array.

SET STYLESHEET

This little code snippet looks to see if the visitor has chosen a different stylesheet than the difault one by looking to see if a cookie (called STYLE) has been set. If the cookie is present then it sets the stylesheet accordingly by echoing out the value of 'sheet' (the actual link to the stylesheet) from the styleArray against the numeric value stored in the cookie to the page. If there is no cookie, then it uses the value assigned to defaultStyleSheet.

2. Stylesheet Links

<?
// WRITE OUT SWITCHER LINKS
while(list($key, $val) = each($styleSheets)){
 echo "<a href="styleswitcher.php?SETSTYLE=".$key."" title="".$val["title"]."">".$val["text"]."</a>";
}
?>

The above piece of code can be placed anywhere on your page where you wish to display the links for the different stylesheets. Quite simply, the code is a loop that runs through the `styleSheets` array and echo's out an anchor tag with the values set in that array. The links will call a page called styleswitcher.php and will pass a numeric value through to it (via SETSTYLE) that will be used to set the cookie for the selected stylesheet. Of course these don't have to be links, you could use a form element to achive the same thing.

3. Style Switcher

<?
// SET COOKIE FOR 1 YEAR
if(isset($_REQUEST["SETSTYLE"])) setcookie("STYLE",$_REQUEST["SETSTYLE"],time()+31622400);
// RETURN TO CALLER PAGE
?>
<script type="text/javaScript">
<!--
document.location.href='<?=$_SERVER["HTTP_REFERER"]?>';
//-->
</script> 

The above code MUST be placed, on it's own, in a seperate file called 'styleswitcher.php'. This file can sit in the same directory/folder as the page calling for it.

This code can be broken down again as follows:

SET COOKIE FOR 1 YEAR

Does exactly what it says on the tin! Checks to see if a value called 'SETSTYLE' has been passed to it from the caller link. If 'SETSTYLE' is there then the cookie called 'STYLE' is set to the value of 'SETSTYLE'.

RETURN TO CALLER PAGE

This is the only bit of Javascript in here. Quite simply this just redirects the user back to the page that they came from, which should now be displayed in the newly shosen style sheet.

Final Thoughts

Phew! seems like quite a bit of work for something so small, but it is actualy very simple once you have used it. Obviously the script can be changed to fit your specific needs as with any script, but as a basic it should work fine, and indeed has proven to do so. There is one bit that needs looking into further and that is the final redirect part currently in Javascript. For some reason (probably just a brain fart) I can't seem to get it working in PHP using a header redirect (seems to drop the cookie), so would be very interested if someone finds a solution.

More articles