Style Switchers Contest Results


Three weeks ago we have announced the Style Switchers Design Contest1 where we’ve presented some ideas for style switchers design and encouraged our readers to create a style switcher for their own web-sites. One of the participants was to be awarded with an Apple Cinema 20 Flat Panel Display. Over 60 designers participated and — as in all of our earlier contests — the results are indeed pretty smashing. Now it’s time to review some of the best designs and, of course, announce the winner.

This contest has proved one thing: there are a number of possibilities for creative use of style switchers in your designs. They don’t have to be boring and can combine functionality with a beautiful and engaging design. Style switchers are back now; and we are glad that so many designers have participated in our contest learning how to use them and apply them to their designs.


The winner of the contest is Florian Pichler, the designer of the iamBlog3‘s style switcher. Congratulations, Florian, we are happy to smash you with an Apple Cinema 20 Flat Panel Display! We’ll contact you via e-mail over the next 24 hours.

And now let’s take a look at 60 excellent examples of style switcher designs created by the participants of our contest. Please notice that only those designers have participated in the contest who followed exactly the rules we’ve published in our announcement post.


Iamblog.de4 has put a lot of effort in designing an advanced style switcher. Hit the button “Hintergrund ändern” in the upper left of the page to open up the styleswitcher and choose a background you like. Previews, backgrounds and the switcher itself are loaded with Ajax, the list of available backgrounds is generated dynamically so every writer of the blog can easily add their own background. Currently 10 different styles are available. The Ajaxified style-switcher can be dragged across the site layout.




Komodo Media

Sometimes style switchers can also be extremely creative. Rogie King8 has designed a sliding foliage-o-meter. Visitors can select the intensity of the foliage in the design (from sparse to dense). The leaves appear not only in the header, but also in navigation options, bullets and headings. Beautiful design, excellent style switcher.



pure structure

Nigel O Toole11 offers an advanced and dynamic style switcher. At one, the presentation of items in Nigel’s portfolio can be adapted to user’s needs. Apart from that the background image of the site can be changed as well. The style switcher itself has two levels: the first level takes care of the structure. To access the second level you need to click on the visual at the right.





On Engage interactive15 you can change the theme via the button in the top right — there are 4 to choose from. All themes are completely different. Each one changes the site holder and also a few bits in the portfolio. Graphics are replaced as well.





Gnomdesign19 has three themes with different background images and blog headers.





Schillmania23 has an advanced mood switcher: visitors can adjust the brightness of the displayed header image and add a snow effect




Small Stone

Smallstone27 allows its visitors to “swap out the shelf” — exchange the header, visuals and links. The style switcher is placed right under the header and is also designed in a unique and professional way.





Kulturbanause31 has a quite unusual blog design with two artistic themes — Daylight and Sunset. As the designer says, you can “play god” with the themes. The style switcher is placed in the sidebar. When the theme is switched both graphics and visuals are changed.





Nofrks35 has a day and a night style. In both cases only background image is replaced.



Luke Larsen

Luke Larsen38 allows visitors to switch between the blue sky view and the goldfish tank view. The site layout is quite wide: when the style is switched, a number of design elements such as background and used images change as well. In the blue sky view dove is used, in the fish tank view a golden fish. The style switcher is placed in the navigation at the top of the page. The site didn’t have the text “Smashing Magazine” which is why it hasn’t been considered when selecting the winner.




Planetopija41 enables users to change the color of the header illustration. The style switcher itself is nicely designed (see the image below, the switcher is hidden behind “colour your world, oboji svoj svijet“).




Westin Melbourne Hotel

Westin Melbourne Hotel45 has an advanced mood switcher: visitors can adjust the brightness of the displayed header image and add a snow effect





Since Olidax49 has a space theme, it allows its visitors to change the theme using a, well, space switcher. You can switch the styles while choosing a planet (you can find it on top of the right column). Earth, Saturn and Mars themes are currently available.




Lee Munroe

Lee Munroe53 has a style switcher that changes depending on the time of day. Visitors can also pick their desired style if they prefer. The style switcher is placed at the upper right corner of the content area. The shadows in the footer change with the changed theme as well.




Sam Gerdt

Sam Gerdt57 allows visitors to select one of three background patterns for the header. The styleswitcher appears when the button at the right upper corner is clicked.




