WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

I am sure that everyone has come across WordPress themes which use alternative stylesheets (CSS) to switch between different sets of style information. For example, you can have a look at the following themes that have this functionality :-

Here is how these themes do it :-

Default Stylesheet

Ideally, every WordPress theme has a style.css file associated with it that contains all the style information for the theme. This default stylesheet is usually called in the header.php file of your WordPress theme by something like this :-

Rel=”stylesheet” is what defines the active stylesheet as the default one.

Alternative Stylesheets

Now you will need alternative stylesheets that change the look or the layout of your theme. For example, you can change the color of the background, fonts, positioning of the sidebar, header images etc. To define the alternate stylesheets, you should use something like rel=”alternate stylesheet” during the stylesheet call. Here are some examples :-

You can make new stylesheet files called orange.css and blue.css files and maybe change the background colors for the body of your theme (for this example). Use something like :-

body {background-color:#FF6E1F;}

Goes in orange.css for orange background color

body {background-color:#2C85EF;}

Goes in blue.css for blue background color

Now, place these files in your theme folder (same path as your style.css).

Style Switcher

The styles in the above alternate stylesheets will be included into your theme but will not be used until it is specified in some way. To do this, we can take help of Javascript code which will serve as a style switcher. You can download the Javascript file here :-

Download styleswitcher.js

Please the styleswitcher.js file into your theme folder and include it into your theme by placing the following code above the tag in your header.php file :-

Now, you need a control scheme that will allow you to switch between the alternative stylesheets. Place the following code anywhere in your theme body :-

Orange
Blue

The above code will make new hyperlinks in your theme called Orange and Blue. When you click on these links, your theme’s background color will change to the specified color.

Conclusion

So you can now experiment and tweak different things in your theme using the alternate stylesheets. You can make any number of such stylesheets but make sure that you call them through the Javascript code. I hope you benefit from this article πŸ™‚

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. wang left a comment on March 28, 2016 at 9:18 pm |

    Dalian Huagong Innovation Technology Co., Ltd. is a new high-tech enterprise devoting to innovation and research and development established in 2003 with business covering many countries all over the world. It concentrates on industry, automobile, electric, consumption, energy and construction fields. The company was listed on NEEQ in Jan. 2014. It is one of enterprises listed in the first batch after expansion of NEEQ. Stock Code: 430615. Stock Abbreviation: Huagong Innovation. Sealing system, thermal insulation glue injection system and door & window system of the Huagong Innovation HGIT Brand provide innovative and beneficial solutions for clients, thus improve their product quality. In the meanwhile, the company customizes energy-saving, environment protective, beneficiating and cost-effective system automation lines aiming at customers’ requirements and serves customers all over the world with professional technology.
    The company values combination of production, teaching and researching. It not only has scientific research and development projects aiming at future development with domestic first-class schools, but also has close strategic cooperation relation with many international transnational corporations.
    As a strategic partner of the Dow Chemical – a world 500 top in polyurethane thermal insulation project, the company and HANs Chemical (Dalian) Co., Ltd. – a wholly-owned subsidiary of the company jointly provide systemic solutions for building heat preservation and energy saving.
    The Huagong Innovation will persistently provide comprehensive support for customers with innovative technology, excellent solution and superior service.
    http://www.hgcx.cn/en/index.php?p=product&lanmu=12

  2. stosun left a comment on January 18, 2013 at 5:46 pm |

    Hi,
    I did what you said above, but still it doesn’t work.
    at left top, I put two links to switch styles, but it doesn’t matter.
    Could you help me, please?
    Regards

  3. jay left a comment on August 13, 2012 at 3:44 am |

    Ho..i don’t know why the codes for style sheets are not visible here , just blank boxes!,may be you accidently deleted them.

  4. conservatories left a comment on October 29, 2011 at 3:51 am |

    I would definitely try this. I have just created a fresh blog using wordpress and I am looking out for some new styles and themes. I liked your tutorial and I will give it a shot. Keep up the good job, and keep sharing more tips and advice on Word Press.

  5. lkj]n left a comment on May 29, 2011 at 2:00 am |

    very gooooooooooooooood

    http://www.nb-des.com/vb

  6. Thavi left a comment on November 9, 2010 at 12:11 pm |

    It loads the default style sheet for a fraction of second every time I change the page before loading the selected alternate style

  7. Brooke left a comment on September 29, 2010 at 2:12 pm |

    I spent 6 hours searching and tweaking and thanks to your tutorial i finally got it to work! The only thing though is I cannot get the default style sheet to stick around. It shows up for a few seconds than automatically changes to one of the other styles. This is how I am calling it:

    You can see the site at yobeat.server288.com

    If you have any suggestions for fixing this, i would be greatly appreciative! Thanks for the great tutorial.

  8. Robert left a comment on May 6, 2010 at 1:37 am |

    Great tutorial. I am working on a theme now that needs an additional style sheet

  9. webdesign left a comment on April 7, 2010 at 8:17 am |

    I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

  10. speeds left a comment on October 3, 2009 at 8:24 am |

    ???—????
    think you?

  11. sunn left a comment on August 4, 2009 at 2:22 pm |

    Well done!
    Can you make it change automatically on the first day of every season too?

  12. Joomla Experts left a comment on July 11, 2009 at 12:12 pm |

    what is this! are you kiddin me!

  13. brion left a comment on May 15, 2009 at 12:41 pm |

    just brilliant, thanks

  14. Blay left a comment on April 5, 2009 at 5:58 am |

    Thanks for this. Question though, I want to make it automatically switch everytime so one comes to the page. I have 4 different pictures in the header with colour changes in the text. I have done everything you said. Its just how would I go to rotate the css /headers automatically instead of clicking on a button?

    • Jai left a comment on April 5, 2009 at 11:23 am |

      To do the change automatically, you will have to use some PHP code to randomize it whenever someone visits your page. I hope this code can give you some idea :-


      < ?php $random = rand(1,3); if($random == 1) { // Include your css } elseif($random == 2) { // Include your css } elseif($random == 3) { // Include your css } ?>

  15. ???? ??? left a comment on February 23, 2009 at 11:08 am |

    I think this is a very good post, I will come to this website again

  16. Ness left a comment on August 19, 2008 at 2:32 am |

    If you’re talking to me, it’s wp, but the same can also be done quite simply with Joomla, I guess !

  17. Yang left a comment on August 19, 2008 at 2:09 am |

    it’s a joomla’ image or wp’s?

  18. Ness left a comment on August 17, 2008 at 10:44 am |

    Hi ! Actually, I managed to do it, and it works really fine. I used a js file to get the user’s computer time and to return a stylesheet accordingly. The user can also choose to keep a specific stylesheet (I used cookies), and to toss the cookie to return to the night / day alternance.
    Also, for people who don’t have js enabled, I did a php function which does basically the same, but based on the server’s time.
    Quite a mess mixing both languages, but now it works ^^ I might put the website url here if somebody’s interested (for the moment, the website is still in development).

  19. Richard left a comment on August 17, 2008 at 8:00 am |

    I’ve seen this idea before a few times, usually incorporatd with a cookie that allows you to set a style sheet and when you revisit the site it picks up the cookie data and keeps your selection from last time. Nice touch … if you think you can do it?

  20. Ness left a comment on August 4, 2008 at 2:00 am |

    Thanks for this !
    I have a question, though : I noticed that even when I don’t choose a specific stylesheet, the cookie “style” is created. I’d like to avoid that (I’m trying to design a two-mode style switcher : as long as the user hasn’t choosen a style, styles are random), but I’m not that much into javascript and I don’t know how to have the cookie created ONLY if the user has chosen a stylesheet.
    Any advise ?

  21. Sauron left a comment on August 2, 2008 at 1:24 am |

    I think this is a very good post, I will come to this website again…no doubt.

  22. roro44.com left a comment on July 26, 2008 at 11:03 pm |

    Really your words are fantastic thanx
    http://www.roro44.com

  23. roro44.com left a comment on July 26, 2008 at 11:03 pm |

    Really your words are fantastic thanx

  24. spirit left a comment on July 24, 2008 at 4:23 am |

    ^_^ I am a Chinese student~

  25. Jason left a comment on July 18, 2008 at 10:29 am |

    Thank you for this Jai! It has really helped me a lot.

  26. KrAzy Che3To left a comment on July 17, 2008 at 2:53 pm |

    I liked this implemented in the templates so I have been working on one for my site.

  27. John Young | We Have Contact left a comment on July 17, 2008 at 9:13 am |

    Very interesting article, and something that I’ve been curious to learn about recently!

    One question I would have is: how useful has the community here found alternating stylesheets to be? Do your readers prefer them, or are they more of a novelty?

    Nice instructional post!

  28. adi left a comment on July 16, 2008 at 11:49 pm |

    now i know how to change the wp style.
    u’re a good tutor, jai. good job

  29. smallguitar left a comment on July 16, 2008 at 4:33 pm |

    you are ok!

  30. ashish choudhary left a comment on July 16, 2008 at 9:32 am |

    now i think , i can develop my own wp theme,

    thanks brother for this css tutorial

  31. willerce left a comment on July 16, 2008 at 7:27 am |

    ??????????

  32. noobatron left a comment on July 16, 2008 at 3:11 am |

    I have been looking for this, since a while but did not know what to search for!

    Thanks, I think I have found it:D

  33. danielchew left a comment on July 15, 2008 at 10:33 pm |

    I must say that this stylesheet tutorial has helped me a lot in understanding css. Thanks for making this tutorial

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project