Stylesheet Switcher

Stylesheet Switcher Want to allow a user to choose any colour scheme they want for your site?

Well, if you use this little script you can. The user will be able to choose any colour scheme they want, the only limitation is how many your willing to make!

Lets say that we have 4 stylesheets:

blue.css
red.css
black.css
yellow.css

blue.css is the stylesheet of our default colour scheme.

The next part is to make sure that the colour scheme stays on all pages, we are going to do this by using sessions. Sessions are like cookies, they store information in the browser, but unlike cookies these do not plant themselves on your computer ... sessions are stored in the browser and are erased as soon as the browser is closed.

To start a session we use the code:

<?php session_start(); ?>

Make sure you place this code above all other tags (including the doctype) and make sure it is included on all your pages.

The next part of the code is our switch statement, this is how we can switch between the different stylesheets.

<?php
if(isset($_GET['css'])){
switch ($_GET['css']) {

case 'red':
$stylesheet = '<link rel="stylesheet" type="text/css" href="red.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'yellow':
$stylesheet = '<link rel="stylesheet" type="text/css" href="yellow.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'black':
$stylesheet = '<link rel="stylesheet" type="text/css" href="black.css">';
$_SESSION['switchcss']=$stylesheet;
break;

// Our default stylesheet
default:
$stylesheet = '<link rel="stylesheet" type="text/css" href="blue.css">';
$_SESSION['switchcss']=$stylesheet;
}
}
?>

As you can see we have 3 cases.

case 'red'
case 'yellow'
case 'black'

Each one contains the code;

$stylesheet = '<link rel="stylesheet" type="text/css" href="">';

But each one has a different value for the href="" (location of the stylesheet)

The last one however is called default, as you can probably guess this is the default stylesheet.

The next part of the code goes where you would normally place your actual link to your stylesheet.

<?php echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="blue.css" type="text/css" rel="stylesheet">';?>

This code echoes out the SESSION. Whichever stylesheet we have chosen in other words.

The last piece of the code goes where you want your links.

Select <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=red">[red]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=default">[blue]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=yellow">[yellow]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=black">[black]</a>

As you can see the only difference between the links are: ?css=red/blue/yellow/black"

These are the names of our cases (so if you want to add more you need to add another case and add another link but with the new case name).

So lets see the entire code shall we:

<?php session_start(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Stylesheet Switch Test</title>

<?php
if(isset($_GET['css'])){
switch ($_GET['css']) {

case 'red':
$stylesheet = '<link rel="stylesheet" type="text/css" href="red.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'yellow':
$stylesheet = '<link rel="stylesheet" type="text/css" href="yellow.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'black':
$stylesheet = '<link rel="stylesheet" type="text/css" href="black.css">';
$_SESSION['switchcss']=$stylesheet;
break;

// Our default stylesheet
default:
$stylesheet = '<link rel="stylesheet" type="text/css" href="blue.css">';
$_SESSION['switchcss']=$stylesheet;
}
}
?>

<?php echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="blue.css" type="text/css" rel="stylesheet">';?>

</head>

<body>

<div id="something">
<div id="anotherthing">
Select <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=red">[red]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=default">[blue]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=yellow">[yellow]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=black">[black]</a>
</div></div>

</body>
</html>

And there you have it, click here for a working example of the stylesheet switcher.

Stylesheet Switcher v.2 (The Cookie Generation)
His version features a few more colour schemes aswell as using cookies to store a users choice of theme. The script grabs the cookies and reads which theme the user has chosen and switches the stylesheet instantly.
Turn Off CSS
This useful bit of code enables you to have links on your page which will let the user turn off your stylesheet.
This will mean the user will see your page without any CSS formatting whatsoever.
Cascading Stylesheets Advantages: 5 Reasons To Use CSS
Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!
Cascading Stylesheets Advantages
If you think that CSS is something to be ignored then think again. This interesting article will show you all the advantages of CSS and will explain how it can help you.
Cascading Stylesheets Advantages: 5 Reasons To Use CSS
If you are not quite sold on why you should start using CSS then take a look at this interesting article. It might be all you need to convince you that it is time to try something new.
Search Engine Friendly Web Design Advice
Online marketers understand the importance of getting top search engine rankings in major search engines. Therefore, they spend many time in optimizing website content, seeking inbound links, and optimizing title and Meta Tags...
Clothing for a Website
Though it?s possible to design one web site hundreds of times, we won?t do it. We will instead clothe one site with a multitude of different looks.
How To Create Columns With Div's
When we at Ecommerce Partners started using divs rather than table for web page layout, the most daunting experience for me was how to create columns using divs. So, here is the solution for all those website developers who are struggling to use divs for web page layout.
Building Printer Friendly Pages
Your site looks like its working perfectly. Youve tested it with several different browsers under various resolutions. The HTML complies with the standards and your CSS is impeccable. Even if all of the above statements are accurate, everything still might not be the way it should...
XHTML and Stylesheets
Want to build website content that can be processed by XML-compliant tools? If you answered yes, then its time to learn the rules governing XHTML.