Creating A Style Switcher

Introduction

This is something that I used here for a little while, and it's much easier to implement than you might think, although i'm sure this may not be the most reliable way of doing it, it'll work.

This script uses cookies, so that's your only real restriction, as some browsers wont accept them usually due to privacy/security settings, but most will. Firstly you'll want to create the themes/styles that you want to use, the more knowledge you have of CSS the better as your styles need to be mostly CSS based.

The Code

Lets say you have two styles 'style1.css' and 'style2.css' now we'll create the file that does the switching between the two.


if(isset($_POST['set'])) {

//set a cookie with the users choice of theme
setcookie('theme',$_POST['set'],time()+31536000,'/','.domain.com','0');

    //send the user back to the same page
    header("Location: $_SERVER['HTTP_REFERER']");
}
else {
    header("Location: $_SERVER['HTTP_REFERER']");
}

Hopefully you can see what to edit '.domain.com' (note the two dots) is obviously the most important, the rest you can leave as is, 31536000 is the time the cookie you set will last for (in seconds) this is a year, you can edit that if you like.

That's basically all the code you need, save it as theme.php and upload, next we need to include the chosen css file into our page.


<link rel="stylesheet" type="text/css" title="user theme" href="http://domain.com/<?php echo(!$theme)?'style1':$theme ?>.css">

Again you need to edit 'domain.com' and this should be the full path to stylesheets, so if they are in a folder called 'themes' you would have href="http://domain.com/themes/ etc (don't forget the trailing slash) this will include the chosen theme that's been defined from theme.php

Ideally this should be in the <head> section of your page, and obviously in all pages that you want to apply the style to. Note also that 'style1' is given as a default for when there's no style selected.

User Selection

Only one thing left to do, and that's give your users a way to change the theme, basically all you really need to do is call the following url http://yourdomain.com/theme.php?set=css_file_name (make sure you leave the .css off the end of the css file name)

The easiest way for people to select a style would be via a drop down box, something like the following:

<form name="theme" action="theme.php" method="post">
<select name="set" onChange="this.form.submit()">
    <option value="">-- select --</option>
    <option value="style1">Style1</option>
    <option value="style2">Style2</option>
</select>
<input type="submit" name="submit" value="Change" />
</form>

That's all you need, as the user selects a theme from the list it'll define the $set variable as either 'style1' or 'style2', set the cookie with the selected style and call the relevant .css file