Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Style Switchers Contest Results

Advertisement

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.

Apple2

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 Link

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.

Screenshot5

Screenshot6

Screenshot7

Komodo Media Link

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.

Screenshot9

Screenshot10

pure structure Link

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.

Screenshot12

Screenshot13

Screenshot14

Engage Link

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.

Screenshot16

Screenshot17

Screenshot18

Gnomdesign Link

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

Screenshot

Screenshot

Screenshot

Schillmania Link

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

Screenshot20

Screenshot21

Screenshot22

Small Stone Link

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

Screenshot24

Screenshot25

Screenshot26

Kulturbanause Link

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

Screenshot28

Screenshot29

Screenshot30

Nofrks Link

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

Screenshot

Screenshot

Luke Larsen Link

Luke Larsen 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.

Screenshot

Screenshot

Planatopija Link

Planetopija31 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“).

Screenshot32

Screenshot33

Screenshot34

Westin Melbourne Hotel Link

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

Screenshot36

Screenshot37

Screenshot38

Olidax Link

Since Olidax39 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.

Screenshot40

Screenshot41

Screenshot42

Lee Munroe Link

Lee Munroe43 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.

Screenshot44

Screenshot45

Screenshot46

Sam Gerdt Link

Sam Gerdt47 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.

Screenshot48

Screenshot49

Screenshot50

Diego Valobra Link

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

Screenshot52

Screenshot53

Screenshot54

Maikel Neris Link

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

Screenshot56

Screenshot57

Screenshot58

John Scott Link

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

Screenshot

Screenshot

Screenshot

Thomas J Bradley Link

Thomas J. Bradley59 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.

Screenshot60

GBot Link

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

Screenshot62

Screenshot63

Screenshot64

Sitesquared Link

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

Screenshot66

Screenshot67

Further solutions Link

Pegd68‘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.

Screenshot69

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

Screenshot71

Timbix Media 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.

Screenshot

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

Screenshot73

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.

Screenshot74

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

Screenshot

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

Screenshot

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

Screenshot76

Ledger pad 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.

Screenshot

On 2ndzenith.com77 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.

Screenshot78

Flanisoft79 can switch between a dark and a light background.

Screenshot80

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

Screenshot82

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

Screenshot84

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

Screenshot

Da Scritch85 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”).

Screenshot86

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

Screenshot88

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

Screenshot90

Color and background variations Link

Ganato Design Link

Screenshot91

Spaksu Link

Screenshot92

Firex-bg Link

Screenshot

Cnow Designs Link

Screenshot

deam0n Link

Screenshot

Chris Taulborg Link

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

Screenshot94

Visual 28 Link

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

Screenshot96

rex Link

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

Screenshot98

Screenshot99

Liverpool Youth Service Link

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

Screenshot101

Chimou Link

Screenshot102

Ryan Harris Link

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.

Screenshot

Salt Solutions Link

Screenshot

Screenshot

Anni 80 Link

Screenshot103

90seven Design Link

90Seven104 offers its visitors two different designs.

Screenshot105

Card Pac Link

Card Pac 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.

Screenshot

Now-Streaming Link

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

Screenshot

Hans Engel Link

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

Screenshot

Codesignville Link

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

Screenshot107

due chiacchiere Link

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

Screenshot109

Your site is valid Link

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

Screenshot111

How about a site that has fifty style sheets to choose from? YourWebPro 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.

Screenshot

Yuyu Link

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

Screenshot113

DinPattern Link

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

