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.
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.
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:
Step 2: Load Your Stylesheet
Instead of the default stylesheet link, use the following:
.css" rel="stylesheet" type="text/css" media="screen" />
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
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:
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!