• You are here:
  • Home
  • Articles
  • CSS Stylesheet Switcher using PHP (Javascript free)

CSS Stylesheet Switcher using PHP (Javascript free)

A simple solution to switch CSS stylesheets on the fly using only PHP

Updated: Wed 29th Nov 2006.

Hands up all those who have ever needed to have some kind of style sheet switcher on their site. Yep, that's what I thought, at least a couple of you! Seriously though, with the current move toward more fully accessible websites, the need for various stylesheets to be attached to your pages has become more of a neccessity than ever before. Indeed we use the following solution ourselves and you can see it in action by clicking on the 'Zoom' (then 'Zoom Out') button at the top of the page.

What is this?

Essentially what you have is an array of predefined stylesheets that are called and set to and from a cookie (this cookie stores a numerical value representing the stylesheet number that is selected). Make sure you advise visitors you use cookies in your terms and conditions to comply with the The Privacy and Electronic Communications (EC Directive) Regulations 2003. If the visitor has chosen to view the site in a style other than the one defined as default, then when they return to the site at a later date, it should be presented to them in the style that they were previously viewing in. Of course this is fine as long as your visitor has Javascript enabled in their browser so that the cookie can be set and retrieved, but what if they don't? Well the script will still work by making use of PHP SESSION variables to store the same data. This does mean that the style sheet selected will not be stored on the clients machine for future use, but hey, we can't have it all right?

The script has 3 distinct parts:

  1. Stylesheet Array and Default Selection
  2. Stylesheet Links
  3. Style Switcher

that are described below, along with installation tips for each section.

1. Stylesheet Array and Default Selection

<?
$styleSheets = array();

// DEFINE STYLESHEETS
$styleSheets[0]["text"]='Style 1 Version';
$styleSheets[0]["title"]='Click here to set Style 1';
$styleSheets[0]["sheet"]='<link href="style1.css" rel="stylesheet" type="text/css" />';

$styleSheets[1]["text"]='Style 2 Version';
$styleSheets[1]["title"]='Click here to set Style 2';
$styleSheets[1]["sheet"]='<link href="style2.css" rel="stylesheet" type="text/css" />';

// DEFAULT STYLESHEET
$defaultStyleSheet=0;

// SET STYLESHEET
if(!isset($_COOKIE["STYLE"])){
 if(isset($_SESSION["STYLE"])){
  echo $styleSheets[$_SESSION["STYLE"]]["sheet"];
 }else{
  echo $styleSheets[$defaultStyleSheet]["sheet"];
 }
}else{
 echo $styleSheets[$_COOKIE["STYLE"]]["sheet"];
}
?>

The above code can be broken down into parts as follows:

DEFINE STYLESHEETS

Here you have a two dimensional array named `styleSheets` that holds the references to the text you wish to appear in the anchor tag for the sheet , the text for the title of the anchor tag, and the code for the actual link to the sheet as it will appear on the page (these will be explained further on in this article). These are stored in 'text', 'title', and 'sheet' respectively. Obviously the array can be extended to account for as many stylesheets as you could wish to have by simply adding another 'set' and incrementing the numeric index accordingly.

DEFAULT STYLESHEET

This is just a variable to allow you to define a default style sheet for when there is no cookie to read. Set this to any numeric index from the style array.

SET STYLESHEET

This little code snippet looks to see if the visitor has chosen a different stylesheet than the default one by looking to see if a cookie (called STYLE) has been set (or by using PHP SESSION variables if Javascript is disabled). If the cookie is present then it sets the stylesheet accordingly by echoing out the value of 'sheet' (the actual link to the stylesheet) from the styleArray against the numeric value stored in the cookie to the page. If there is no cookie, then it uses the value assigned to defaultStyleSheet.

Installation

This piece of code really should be placed in an include file and named appropriately (e.g. stylearray.php) so that it can be called into any page of your site. To include this php file in any other php page use:

<?
include('path/to/file/stylearray.php');
?>

It is worth noting that the best place to include this file would be in the head of the calling php document.

2. Stylesheet Links

<?
// WRITE OUT SWITCHER LINKS
while(list($key, $val) = each($styleSheets)){
 echo "<a href='styleswitcher.php?SETSTYLE=".$key."' title='".$val["title"]."'>".$val["text"]."</a>";
}
?>

The above piece of code can be placed anywhere on your page where you wish to display the links for the different stylesheets. Quite simply, the code is a loop that runs through the `styleSheets` array and echo's out an anchor tag with the values set in that array. The links will call a page called styleswitcher.php and will pass a numeric value through to it (via SETSTYLE) that will be used to set the cookie for the selected stylesheet. Of course these don't have to be links, you could use a form element to achive the same thing.

Installation

This piece of code can either be written directly on any page that the style links are to appear on in the position in which the are to appear, or it can be be placed in an include file and called into a page in the same manor as described above.

3. Style Switcher

<?
// SET COOKIE FOR 1 YEAR
if(isset($_REQUEST["SETSTYLE"])){
 if(setcookie("testcookie",true)){
  setcookie("STYLE",$_REQUEST["SETSTYLE"],time()+31622400);
 }else{
  $_SESSION["STYLE"]=$_REQUEST["SETSTYLE"];
 }
}
// RETURN TO CALLER PAGE
header("Location: ".$_SERVER["HTTP_REFERER"]);
?>

The above code MUST be placed, on it's own, in a seperate file called 'styleswitcher.php'. This file can sit in the same directory/folder as the page calling for it.

Note: You may need to add a forward slash "/" before the closing bracket thus:

setcookie("STYLE",$_REQUEST["SETSTYLE"],time()+31622400,"/");

in order make the cookie available across the whole of the domain.

This code can be broken down again as follows:

SET COOKIE FOR 1 YEAR

Does exactly what it says on the tin! Checks to see if a value called 'SETSTYLE' has been passed to it from the caller link. If 'SETSTYLE' is there, the script will then test to see if a cookie can be set on the clients machine, if it can then a cookie is set, if not then the script will make use of a session variable. Both the cookie and the session are called 'STYLE' is are to the value of 'SETSTYLE'.

RETURN TO CALLER PAGE

Quite simply this just redirects the user back to the page that they came from, which should now be displayed in the newly shosen style sheet.

Installation

This is a separate stand alone php file that has only the code listed and nothing else, and should sit in the same directory/folder as the page calling for it.

Final Thoughts

Phew! seems like quite a bit of work for something so small, but it is actualy very simple once you have used it. Obviously the script can be changed to fit your specific needs as with any script, but as a basic it should work fine, and indeed has proven to do so. Try it out yourself and please let us know how you get on.


More articles

Comments:

This article is no longer accepting comments.

  • On the 5th Apr 2007 at 10:26 GMT, Lucy wrote:

this is awesome - so much simpler to install than the javascript controlled equivilent I had been trying to use. Thanks so much and keep up the good work!