Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
smd_style: present alternate stylesheets with a style switcher
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.
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, andreal_sheetsno longer requires a form/container
Last edited by Bloke (2009-04-11 21:22:45)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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 :-)
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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
Offline
Re: smd_style: present alternate stylesheets with a style switcher
Features:
- Optional ability to parse TXP tags inside stylesheets — not when using direct stylesheets/rvm_css though (thanks akokskis / johnstephens)
- New attribute
skip_titlefor 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.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#10 2008-10-18 00:36:15
- masa
- Member
- From: Asturias, Spain
- Registered: 2005-11-25
- Posts: 1,091
Re: smd_style: present alternate stylesheets with a style switcher
Man, you are prolific! :-)
Offline
Re: smd_style: present alternate stylesheets with a style switcher
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…
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#12 2009-02-02 20:16:28
- johnno
- Member
- Registered: 2007-06-14
- Posts: 30
Re: smd_style: present alternate stylesheets with a style switcher
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!
Offline