smd_style: present alternate stylesheets with a style switcher

Bloke · 2008-10-12 21:22:59

With the sad gathering-dust-like state of fla_style_switcher I thought it was high time for a revamped stylesheet switcher. So here it is.

It’s packaged as a single plugin with two complementing parts: the first helps you collect a list of alternate stylesheets for your pages to use; the second allows you to switch between them via javascript. The latter keeps track of which sheet is selected via a cookie and an ‘active’ class in the stylesheet list.

Download smd_style

You can:

Provide a list of style sheet names derived from a given list, any article field, a <txp:variable />, or a URL variable
Use either the built-in stylesheet switching ability of modern browsers or the plugin’s javascript switcher which requires jQuery to be loaded on your page
Instruct the plugin to load the visitor’s style first on subsequent pages (to help alleviate ‘flash of unstyled content’ on good cacheing browsers)
Use TXP stylesheets, or ‘real’ stylesheets (with or without the awesome rvm_css plugin, which is supported)
Optionally build your own stylesheet syntax via a form/container
Optionally parse TXP tags inside your stylesheets

The idea is that you can bung the two tags — almost naked — on the page, give the first a list of stylesheet names and it’ll manage the whole switching system for you via jQuery. Style the output to taste, or use the plugin attributes to customise what you present to the visitor.

A possible future enhancement might be to offer a non-jQuery switcher that perhaps uses PHP to do the grunt work but since the whole point of switching styles is that it persists across pages and the only halfway decent mechanism to offer persistence is via a cookie and the people that turn off javascript are probably the same people that refuse cookies… well, it might not be worth it. Cookie-like functionality might be emulatable with a <txp:variable /> that I could set from within the plugin and read on every page, but it won’t be as pretty and requires a page refresh to switch.

As ever, post any enhancement ideas, bugs, etc here and I’ll try and stay on top of them.

Revision history
————————

All available versions and changes are listed here. Each entry indexes the relevant post(s) in the threads to learn about the features.

12 Oct 08 | 0.1 | Initial release
18 Oct 08 | 0.2 | Added parse_tags (thanks akokskis / johnstephens) ; added skip_title ; fixed invalid <link> tags, and real_sheets no longer requires a form/container

Last edited by Bloke (2009-04-11 21:22:45)

joebaich · 2008-10-12 23:05:02

Stef,

Just had the quickest of looks at the latest ‘bloke’ stellar plug-in. I kept saying to myself, ‘if only this had been around when ….’ as I saw a use for it on a string of sites.

One minor and very peripheral niggle, the CSS you use on http://stefdawson.com to show snippets of code doesn’t look so good on Mac Safari and has my ageing peepers straining to make them out. See what I mean from the partial screen grab below

Bloke · 2008-10-12 23:16:08

joebaich wrote:

the CSS you use on http://stefdawson.com to show snippets of code doesn’t look so good on Mac Safari

Yuk, you’re right! In fact, it doesn’t look so good on most browsers, and the titchiness of the font has been annoying me for ages but I’m kind of stuck because of how stupidly thin my middle content section is. If the code font size goes up, the longer lines ‘fall out’ of the central area, and I’ve already trimmed them down a fair bit. But I’ll see what I can do to jiggle it about and save our collective eyesights! I think pretty much the whole site needs a damn good kicking…

Anyway, hope the plugin’s useful. I’ve tried to make it as grow-with-your-expertise as possible so you can start with next to no attributes and build up from there if you see the need. It should figure out what you want with the (what I hope are) sensible defaults and render something usable. Time will tell if I’ve succeeded.

joebaich · 2008-10-12 23:23:53

Bloke said

I think pretty much the whole site needs a damn good kicking…

Be gentle! Could be a deserving candidate for some smd_style TLC :-)

Bloke · 2008-10-12 23:28:03

joebaich wrote:

Be gentle! Could be a deserving candidate for some smd_style TLC :-)

Yes, if only the site was written with TXP :-o

I’ve increased the code font size a tad. Not sure if it’s made much difference. Looks better in Firefox but I think the font size rules are being cascaded (probably correctly) in Safari and I can’t figure out why.

Last edited by Bloke (2008-10-13 10:11:11)

gavnosis · 2008-10-16 18:45:13

Ah, the man of plugin magic…

Stef, I can’t seem to get the actual in-the-page-switcher bit to work, like in your example:

<txp:smd_style sheets="yellow, green, brown, blue, pink, black" />
<txp:smd_styleswitcher wraptag="" />