Diego Valobra

Diego Valobra61 has two different antique designs. The background image is replaced. The style switcher is placed in the right bar of the layout.




Maikel Neris

Maikel Neris65 replaces background images: the style switcher provides visitors with an access to three blog themes.




John Scott

John Scott69 has a style switcher with 4 available skins. In each case the background image and the header are changed.




Thomas J Bradley

Thomas J. Bradley73 has a style switcher which is controlled by the Flash banner at the top of the page. When you click on the pink star you will be presented with a slider to glide through the different styles for the site. Each of the styles correspond to a time of day, and are displayed during that time period. As designer says, he wanted to have a fun hidden aspect so he provided this easter egg to slide through all the time periods / styles. 5 styles are available. However, the style switcher is not really easy to find.



Gbot75 has four different background images: earth, paper, tree and sky. Created using Mootools 1.2 Beta 2. The style switcher is placed in the footer of the layout.





Sitesquared79 with a day- and night-theme of the design. The designers of the site love Smashing Magazine, we love your designs too!



Further solutions

Pegd82‘s style switcher is very minimalistic; it uses transparent png’s and background-color to save on loading different logos for each selected color. When the style is changed logo color and link color are changed. The style switcher is placed in the sidebar and is represented by colorful rectangles.


Peter Bucher84 has five style sheets, a styleshow which automatically changes the style and a font-size switcher. The style switcher itself is quite wide.


Timbix Media86 uses three color variations as well as a font size switcher in the left sidebar. Since the layout is elastic, not only text size is increased, but the layout increases as well.


Roy Quilor88 allows his visitors to switch from default text style to Serif fonts and to a “creme colour” design.


This switcher allows its visitors to change the width of the layout to fit an 800×600 or 1024×768 screen. It also has a font-increase functionality that also changes the size of the home and print icons on the side. The style switcher is placed in the sidebar. The icons are simple and easy to understand.


Viatrax91 has an automatic style switcher. The user can’t do anything here; instead WordPress loads a random style automatically when the page is loaded.


Lucia Vega93 has four color styles for his headers and the layout.


Minimal.ca95 present three versions for your best color contrast. The style switcher is placed in the sidebar.


Ledger pad97 has a sticky style switcher which has a fixed position at the right corner at the bottom of the page and remains there even when the page is being scrolled. Blue and black-white-styles are available.


On 2ndzenith.com99 three style themes re hidden behind the “Customize” button. When the button is clicked, the theme picker is sliding. With a changed style links, background and text colors are changed.


Flanisoft101 can switch between a dark and a light background.


Jimmyweb103 offers some color variations of the layout color and link colors.


VMP-Finanz105 offers a basic font-size style switcher in the sidebar.


Weiqi.nl107 with a dynamic style switcher which offers 5 different themes. When the theme is changed, links, header and background image are replaced.


Da Scritch109 has a black toolbar in the header of the page with font-size switcher (”dézoomer” and “zoomer”) and dark/light-switcher (”éclairer”). The visitors can also activate/deactivate fancy animations (”sans anim” and “déplier”).


Freeneedle111 offers 7 color variations for the site design, background images and link colors.


MSDevstudio113 offers 3 different stylesheets with a dfiferent color variations of the layout.


Color and background variations

Ganato Design






Cnow Designs




Chris Taulborg

Chris Taulborg120 has a weather-based style switcher — there are a clear, cloudy, snowy, stormy and night themes available.


Visual 28

Visual28122 goes smashing. The site offers a Smashing-style design layout as alternative style.



rex124 offers 5 themes — color and design variations — with font-size-switchers.



Liverpool Youth Service

Liverpool Youth Service127 with a text size switcher, high contrast version, text only version and a reset button.




Ryan Harris

Ryan Harris’s styleswitcher is a little bit too complex: to activate the theme switcher users need to click on “change background” link: after that the theme of the design can be selected.


Salt Solutions



Anni 80


90seven Design

90Seven133 offers its visitors two different designs.


Card Pac

Card Pac135 with a style switcher placed right in the content. Such style switcher is hard to find and hard to use as the color is selected via a not-so-user-friendly pop-up.



now-streaming137 with a tiny four colours-box under the logo — each of the colors stands for the corresponding design layout.


