Noscope

Style it Your Way

June 5th, 2005 by Joen code, css, fauna, javascript, personal

Not long ago, I unveiled a new temporary design of this website: Nocturnal Fauna. Stirring things up, changing face for a few weeks was fun. But it was not more than that, and it was not a redesign.

As such, Fauna is back, and it’ll stay until I feel the need for a true redesign.

Fortunately, this doesn’t have to mean you can’t still have it your way…

Introducing Your Preferences

Have a gander at the very bottom of this page. Scroll way down and look right next to “XML Feeds”. There’s a link to your preferences. On this page you can select the style presentation of your choice. As it stands, Noscope now comes in three juicy flavors:

• Fauna (default)
  The light brownish style that’s been with Noscope since forever.
• Fauna Nocturnal
  The nightstalker of a brother to Fauna.
• Plain

An in-development “clean” style with just the essentials.

For now, go pick your flavor and let me store it in a delicous cookie for you.

But How? Or How I Learned Everything From A List Apart

Since my addition of the second darker style of Noscope, I’ve been wanting to be able to switch between the styles on an end-user basis. I initially found “Invasion of the Body Switchers” to be of great interest. Basically it was loaded with neat features, and degraded gracefully. In the end, I unfortunately scrapped it seeing as the alternate selected stylesheet was applied after the page was loaded. This caused an unnecessary flicker on pages.

So I went back to A List Apart, and found what was the easiest looking PHP Style Switcher available.

Unfortunately it didn’t work for me out of the box, but with a little help from the clever ALA commentators and the PHP Gurus at work, I narrowed the problem down to a few deprecated and different PHP functions. As a public service, I now present to you the modified ALA PHP Style Switcher that works for me. Judging from the comments, it’s got some basic security, (you can’t inject an off-site stylesheet).

Step 1: Make the Switcher PHP

Paste the following in a file called switcher.php in the root of your website:

<?php
$set = $_GET["set"];
$set = preg_replace("#[^a-zA-Z0-9_-]#", "", $set);
setcookie("sitestyle", $set, time()+31536000, "/", $_SERVER["SERVER_NAME"], "0");
header("Location: ".$_SERVER["HTTP_REFERER"]."");
?>

Step 2: Load Your Stylesheet

Instead of the default stylesheet link, use the following:

<link href="<?php echo (!$_COOKIE["sitestyle"])? "/defaultstyle" : "/" . $_COOKIE["sitestyle"] ?>.css" rel="stylesheet" type="text/css" media="screen" />

Notice the defaultstyle part. You replace that part with the filename of your default stylesheet file, omitting the “.css”. As such, if your default stylesheet file is named style.css, you replace defaultstyle with style.

Step 3: Build a Preferences Page

It’s up to you where you want to provide the means to switch between stylesheets, be it on the frontpage or in a separate section. Once you decide, add the links in the following manner:

<a href="/switcher.php?set=defaultstyle">Default Style</a>
<a href="/switcher.php?set=darkstyle">Dark Style</a>

Notice that after the set= part, you type in the name of the stylesheet file, omitting the .css, just like you did in Step 2.

There. Now go switch!