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