Hans Engel

Hans Engel139 has a tiny icon that allows users to expand the layout. The style switcher is placed at the top left corner of the layout.



Codesignville141 has 2 styles switchers, one for Text Size and other to change the theme (Day, Afternoon and Night).


due chiacchiere

due chiacchiere143 has a style switcher aimed at accessibility. Visitors can increase/decrease the font size, text alignment, layout and remove/add details.


Your site is valid

Your site is valid145 can switch from a dark layout to a light one.


How about a site that has fifty style sheets to choose from? YourWebPro147 offers 50 color schemes (authoritative, dependable, enchanting, energetic and unique) — the changes affect both the layout and the color of the links. Hint: energetic color schemes not only look energetic. Don’t try this at home.



A tiny layout switcher on Yutheme.cn149 changes the position of sidebar in the layout. The style switcher may be hard to find, though.



DinPattern151 uses a style switcher to display the tiled pattern to the user when the “preview” link is clicked below any pattern. It simply changes the body class to display the correct pattern tile.


We express sincere gratitude to all participants for a number of creative, beautiful and truly smashing style switchers. We hope to see you next time!


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    This was a great contest! Great work Florian! I did have the words “Smashing Magazine” on my site in the articles section. I thought that would be enough but I guess not. Oh well though! it was fun to enter. Thanks Smashing Magazine!

  2. 52

    Thanks Smashing for this inspiring colection. Being posted beside all this beautiful and amazing colections just makes me wanna go further with my own designs too!
    Smashing Komodo design style switcher!!!

  3. 103

    Jakob N.

    June 26, 2008 7:46 am

    I have to say i am also stunned by the positive response, we earned for our little, which was only set up for a few people (especially for java problems *g*) :) thanks guys for the visits we hope some of you will visit us again. we will keep up our work and i will spend the style switcher some new designs i think… have a nice day

  4. 154

    Impressive stuff, but your winner doesnt work in IE6. Is compatibility not important anymore?

  5. 205

    Exhaustive list. Thanks. :)

  6. 256

    Curt Simon Harlinghausen

    June 26, 2008 1:25 pm

    FANTASTIC work. Thanks.

  7. 307

    Interesting comment – I believe javascript style switchers “add” the new style. I tried javascript for my style switcher Your Web Prowhich I entered in the comp, but as mine has 50 styles, the javascript failed in IE7 after 30. Still worked in Firefox.. Yes, 50 is overkill for a comp like this, but I wanted to be able to let my clients view lots of colour schemes. It did make for a very simple site design, it was challenging to build a banner that wouldn’t clash with so many variations.

  8. 358

    Thank you for Sam Gerdt. His design give me a inspiration for web construction.
    Thanks again

  9. 409

    Once again at the right time @ the great moment, so good to read digged articles!!!!
    (do i have a french accent? :))

  10. 460

    Thanks for this inspiring contest. And special thanks to those who made to this page.

  11. 511

    Dado -

    June 27, 2008 10:16 am

    Hi, nice to see my site on this list:

    The winner site doesn’t work in Opera either :( Too bad but this is such a good idea and the guy surely put a lot of effort into it, it is 10% to perfection. Just to make it work in IE6 and Opera. Another idea is to style, beside the header, the rest of the page according to the background, but then again this isn’t zengarden :)

    To Comment nr. 10. Ben – It is done using the Mootools framework

  12. 562

    Florian Pichler

    June 28, 2008 4:39 am

    @Dado – (June 27th, 2008, 10:16 am) (#61)
    Works for me in Opera, but it’s true it has a little bug in that browser. I have no clue why opera calculates the height of the whole page instead of the browserwindow. If you miss the switcher-box, just scroll down to the middle of the page-height, it should be there. If you drag it to top it saves it’s position.

    I will NOT make it work with IE6, this browser is WAY beyond ANY EXISTING standard in this world. I’ll try to make it work with IE7, but don’t expect this very soon, I have a lot of work at university at the moment.

    IF anyone can help me out with a fix for the opera-mis-calculation, just drop me a line.

  13. 613

    Ryan Harris’s switcher isn’t “a little bit too complex” — it’s unobtrusive, which is what a style switcher should be.

  14. 664

    What a great list!

    I think should be the winner Komodo Media!.. My vote for Komodo Media…

    IF anyone can help out with a fix for styling, Just drop Komodo a line. :-)

  15. 715

    Very nice list of sites, i did not visit all of them… yet.
    I dont want to be meticulous, but did anyone look at the with IE 6.
    css is not loaded at all…

  16. 766

    Hi, thanks for listing my site!

    I’ve now updated my code so the switcher works in IE6:

  17. 817

    gbot I like the way u using moo effect ;)
    very nice.

  18. 868


    June 30, 2008 9:00 pm

    Thanks for this contest Smashing. I think it proves the limited (and even negative) value of most current uses of style switchers. They don’t help – and often hurt – the building of a brand via web design. They do not give visitors what they really want: options to organize information in different ways. Instead style switchers are often used for simply eye-candy goofiness that, if used at all by a visitor, will never be used twice. It also proves the worthlessness of text-size switchers as most people know how to use the more flexible and quicker text-size changer within their browsers.

    I also think you all chose the wrong winner: Iamblog simply swaps out a header. So what? Like most other style switchers on this list: it hurts the building of iamblog’s brand rather than helps it. The rest of the blog has to be a generic gray/white scheme to accommodate the different header styles. A not so very strong brand is created by iamblog.

    In my humble opinion Komodo should win because it helps build the seaside, tropical brand of the design and because it rightly recognizes what most style swicthers are good for: silly, fun eye candy that won’t be used more than once.

    The runner up in my opinion would be the “Pure Structure” site, not because of the background switcher which is not helpful, nor is the design very good – but most importantly: unlike the others it offers options for actual structurally different layouts: allowing people to view either fewer, larger thumbnails or more, smaller thumbnails. That’s a real choice that real people can find helpful.

    Visual28 also goes beyond the basic, superficial, color/background image/header image switching solution with an option for handheld devices and other apps who want a more basic, single column, flexible layout. And yutheme lets folks move side column to left or right for the few folks who care about how secondary info is placed. Not major stuff but their solutions should be duly noted as providing more than color/bg changes.

  19. 919


    June 30, 2008 10:02 pm

    Btw, I just revisited this site today after not visiting fir awhile and thought I’d share it: uses style and info switchers somewhat well:

  20. 970

    Congratulation to the lucky winner of the Cinema Display – lucky guy ;-)

  21. 1021

    I’m a bit disappointed that iamblog won with a non style enabled IE blog. Bold move on the creator, but that’s what blogs are for, to be personal. If he wants to make it not work in IE, that’s fine, at least he disables it so it won’t bug out. Granted syncing IE with firefox takes a bit of effort but it can be done.

  22. 1072

    got here a bit late with this one but for what it’s worth, here’s my two cents…

    this is all just eye candy. Style switchers, I believe, only serve a purpose when making sites more accessible, so increasing font size, possibly changing font colour. Anything else just isn’t really necessary. I do really like komodo media’s idea though, utterly pointless but quite engaging for the user on a site that is beautifully designed.

    We designers seem very quick to forget what it actually means to design something. Designing is solving & responding to a problem. Not copying the latest ‘web2.0′ fad or anything like that. Or utilising the latest in javascript or someother technology for the hell of it. Most web designers nowadays are nothing more than glorified stylists, as this list proves.

  23. 1123

    IamBlog does not work on Ubuntu 8.04 with Opera 9.5. Most of the rest work just fine…

  24. 1174

    I’m not sure how some of the other readers in this post got to try out the designs; however, I found the designs showcased were very invigorating.

  25. 1225

    Completely agree with Johnson – the real added value from a style switcher comes when you use it to give users an opportunity to enhance the experience of using a site, through improving it’s accessibility or by allowing users to change the structure/organisation of the content. Allowing users to fart around swapping background images, changing between day and night modes, having green leaves or brown leaves in the background etc. etc. (yawn) might look great, but serves no real purpose to users.

    @Florain Pilcher: ‘I will NOT make it work with IE6, this browser is WAY beyond ANY EXISTING standard in this world. I’ll try to make it work with IE7, but don’t expect this very soon’

    That’s the spirit! Keep shouting and eventually people might stop using IE altogether. Meanwhile, in the real world here on planet earth, IE has the largest share of the browser market. You don’t have to like IE, but at least have the common sense and courtesy to develop something that works on the browser most people in the world are using.

  26. 1276

    Totally agree with Andy B.
    I feel style switchers are nice and nerdy, but there really really really is no purpose…
    Try to find the button if you have any accessibility problem for the current selection.
    It’s an excuse not to make accessible sites.

  27. 1327

    Andy B makes a valid point about IE – it’s a shame but we really do have to take IE 6 & 7 into account when designing web pages. IE6 still has a larger share of the browser market which is depressing. This tells me IE 8 will take about 4 years to catch on and replace IE 6 & 7…

    I usually build my sites for IE7. A few small changes usually gets them working in compliant browsers and then I add a few hacks on a seperate style sheet for IE 6. I hate working this way, but it means I get it right on all platforms which I feel is pretty important, inspite of my hatred for IE…

    Happy coding everyone!

  28. 1378

    What about web 2.0 applications which allow users to switch styles – Meebo, They’re great…

  29. 1429

    A great review, and excellent entries from everyone. Definitely gives motivation to improve. Thanks for featuring my site.

  30. 1480

    Florian Pichler

    July 3, 2008 12:23 pm

    just for those people who do not begrudge me my win (at least that’s what it sounds like): i have no problem if your not happy with the decision of the authors of this blog, I still can’t believe that this happend. BUT: I did my very best to make this private blog working and interesting for it’s writers and it’s readers, which where (before this win) (at least nearly) only students from the Hochschule Augsburg.
    I don’t see why I have to follow my typical working-scheme and hack all that IE-stuff inside, just because 5% of my readers (AFTER the win) still don’t use a good and secure browser yet.
    IF this would be a big website for a company or something more offical, I would have created a template and switcher which works on every IE6&7 and on all other browsers, too. As this is not the case, disabling the stylesheet and the javascript for IE was the best solution for now.
    As some commenters already said, styleswitchers are not really “usefull” in most cases, which is also true for my switcher. It’s just a fancy thing and nice to play around, that’s exactly why I build it.

    regarding opera: I still can’t get the window-height-calculation right for the latest opera (testet on win, mac and linux). scroll down to to middle of the page, it will be there. (opera uses the body-height instead of the window-height for some weird reason)

    As I can understand those who are somewhat angry with me (= those who are forced to use IE and think that I’m a guilty cruel person who locks them out of something interesting) so I decided to take this as a personal competition and recode the whole switcher using mootools 1.2 and making it compatible with IE7 (and maybe IE6)

    but for now: the blog works I planned it, I spend several weeks on it’s sourcecode and those for whom I and the other authors write can read it and are happy about new posts, which are far more important than any design-feature you can implement. Content matters.

    I’m writing this post sitting in front of my ACD, thanks again, it made my life and coding much easier.

    and just before I forget: I absolute love those leafs on Komodo Media.

  31. 1531

    Designing is solving & responding to a problem. Not copying the latest ‘web2.0′ fad or anything like that. Thanks

  32. 1582

    Pretty, but largely pointless. Changing background images is frivolous. Changing font sizes is better achieved in the browser, using standard controls.

    How many of these entries actually made something worthwhile to users? Anyway, here are some potentially useful style switchers:

    — Low-glare colours
    — Single-column layout to maximise reading space for low resolutions or large font sizes
    — Customised content (for example, left-handed vs. right-handed)

    That’s all I can think of. The rest just seem to be fluff.

  33. 1633


  34. 1684

    ow many of these entries actually made something worthwhile to users? Anyway, here are some potentially useful style switchers

  35. 1735

    How many of these entries actually made something worthwhile to users? Anyway, here are some potentially useful style switchers:

  36. 1786

    devlet hastanesi randevu

    March 2, 2011 11:45 pm

    appear not only in the header, but also in navigation options, bullets and headings. Beautiful design, excellent style switcher.

  37. 1837

    Apple Cinema 20 Flat Panel Display. Over 60 designers participated ll of our earlier contests — the results are indeed pretty smashing. Now it’s time to review some of the best designs and, of course, announce the winner.

  38. 1888

    ustomizable as well. Some of theme provide even a panel interface in the admin area.


↑ Back to top