Screenshot115

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!

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/06/05/style-switchers-are-back-ideas-examples-and-a-contest/
  2. 2 https://www.smashingmagazine.com/images/styleswitcher/apple.jpg
  3. 3 http://iamblog.de/
  4. 4 http://iamblog.de/
  5. 5 http://iamblog.de/
  6. 6 http://iamblog.de/
  7. 7 http://iamblog.de/
  8. 8 http://www.komodomedia.com/
  9. 9 http://www.komodomedia.com/
  10. 10 http://www.komodomedia.com/
  11. 11 http://www.purestructure.com/
  12. 12 http://www.purestructure.com/
  13. 13 http://www.purestructure.com/
  14. 14 http://www.purestructure.com/
  15. 15 http://www.engageinteractive.co.uk/
  16. 16 http://www.engageinteractive.co.uk/
  17. 17 http://www.engageinteractive.co.uk/
  18. 18 http://www.engageinteractive.co.uk/
  19. 19 http://www.schillmania.com
  20. 20 http://www.schillmania.com
  21. 21 http://www.schillmania.com
  22. 22 http://www.schillmania.com
  23. 23 http://www.smallstone.com
  24. 24 http://www.smallstone.com
  25. 25 http://www.smallstone.com
  26. 26 http://www.smallstone.com
  27. 27 http://www.kulturbanause.de/
  28. 28 http://www.kulturbanause.de/
  29. 29 http://www.kulturbanause.de/
  30. 30 http://www.kulturbanause.de/
  31. 31 http://www.planetopija.hr/
  32. 32 http://www.planetopija.hr/
  33. 33 http://www.planetopija.hr/
  34. 34 http://www.planetopija.hr/
  35. 35 http://www.westin.com.au/melbourne/
  36. 36 http://www.westin.com.au/melbourne/
  37. 37 http://www.westin.com.au/melbourne/
  38. 38 http://www.westin.com.au/melbourne/
  39. 39 http://www.olidax.com
  40. 40 http://www.olidax.com
  41. 41 http://www.olidax.com
  42. 42 http://www.olidax.com
  43. 43 http://www.leemunroe.com/
  44. 44 http://www.leemunroe.com/
  45. 45 http://www.leemunroe.com/
  46. 46 http://www.leemunroe.com/
  47. 47 http://samgerdt.com
  48. 48 http://samgerdt.com
  49. 49 http://samgerdt.com/
  50. 50 http://samgerdt.com
  51. 51 http://www.diegovalobra.com/
  52. 52 http://www.diegovalobra.com/
  53. 53 http://www.diegovalobra.com/
  54. 54 http://www.diegovalobra.com/
  55. 55 http://www.maikelneris.com.br/
  56. 56 http://www.maikelneris.com.br/
  57. 57 http://www.maikelneris.com.br/
  58. 58 http://www.maikelneris.com.br/
  59. 59 http://thomasjbradley.ca/
  60. 60 http://thomasjbradley.ca/
  61. 61 http://gbot.info/
  62. 62 http://gbot.info/
  63. 63 http://gbot.info/
  64. 64 http://gbot.info/
  65. 65 http://sitesquared.com/
  66. 66 http://sitesquared.com/
  67. 67 http://sitesquared.com/
  68. 68 http://pegd.org/
  69. 69 http://pegd.org/
  70. 70 http://peterbucher.ch/
  71. 71 http://peterbucher.ch/
  72. 72 http://www.quilor.com/
  73. 73 http://www.quilor.com/
  74. 74 http://www.websitesforaccountants.net/choosing_web_designer.php
  75. 75 http://minimal.ca/
  76. 76 http://minimal.ca/
  77. 77 http://www.2ndzenith.com/
  78. 78 http://www.2ndzenith.com/
  79. 79 http://photoblog.flanisoft.at
  80. 80 http://photoblog.flanisoft.at
  81. 81 http://www.jimmyweb.net/
  82. 82 http://www.jimmyweb.net/
  83. 83 http://www.vmp-finanz.de/
  84. 84 http://www.vmp-finanz.de/
  85. 85 http://dascritch.net/
  86. 86 http://dascritch.net/
  87. 87 http://www.freeneedle.com/
  88. 88 http://www.freeneedle.com/
  89. 89 http://msdevstudio.com/blog/
  90. 90 http://msdevstudio.com/blog/
  91. 91 http://www.ganato.com/
  92. 92 http://www.spaksu.com/
  93. 93 http://chris.taulb.org/
  94. 94 http://chris.taulb.org/
  95. 95 http://visual28.com/
  96. 96 http://visual28.com/
  97. 97 http://soyrex.com/
  98. 98 http://soyrex.com/
  99. 99 http://soyrex.com/
  100. 100 http://lys.org.uk
  101. 101 http://lys.org.uk
  102. 102 http://chimou.com/
  103. 103 http://www.anni80.info/
  104. 104 http://90seven.com/
  105. 105 http://90seven.com/
  106. 106 http://www.codesignville.com/
  107. 107 http://www.codesignville.com/
  108. 108 http://www.duechiacchiere.it/
  109. 109 http://www.duechiacchiere.it/
  110. 110 http://www.yoursiteisvalid.com/
  111. 111 http://www.yoursiteisvalid.com/
  112. 112 http://www.yutheme.cn/website/
  113. 113 http://www.yutheme.cn/website/
  114. 114 http://www.dinpattern.com/index.php
  115. 115 http://www.dinpattern.com/index.php
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

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

