Comments on: A Simple jQuery Stylesheet Switcher

By: Dynamic Stylesheet switching « 0510ML

Dynamic Stylesheet switching « 0510ML — Wed, 24 Feb 2010 16:03:26 +0000

[...] I've recently been in need of a function that dynamically were able to switch stylesheets without reloading the page. After a lot of searching, I found a post by Rob Glazebrook. [...]

By: Rowan

Rowan — Fri, 12 Feb 2010 21:57:54 +0000

I have used the jquery styleswitcher to swap the css, BUT the style.css, which is the standard style (in wordpress) over-rides the over styles. I can modify the standard css so the new styles will apply the desired affect, but then the standard css, which will be seen first is stripped down and not at all the design! Help!

Thanks, Rowan

By: IT Support Glasgow

IT Support Glasgow — Sun, 31 Jan 2010 15:28:50 +0000

This is a very intresting jquery stylesheet switcher.

Giving little functions like this on your website or blog may bring users back.

By: anonymousprogrammer

anonymousprogrammer — Thu, 28 Jan 2010 00:19:36 +0000

THANK YOU!

I was looking for a great way to swap stylesheets without loading them all initially in the head, and I never knew you could put a class on a element. Solves the problem perfectly!

By: Andy Beattie

Andy Beattie — Wed, 02 Dec 2009 01:43:47 +0000

Thank you very much for sharing your code. I have been looking at many solutions and yours is definately one of the best quality and the most thorough I have come across with very little in the way of limitation. I say this because of the cookie memory feature, as well as less requests and overhead than many of the solutions that require the page to load all stylesheets at once (check out the old ALA method with rel=”alternate”, it’s not as clean as yours nor as efficient). Who wants to drag those css files into the cache when they have not been requested? Certainly not me when I am trying to develop an efficient online application that loads as fast as possible.

I made a slight modification in how I set up the framework, and this was to remove all colours from the base.css and to provide a default colour css file. Thus there are two style links in the head consisting of one large base.css with all formatting etc but no colour values, and then a couple of very small css files that feature only the selector names that I want to change colour.

And for the ul nav links, I simply got rid of the text in the href links and made the colour an actual indicator like:

.yellow { width:16px; height:16px; background:#FFCC00; text-decoration:none; display:inline-block;}
.blue {width:16px; height:16px;background:#6694E3; text-decoration:none; display:inline-block;}
.green {width:16px; height:16px;background: #728B2E; text-decoration:none; display:inline-block;}

This looks great and neat on the page and is very intuitive to the user.

Once again Rob, thank you so much for the help, although I am an old css dog, having been in the game for about 8 years now, you have saved me many many hours. I look forward to reading more of your quality posts and sharing code with you in the future.

Best Wishes!

By: Create a better jQuery stylesheet switcher - Programming Blog

Create a better jQuery stylesheet switcher - Programming Blog — Sat, 03 Oct 2009 12:37:22 +0000

[...] Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions. [...]

By: ZK@Web Marketing Blog

ZK@Web Marketing Blog — Sat, 20 Jun 2009 17:12:58 +0000

It looks good but has a catch.
Every time you open an article page you will be in fact loading two pages(article.php and comment_new.php).
It does not include comment_new.php, it renders it, blocks, theme, everything.

If you looking for performance then this hack is not a solution.

By: Rob Glazebrook

Rob Glazebrook — Tue, 09 Jun 2009 13:26:00 +0000

Hi Ramil,

My best suggestion when trying to use the @import command is, if you’re calling a stylesheet from inside another stylesheet, make sure the @import line is the very first line in your document. That line has to come first, before any CSS rules, any comments… anything at all.

Good luck!

By: Ramil

Ramil — Tue, 09 Jun 2009 08:50:16 +0000

Thanks for the great tutorial.

I have a problem though. It will not work with @import on CSS, at least for me. I have two CSS file, style.css and style1.css. On style1.css, I just use @import url(“style.css”); and some classes that will change when it switches. If I switch to style1.css, no CSS applied to the my HTML document. Any ideas?

By: Daily Digest for 20090508 - lifestream@add

Daily Digest for 20090508 - lifestream@add — Fri, 08 May 2009 02:20:48 +0000

[...] A Simple jQuery Stylesheet Switcher [...]