Joe2Torials.com ‡ php - Stylesheet Switcher

Stylesheet Switcher

A simple script which enables the user to change the stylesheet on your site. the choice is stored within sessions.

In category php.

Posted by Joseph Skidmore on 11.09.05.

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.

Page generated in 0.0011 seconds.

Bookmark This Page.

Print This Article.