PHP Style Switcher
A while ago, I wrote a post on how to create a JavaScript Style Switcher, but recently I found the need to create a PHP based one. There are many ways to do this in PHP using sessions, arrays, cookies, etc. I created one that only takes a few lines of code and is super easy to implement.
This PHP Style Switcher can be done in two easy steps.
Step 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:
<?php /* expire in 1 year */ setcookie("sitestyle", $_GET['set'], time()+31536000); 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.
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
<a href="switcher.php?set=red">change to RED style!</a>
Step Two: Detecting styles
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style"' href="<?php echo (!$_COOKIE["sitestyle"]) ?'default':$_COOKIE["sitestyle"] ?>.css" />
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 “default.css”.
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.
Here is the code (.zip) as well for you to review.
Thank you.
This is precisely what I’ve been looking for, It’s worked a charm!
I have recently fumbled along trying to find a script as straight forward as yours.
Many thanks
Drew
I use a style switcher from Dynamic Drive. I want my header image to change when my style switches. e.g. “picture-a.jpg” in “default.css” and “picture-b.jpg” in “style-b.css”.
Thanks in advance.
I had to make a few changes to switcher.php for it work on my server.
setcookie(“sitestyle”, $_GET['set'], time()+31536000, “/”, “.domain.com”);
header(“Location: $_SERVER[HTTP_REFERER]“);
I had to make a modification to switcher.php for it work on my server.
hi, this is nice code I tried your code for some reason is not working, i was wondering if this switch css also allow to switch images too! becuase most of my css are using with images path, and trying to switch between two color of same images, does is works with your code! becuase i have tried that myself and is not working.
any idea!
AM
Hi,
Did you make any changes to the code? Nothing happens? hmmm..
How would you want to change images? Within a different style sheet? A separate style sheet (.css) could be used with a different path to the image(s) that need to be changed.
Frank
Nice code, but you don’t do any filtering on the name of the style, which means I could inject any javascript into the page, steal people’s cookies, log in as them and so on…
Would be good to filter with a regular expression to check that the name is only a word and doesn’t contain any tags or %3f and all the other nasties:
Cross Site Scripting Cheat Sheet
You’re absolutely right, I forgot to add code to prevent that type of vulnerability.
Thanks Chris!