stylesheet switcher

I have new members, was playing around with css. I know on the main site I have to do a major redesign, get rid of redundant css styles, tighten up the templates.

What’s great about designing a brand new site is, I can play around and experiment. Switchers can be javascript or php. No brainer, really, to go for the php version.

MT based switchers have to thank a list apart (who else?). There’s even a more in depth tutorial by Rob Ballou. Of course, in MT3 and WP, there are already plug-ins, sigh, one of these days.

How I did it.

Step 1
Build the css, which I won’t cover here. I use the basic “invisiblecompany blue” and added another one called “rust”. Both I placed in the root directory, with filenames styles-invisibleblue.css / styles-rust.css.

Step 2
I created a new file in the root directory called “switcher.php”, copied the code. Note that under the array, I put the 2 different options, using the file names but not including the .css extension.

<?php
// This array lists the “acceptable” styles
$accept = array(‘styles-invisibleblue’,
’styles-rust’);// Get style from a query string (e.g. from a link),
// or from a form.
if(isset($_REQUEST[‘set’])){
$style = trim(strip_tags($_REQUEST[‘set’]));
}
else if(isset($_POST[‘set’])){
$style = trim(strip_tags($_POST[‘set’]));
}
else {
// Unknown request
$style = false;
}

// Check if the requested stylesheet is “acceptable”
if(($style !== false) && (in_array($style, $accept))){
setcookie(“sitestyle”, $style, time()+31536000, ‘/’, ‘invisiblecompany.com’, ‘0’);
}
if(isset($_REQUEST[‘ref’]) || (isset($_POST[‘ref’]))){
if(isset($_REQUEST[‘ref’])){
$ref = $_REQUEST[‘ref’];
}
else {
$ref = $_POST[‘ref’];
}
header(“Location: $ref”);
exit;
}
else if(isset($_SERVER[‘HTTP_REFERER’])){
// Send the user back to the refering page
header(“Location: “. $_SERVER[‘HTTP_REFERER’]);
exit;
}
else {
// No HTTP referrer, send them back to the home page
header(“Location: http://invisiblecompany.com/index.php”);
exit;
}
?>

Step 3
Within the header of each index tempate page (main index, archive index, category index, individual archives) I called the switcher:

<link rel=”stylesheet” href=”/<?php
if(isset($_COOKIE[‘sitestyle’])){ // Use the saved style
print trim($_COOKIE[‘sitestyle’]);
}
else { // There is not a cookie set, so use this style
print “styles-invisibleblue”;
}
?>.css” media=”screen” /><link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”invisible” href=”/styles-invisibleblue.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”rust” href=”/styles-rust.css” />

The default is set at invisibleblue, linking the alternate stylesheets enable Firefox users to pick different styles from their menus.

Step 4
Blah IE. To enable non-Firefox users, or anyone who wants to pick using a drop down menu, I made a drop down menu:

<form action=”/switcher.php” method=”post”>
<select name=”set” style=”font-size:9px;font-family:verdana,arial;color:#333333;”>
<option value=”styles-invisibleblue”>blue</option>
<option value=”styles-rust”>rust</option>
</select>
<input style=”font-size:9px;font-family:verdana,arial;color:#333333;” type=”submit” value=”change”>
</form>

I could just paste this in the template where I want the form to sit, instead I made a simple php include so I can call it from any number of pages.

In the process I also learnt how to customise forms, and a little php too. Nice.