Style Switcher

I’ve implemented the A List Apart style switcher after much debating on the benefit of themes. I’ve come to the conclusion that they’re a good idea. There’s a new one, which I knocked together in a few minutes and haven’t really tested yet (so bear with any errors). Anyway, this means that I’ll be implementing various themes — text only ones for speed, graphical ones for decoration, etc. Something for everyone. :)

If you spot any errors in the Simple Silhouette theme, let me know what they are, what browser you’re using, etc. It’s fixed width, and only really usable in 1024×768 and above, although I’ll probably change this later on.

Ooh, while I’m posting.. I might as well plug my new fanlistings! They are: Review Sites fanlisting, Sony VAIO Laptop fanlisting, Lettuce fanlisting and The Brief fanlisting. Go join! Only if you’re a fan, of course.

Edit: Aha! What an arse. I thought only Internet Explorer was affected by the Flash of Unstyled Content (FOUC), but apparently not. Firefox gives a weird unstyled moment when I’m using the secondary theme when loading a page that isn’t cached. Does anyone know how to avoid/fix this?

16 comments so far

  1. Rosemarie said:
    On 12 Nov at 2:08 pm

    The lettuce looks a bit um… whatever the female version of Phallic is :P Anyways. I always noticed that alternate styles killed loading time for my mac, because it tried to pre-load all the styles. Pain in the ass. My pc doesn’t seem to do this though (whew) You know, this redesign has really grown on me!

  2. Julie said:
    On 12 Nov at 3:04 pm

    The only problem I see is that I have to enable Javascript for the style switcher to work and that once I disable it, I go back to the default theme. Too bad.

  3. Jem said:
    On 12 Nov at 3:06 pm

    Yup, unfortunately it does require JavaScript. I will be writing a version using PHP that avoids JavaScript, but it’ll still require cookies.

  4. Gemma said:
    On 12 Nov at 4:30 pm

    Jem, I didn’t get any styling by default – just Times New Roman etc. – though it came up OK once I clicked the links to the skins. It wasn’t a FOUC (it was default on more than one page and after several refreshes.) I’m using Firefox, of course :)

  5. Sapphire said:
    On 12 Nov at 4:33 pm

    I am uncertain if you are using WordPress as your blogging system but if you do, I find the theme switcher plugin to be the easiest method of skinning your site. One problem I find with a simple style switcher is that the basic structure of your site does not vary which in some ways defeats the purpose of a change. However the benefit is allowing your visitors to select which colors and images they would like to view upon visiting your site. I noticed when changing the theme that they loaded with surprising rapidity which I am fond of. I can switch the theme in the middle of reading and there wouldn’t be much of a disruption. You should create a text-only theme and a theme to accommodate those with sight difficulties by using a larger font.

  6. Jem said:
    On 12 Nov at 4:41 pm

    Sapphire: I don’t use any blogging system per se, I wrote my own.

  7. Carly W said:
    On 12 Nov at 5:07 pm

    Everything worked ok for me…(pc, xp, firefox, pretty bogstandard stuff) Liking the Silhouette theme!

  8. Jon said:
    On 12 Nov at 5:23 pm

    Jem, your site is just short of being amazing. Great job with the new theme(s) and style switcher :P. They worked like a charm for me.

  9. Super Martha said:
    On 12 Nov at 5:44 pm

    I used to use that style switcher on my site, but people kept complaining that it wasn’t working. The Simple Silhouette theme is very pretty. (:

  10. Anne said:
    On 12 Nov at 6:18 pm

    Kewl! I just skinned my site, too…I used a PHP tutorial from bouncybubbles.net or something like that. :D

  11. Elea said:
    On 12 Nov at 6:58 pm

    I hate that you can knock together a new design within minutes while I spend hours, and sometimes still don’t come up with anything great or even passable in my own opinion. =p No errors that I spotted with the new theme and the theme switcher’s working just fine.

  12. Carly W said:
    On 12 Nov at 9:10 pm

    Rose, female of phalic? Errr! The word ‘green’ jumped at me first!! Dirty girl…

  13. Jordie said:
    On 13 Nov at 3:54 am

    Hm, I thought I must have been the only one getting flashes of unstyled content. I didn’t know what it was so I’d just refresh the page… that seemed to work.

  14. Chrissy said:
    On 13 Nov at 6:34 am

    Oooh! I love the new theme.

  15. Sim said:
    On 13 Nov at 6:56 am

    I use the ALA styleswitcher and I remember having to apply a fix for it to work perfectly. Add this to the part that matches it best (hope it comes out): function readCookie(name) { var nameEQ = name + “=”; var ca = document.cookie.split(‘;’); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return("default"); } Change default to the name of your default skin. It basically means that instead of returning null if the user doesn't make a choice (and basically unstyling it), it returns default, i.e. your default skin.

  16. Cherry said:
    On 13 Nov at 12:32 pm

    I didn’t like skinning at first, until I found the theme switcher from wordpress. Now I think the idea of switching themes is great. Your site loads really fast, I don’t even have to wait. :) And the themes are so clean and neat.