Style it Your Way

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:

Step 2: Load Your Stylesheet

Instead of the default stylesheet link, use the following:

.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:

Default Style
Dark Style

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!

21 thoughts on “Style it Your Way”

  1. Once I have stabilized my Vader layout (which is entirely temporary), I’m going to implement this on my site.

  2. Joen says:

    While I do think your Vader theme is most excellent, I’m sure many will like a style switcher feature. I added it for the very same reason: satisfying the expert readers.

    An important thing to remember also is that while you can indeed swtich the entire look and feel with a single file, you could also just, for instance, switch between liquid and fixed, or provide a simple text-size or contrast control.

  3. Tristan says:

    I kind of got used to it being dark… thanks to the prefs, I can keep it that way 🙂 I’m such an expert reader like that.

    I’m not sure it’s such a big difference, but it’s interesting to think of how the color scheme affects the way people read a site… I mean, look at binarybonsai — it got dark all the sudden, and it does make it feel different. I don’t know, just something to think about.

  4. Rob Mientjes says:

    I see you’re updating more and more on your site. Kickass. Okay, so you know what I think about it, but hey 😉 Nocturnal is set.

  5. Chris says:

    Joen, cool. Thanks for doing the leg-work.

  6. Chris says:

    thanks for legworking the do, joen.

  7. Joen says:

    I just noticed that I had forgotten to tutor how to build the preferences page. This is now added in Step 3.

    Tristan,

    It varies from person to person. As I wrote about Nocturnal, it was inspired by that friend of mine who also claimed he read better on dark. I can’t say it’s the same for me, but the logic works out.

    Rob,

    Thanks. As for changes, are you referring to the “older image” and “newer image” change I just did to the header? I think it should make it easier to understand the chronology.

    Chris,

    Thanks, looking forward to see what you might do with it 🙂

    Chris 2,

    Quit the Yoda speak Mr. Imitator, reserved that is, for me.

  8. Rob Mientjes says:

    Joen, yeah, and also to the colophon. I like reading those 🙂 The header is also a logical improvement, and the question mark is a very handy addition, no doubt.

  9. Stefan says:

    The new feature is cool, more cooler would be to insert in each site the “alternate stylesheet” tag, to switch it easily with the browser:

    <link rel="alternate stylesheet" type="text/css" href="/path/to/alternate/stylesheet" title="name" media="screen" />

    Sidenote: You may switch my styles here, too 😉

  10. Chris says:

    You know eventually we’ll get to a point where the visitor will arive at the site, click a few checkboxes and have the site autostyled to their ridiculous preferences.

    The design aspect of our sites will be minimized but at least you won’t have to hear people complaining that they don’t like dashed lines. You know who you are.

    🙂

  11. Joen says:

    Rob,

    Thanks. Yeah, I’ve also been wanting to add links to the actual images in their large counterparts, but it would require a heck of a recoding and I’m afraid I’m just lazy.

    Stefan,

    Thanks. You’re absolutely right, it’s not only possible but generally a good idea to provide alternate stylesheets using that method.

    On my part, however, it was a conscious choice not to use that feature, quite simply because switching the page style in, for instance the Firefox “View > Page Style” menu wouldn’t cookie the choice, and thus confuse users. However, when I tried out “Invasion of the Body Switchers” “integrate”, I found that this was indeed possible. In other words, IOTBS Integrate allows you to use that Page Style feature and still cookie it.

    However, as mentioned, IOTBS applies after page load, so it was too sluggish for my tastes.

  12. Joen says:

    Chris,

    Interesting. You think that’ll happen? I think it might, but not in the way that each and every web designer provides stylesheets such as these. I think possibly the browser could auto-generate light versions of the sites and other options.

  13. Stefan says:

    Joen, I checked the script on my site, and cookies work well, if I switch it in my browser (both Menu and/or Firefox Extention) …? Maybe you would like to see the .js of my styleswitcher.

  14. Joen says:

    Stefan,

    I did take a look at your site, and it works impressively well. It’s even faster than the style switcher I’ve applied.

    However, I’m pretty satisfied with the fact that I don’t have to use any JavaScript at all with the current one, so I’m going to stick with it.

    However, if you could possibly combine the PHP Switcher with your “alternate stylesheet” features, I’m sure it would be popular… Unfortunately I have neither the time nor skills to do it myself.

  15. khaled says:

    That’s brilliant. As I read the post, and went to the preference page, I said to myself, DAMMIT I want one as well. How the hell did he do that? Scroll back to the post et voila, thanks dude that is brilliant.

  16. Tristan says:

    I actually do think I read better on dark. Or, at least when the page isn’t completely white. It’s just too many photons for my eyes to handle I guess. 🙂

  17. Nice. Nocturnal Fauna is set as my preference. 🙂 Style switchers rock, though I removed the one from my site, as the colour scheme switcher was more of an experiment.

    You could as well implement sexy IRIs for the switch links, so your styles can be bookmarked and linked to… For your setup, the code in the .htaccess then goes:

    # .htaccess
    RewriteEngine On
    RewriteRule ^switcher/([^/]+)/?$ /switcher.php?set=$1
  18. nik says:

    This is very cool.

    Cookies don’t seem to be working for me in Safari tho? Is it me, or any other mac users noticing the same? It won’t save my prefs. But it will in Firefox PC.

    Cool tho! I chose Nocturnal. (except now as I’m working outside on our balcony)

  19. Joen says:

    Thanks all, for your comments. I’ve been without Internet for a few days, which has been quite nice.

    Mathias,

    Thanks for posting the code here. It’s actually better than the redirect code I already had in place. My main reason for not including it in this post though, was to keep things simple. After all, most of the people who would use rewrite rules, would probably be able to write some themselves.

  20. Joe says:

    Thank you! After several hours of head scratching this was a big help.

  21. mo says:

    would you believe I’ve been looking for exactly this for so so long!

    Thanks!

Comments are closed.