A stylesheet switcher is kind of like skinning your site, except that the only thing that changes is the stylesheet; everything else stays exactly the same.

You must already have some knowledge of using “PHP Includes”.

Getting Ready

The first thing you need to do is to set up a new folder in your root directory called “styles”. The “styles” folder is where all of your different stylesheets should be placed.
When you add new stylesheets, name them “style1.css”, “style2.css”, “style3.css”, etc.

• root directory
  • styles/
    • style1.css
    • style2.css
    • style3.css

Once you’ve done this, you can upload the “styles” folder (containing your stylesheets and any images) and move onto the next step.

Coding

First, we’ll need to make the file that will control how many styles you have, which style is the default, allow the user to change style, etc.
This file will be called “styles.php” and will be uploaded to your root directory.

Download stylesheetswitcher.txt.

You’ll only need to edit the first chunk of coding:
$path = "/home/YOURUSERNAME/public_html/styles/";
$defaultstyle = 2;
$totalstyles = 3;

• Change YOURUSERNAME to your site’s username. Since you already use includes, you should know your site’s username.
• $defaultstyle = 2 – change the number to the number of the style you want to be the default (self explanatory, really).
• $totalstyles = 3 – change this to the number of styles you have…

You will not need to edit anything else in that file.
Reupload the file now. Please.

Open up your header.php file and add this to the top of the page (before anything else):
<?php include("/home/USERNAME/public_html/styles.php");>

Now replace the “link” to your stylesheet with this:
<link rel="stylesheet" href="/styles/style<?php print $currentstyle;?>.css" type="text/css" media="screen" />

Unless you’ve screwed up along the way (unlikely since you’re most definitely not skim reading this, are you?), everything should work perfectly.

Switching The Stylesheet

There’s a reason why “styles.php” is included into every page; the visitor can change the style with no preview page crap and they won’t lose the page they’re currently on. Woohoo!

Anyway, the link to change the style is “?switchstyle=[stylenumber]“.
Example:
<a href="?switchstyle=1">Name Of Style 1</a>
<a href="?switchstyle=2">Name Of Style 2</a>
<a href="?switchstyle=3">Name Of Style 3</a>
These links can go on any page since you’re including the file which switches the stylesheet in the file which is included into every page.