Advertisement
  1. 1

    congrats to iamblog!

    0
  2. 2

    Great inspiration you have here

    0
  3. 3

    Now seriously…how you can run all over the internet to find stuff like this?

    0
  4. 4

    The komomedia Styleswitcher is just awesome!

    -1
  5. 5

    Komodo Media’s is crazy! Great work.

    0
  6. 6

    Maikel Neris

    June 25, 2008 3:40 pm

    Thanks for feature my website. I’m sad because i don’t win the Apple Cinema Display… who knows in the next?

    Oh! My name you wrote wrong. Is not “Naris”, is “Neris”.

    Thanks again!

    0
  7. 7

    Nguyen Trung Kien

    June 25, 2008 4:14 pm

    Great inspiration you have here

    0
  8. 8

    Awesome! The Komodo one is my favourite – simply amazing.

    0
  9. 9

    very nice!!!!

    0
  10. 10

    How is the movement done on this website featured here: http://www.nofrks.com/ ?

    Is it flash – it does not seem to be. But flows like flash when you click on a button it flies off in another direction.

    Would really like to learn how to do this – maybe a tutorial exists out there?

    0
  11. 11

    Very nice piece. The Komodo Media switcher is by far the best in my opinion though…

    0
  12. 12

    Love the Komodo media design – one of my favorite site designs ever! :)

    0
  13. 13

    gg Scott Schiller!

    0
  14. 14

    Nout - Blog 3.14

    June 26, 2008 2:58 am

    Noutweb
    Another very cool styleswitcher here!!!:
    http://www.noutweb.com/blog

    Nout van Deijck
    Blog 3.14

    0
  15. 15

    Congratulations to Florian Pichler. Nice work! Site’s a little slow no doubt to traffic from this post, but killer job. Of course, my favorite is the super mario theme. :)

    0
  16. 16

    I like how much work people have put into some of those. Hopefully more site will adapt alternative styles for people with needs.

    0
  17. 17

    Diego Valobra

    June 25, 2008 6:24 pm

    Tnx for feature my work.
    iam blog & komodo media, really hard to decide, they r both amazing, congratulation to the winner, enjoy your new Apple Cinema :)
    This has been a great contest.

    Diego

    0
  18. 18

    Nice job guys. Everything looks great!

    0
  19. 19

    A lot of great things… Keep smashing…

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

    0
  20. 20

    I am impressed with the quality of some of the websites featured. No doubt this contest has improved the design of many participating websites – I only wished I had learned about the contest earlier!

    Komodo Media is my personal pick :)

    0
  21. 21

    Congrats winner………

    0
  22. 22

    Luke Larsen

    June 25, 2008 8:37 pm

    This was a great contest and I am happy I got chosen. I just did want to mention that I did place the words “Smashing Magazine” in the site. I wrote an article about it in the articles section of the website. Click on articles in the nav and scroll down. When submitted it was the first article on the page.

    Thanks for a great contest though!

    0
  23. 23

    Why? Seems like a way to do 3 times as much work to me.

    Do potential guests of the Westin Hotel really care if their site comes in pinkish, bluish or brownish hues? I don’t think so…

    Smashing article though, food for thought.

    0
  24. 24

    Mário Santos

    June 25, 2008 10:10 pm

    Congratulations iamblog.de owner! :)

    0
  25. 25

    Congrats winners! Awesome work!

    0
  26. 26

    Congratulations.. and thanks for SM to nice contest..

    0
  27. 27

    great post. thanks SM!

    0
  28. 28

    Jordan Moore

    June 25, 2008 11:59 pm

    Good to see Lee Munroe get a mention :) nice work!

    0
  29. 29

    Oh damn, didn’t realise there was a contest on this. I would given you something very nifty. I’m writing a tutorial on this later today, i’ll update here for you all to see.

    0
  30. 30

    Florian Pichler

    June 26, 2008 12:29 am

    Wow. Never thought this would be possible. Thanks a lot. I’m totally stunned.
    and yeah, the traffic makes my server slow, upgrade is on the way.

    0
  31. 31

    Cool stuff guys! I just recently had my first go at adding a style switcher (5 background options) to my new site design… cameronqueen.com

    0
  32. 32

    komodo is beautiful, man is a freak :), iamblog is technical and beutiful, thx smashmag

    0
  33. 33

    I haven’t viewed the winner yet as the site is really slow loading, must be the extra traffic this is bringing it!

    I have to say though the Komodo Media switcher is a work of art, absolutely stunning work.

    0
  34. 34

    Florian Pichler

    June 26, 2008 1:01 am

    iamblog.de should be accessible again. hopefully.

    0
  35. 35

    congratulations!!! tolle Arbeit!

    really good styleswichters are shown here! amazing!

    0
  36. 36

    In my opinion Komodo Media has the most creative style switcher. Impressive!!

    0
  37. 37

    Rajaie AlKorani

    June 26, 2008 1:46 am

    And I thought my blog had a good design! Thanks again SM for boosting my creativity!

    0
  38. 38

    Hahaha! grat’s Flo!
    I knew you would win!
    :)

    0
  39. 39

    ohhhh i dig the first one!

    Niki Brown

    0
  40. 40

    It’s simply amazing how many of the switchers that rely completely on JavaScript. What if the browser you’re currently using doesn’t allow it, or perhaps the owner of the computer (for instance, a boss at work) don’t trust you enough to let you use the browser freely?

    If you’re concerned about web security, JavaScript might be blocked completely off, or at least alot of executable functions.

    All style switching should be server-side, not client side, since you (the web designer etc…) won’t know (all) the visitors. Sure, statistics might show some results, but it’s not 100% reliable.

    0

↑ Back to top