A List Apart

Menu
Issue № 152

Build a PHP Switcher

by Published in CSS, The Server Side, Interaction Design · 87 Comments

For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There’s not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.

Article Continues Below

PHP is a scripting language available on many, many servers. It’s fast, it’s free, it’s open source and it handles everything on the server side, so there’s no need to worry about users who have disabled client-side scripting in their browsers. If you’re not sure if your host has PHP installed, just ask them!

STAGE ONE: Setting styles

The first step is to create a new file on your server named switcher.php and paste the following code into it. (Line wraps are marked ».  –Ed.)

<?php
setcookie ('sitestyle', $set, time()+31536000, »
 '/', 'yourdomain.com', '0');
header("Location: $HTTP_REFERER");
?>

When it’s queried, this file will write a cookie for the user detailing which site style to use. The cookie is set to expire in one year, and then the script sends the user back to the referring page. All of this happens behind the scenes, so the user will never really “see” switcher.php in action. To them, it looks simply as though their page is refreshing. Don’t forget to put your own “yourdomain.com” into the script, or your cookie won’t be valid.

Telling switcher.php which site style to use is an equally simple matter. You can query it using conventional HREF links in text, images, or even flash. All you need to do is write a link to switcher.php and append a query string defining the style sheet you want.


click here to change to RED style!

In the above case, “red” is the name of the style sheet you want to use. There’s no need to append the .css file extension here; that gets done later. The link calls up switcher.php and tells it to use “red”, leaving the switcher to do the rest. As an alternative to HREF links, you can use form elements to select and set your style sheets. Try this drop-down menu:

<form acti method="post">

<input type="submit" value="Change Style">
</form>

STAGE TWO: Detecting styles

It’s all very well and good to allow users to choose styles and have cookies written for them, but without a cookie detection script, the whole system falls on its face. So for every page of your site that you want to use user-defined style sheets, paste this next piece of code into the <head>.

<link rel="stylesheet" type="text/css" 
 media="screen" title="User 
Defined Style" href="<?php echo 
(!$sitestyle)?'defaultstyle':$sitestyle ?>.css" />

You’ll notice that this is a normal <link> element, the kind you’d use to include any standard CSS file, but there’s an important difference; where you’d normally write the name of your style sheet, we’ve used:

<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>

This tiny script detects which style is in the user’s cookies and prints out the result. If the user doesn’t have cookies enabled, or just hasn’t chosen a site style for themselves yet, the script will default to “defaultstyle.css”. Feel free to change “defaultstyle” to whatever your default CSS file is named.

So there you have it. A cross-browser, backwards-compatible, forwards-compatible, standards-compliant style sheet switcher in just five lines of code. It’s fast, straightforward, and universally accessible because there’s no processing done on the client side. For the Geckophile in you, you should also make reference to your alternate style sheets within the document <head>:

<link rel="alternate stylesheet" 
   type="text/css" media="screen" 
   title="Fire Engine Red" href="./redstyle.css" />
<link rel="alternate stylesheet" 
   type="text/css" media="screen" 
   title="Grape" href="./purple.css" />
<link rel="alternate stylesheet" 
   type="text/css" media="screen" 
   title="Scary" href="./blackout.css" />

Though not necessary, listing your alternate style sheets in this way enables users of the Gecko browsers (Netscape 6+, Mozilla 1+) to change style sheets from within the browser interface. All they need to do is go to View > Use Stylesheet and pick which one they’d like to use.

That’s it. Get out there and style!

About the Author

87 Reader Comments

Load Comments