June 2005 Archives
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.
// 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:
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:
<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.
For the example, go to Cam’s page.
In the process I also learnt how to customise forms, and a little php too. Nice.
I did this 100 things page. Probably years too late, cos that seems out of fashion now, but it was kinda interesting to do.
