CSS Switch with PHP
A quick sample page to demo the PHP style sheet switcher.
There are a lot of different approaches to a CSS switch, some using only Javascript, others Javascript and PHP - all using cookies.
In order to take the switch process away from the client machine and onto the server - the PHP only option will be best. This will also ensure that the CSS switch works even without Javascript (however, cookies will still need to be enabled. In case cookies are disabled - the CSS switch will not work and simply leave the site visitor on the same page without the CSS changed).
style sheet switcher
please use the links below to change the base & text colour of this site.
the setup
For this PHP switch you will need 2 separate PHP files with the functions to set the switch link details, check and/or set cookies. Any page using the switch will then contain a link to each of the functions.
style definitions
In order to switch styles you will first need to create a php file which will define each style. There are 3 elements per style:
- the link text which will appear on the page in the browser
- the title of the link, prompting users to select a preferred style
- the link to the actual CSS file for the style
(use absolute paths to ensure CSS switch functionality throughout the entire site)
With all style sheets defines and assigned their details - the default CSS will be set by its numeric index in order to deliver a default CSS in case there is no cookie found.
This is then followed by setting the cookie to the correct CSS.
Save this file as "styledefinitions.php" into whichever directory you like (for example a 'script' folder you might already have in your root folder).
styledefinitions.php
<?php
$styleSheets = array();
// DEFINE STYLESHEETS
$styleSheets[0]["text"]='dark';
$styleSheets[0]["title"]='select dark page design';
$styleSheets[0]["sheet"]='<link href="css/dark.css" rel="stylesheet" type="text/css" />';
$styleSheets[1]["text"]='light';
$styleSheets[1]["title"]='select light page design';
$styleSheets[1]["sheet"]='<link href="css/light.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"];
}
?>
style sheet switcher
Before you can add the CSS switch to your page - you will need one more PHP file which will switch the CSS and set it to the selected style as well as returning the user to the current page.
Save this file as "styleswitcher.php" and place it in the same directory as the file calling for it. To ensure your CSS switch works across the entire site - you might need several copies of this file in all folders containing files calling for the switch function (and using absolute paths in the 'styledefinitions.php' file for the CSS links, as mentioned above).
styleswitcher.php
<?php
// 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 CURRENT PAGE
header("Location: ".$_SERVER["HTTP_REFERER"]);
?>
calling PHP functions
Within the head section of your HTML file - which now will need the extension '.php' - place an include to call the style definition functions.
code for page (inside <head> section)
<?php
include('filepath/to/styledefinitions.php');
?>
placing CSS switch links
The last step will be to add the links to the different style sheets. Place the code below into your page structure where you would like the CSS switch links to appear.
code for page (placed where appropriate within <body>)
<?php
// SWITCHER LINK
while(list($key, $val) = each($styleSheets)){
echo "<a href='styleswitcher.php?SETSTYLE=".$key."' title='".$val["title"]."'>".$val["text"]."</a>";
}
?>
If you want to style each switch link differently to reflect the visual style of the CSS - you can add a class to the link and use the text definition as class name as shown below (see fulll code including class at the bottom).
class='".$val["text"]."
code for switcher links including class for individual link styling
<?php
// SWITCHER LINK
while(list($key, $val) = each($styleSheets)){
echo "<a href='styleswitcher.php?SETSTYLE=".$key."' title='".$val["title"]." class='".$val["text"]."'>".$val["text"]."</a>";
}
?>