BTW shouldn’t that read txp:smd_styleswitch

So the <head> bit contains <txp:smd_style sheets=“phi:beam me up scotty, pi:who ate all the” /> and deftly generates
<link rel=“alternate stylesheet” type=“text/css” media=“screen” title=“beam me up scotty” etc. etc.

But how do I generate a switcher in my page <body>
I’ve tried the (to me) obvious, like <txp:smd_styleswitch wraptag=“ul” /> but no magic seems to happen then. Any clues?

Thank you

Bloke · 2008-10-16 22:30:53

gavnosis wrote:

BTW shouldn’t that read txp:smd_styleswitch

Yes, it should. It’s typo central in that help file. Have fixed it, thanks.

But how do I generate a switcher in my page <body>

Exactly the way you suggested except I omitted the most important piece of info in the plugin help: you need jQuery to be loaded on the page or it’ll do jack all, as you found. Sorry about that. Just include a call to jQuery somewhere fairly high up on your page and all will be well. I used the latest v1.2.6 but I don’t think there’s anything in the plugin that’ll tax earlier versions.

Since it’s only documentation changes I’ve sneakily updated the original file so you can download the new one and install it if you like to be reminded in red lettering that smd_styleswitch needs jQuery :-)

Apologies for the omission and thanks for pointing out the error(s) of my ways. I really am sliding this week; too much other junk going round my head to pay attention to the details. Bad form. *sigh*.

When you get it going, let me know if this does what you’re after or if it should do stuff differently. Thanks.

gavnosis · 2008-10-17 15:09:24

Ta-da! It works a treat now I’ve got
<script type="text/javascript" language="javascript" src="<txp:site_url />textpattern/jquery.js" ></script>
in the <head>

(And have obviously uploaded jquery.js to my site!)

It even puts in <ul class=“smd_switcher”> just like you said… Only problem is that one of my style sheets is less special (So I’ll send you a link to my handiwork when it looks a bit more ‘handy’)

Thank you

Bloke · 2008-10-18 00:16:39

v0.2 [ zipped ] is out.

Features:

Optional ability to parse TXP tags inside stylesheets — not when using direct stylesheets/rvm_css though (thanks akokskis / johnstephens)
New attribute skip_title for more easily creating preferred/persistent stylesheets
Fixed: real_sheets now work without having to go through a form/container
Fixed: invalid <link> tags can now no longer be generated

Take it for a spin and see how you get on.

masa · 2008-10-18 00:36:15

Man, you are prolific! :-)

Bloke · 2008-10-18 00:38:00

masa wrote:

Man, you are prolific! :-)

:-)

All in a day’s work. That and I have no life, given it’s a Friday night and I’m coding…

johnno · 2009-02-02 20:16:28

validator.w3.org detect errors (five to be precise) such as

Error Line 45, Column 132: document type does not allow element “a” here. … class=“smd_styleswitch’act_class’”>‘this.getAttribute(‘title’)’</a>’);

with an XHTML 1.0 Strict doctype using only code from your included ‘Example 1’

Any ideas?
Otherwise..fantastic plugin. Thanks!

Textpattern CMS

Textpattern CMS support forum

#1 2008-10-12 21:22:59

smd_style: present alternate stylesheets with a style switcher

#2 2008-10-12 23:05:02

Re: smd_style: present alternate stylesheets with a style switcher

#3 2008-10-12 23:16:08

Re: smd_style: present alternate stylesheets with a style switcher

#4 2008-10-12 23:23:53

Re: smd_style: present alternate stylesheets with a style switcher

#5 2008-10-12 23:28:03

Re: smd_style: present alternate stylesheets with a style switcher

#6 2008-10-16 18:45:13

Re: smd_style: present alternate stylesheets with a style switcher

#7 2008-10-16 22:30:53

Re: smd_style: present alternate stylesheets with a style switcher

#8 2008-10-17 15:09:24

Re: smd_style: present alternate stylesheets with a style switcher

#9 2008-10-18 00:16:39

Re: smd_style: present alternate stylesheets with a style switcher

#10 2008-10-18 00:36:15

Re: smd_style: present alternate stylesheets with a style switcher

#11 2008-10-18 00:38:00

Re: smd_style: present alternate stylesheets with a style switcher

#12 2009-02-02 20:16:28

Re: smd_style: present alternate stylesheets with a style switcher

Board footer