Stylesheet Switcher
A stylesheet switcher is a method of skinning your site, except that you must use the same HTML in all of your layouts and the only part of the site which changes is the stylesheet.
You must already have some knowledge of using "PHP Includes".
(Skinning is basically the same as using includes, you just have a few extra lines of code, is all.)
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
- styles/
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.
<?php
//variables for the style
$path = "/home/YOURUSERNAME/public_html/styles/";
$defaultstyle = 2;
$totalstyles = 3;
//don't edit below this
if(isset($_COOKIE['switchstyle']) && (is_numeric($_COOKIE['switchstyle']))) {
$currentstyle = strip_tags(stripslashes(trim($_COOKIE['switchstyle'])));
}else{
$currentstyle = $defaultstyle;
}
//set the style
$this_page = trim(strip_tags($_SERVER['PHP_SELF']));
if(isset($_GET['switchstyle']) && (is_numeric($_GET['switchstyle'])) && ($_GET['switchstyle'] < ($totalstyles + 1))) {
setcookie('switchstyle',($_GET['switchstyle']),time()+(86400*365),'/');
header("Location: {$this_page}");
}
?>
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. :P
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>
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.
<a href="?switchstyle=2">Name Of Style 2</a>
<a href="?switchstyle=3">Name Of Style 3</a>
