Content last modified Monday 6 March 2017
hop to #bottom
Categories:
Author:
Current version:
2005-02-01
About It:
Get it:
Rate it:
  • Helpful?
  • 0 Yes
  • 0 No
Flag it:

If you'd like to provide updated information and do not have access to directly edit, please contact the site admin; thanks!

Style-switcher (non-plugin)

I’ve been wanting to sit down and flesh out a full-featured style switcher for Textpattern for a while now (I looked at this one but it’s not quite what I wanted, and I’ve never cared for the ALA JavaScript switcher), but with the imminence of the 1.0 release I’m wary of doing it as a plugin or relying on TXP’s built-in CSS system. So I’ve put together a nice little script that can work independently of Textpattern, and can be set up with very little fuss.

The script is available for download here, and once you’ve got it you’ll need to do three things to get it working:

First, unzip and open up the script (when you unzip the file you should get a script called ‘styles.php’). There’s a line in it which looks like this (line #23 to be exact):

$site_domain = '.' . 'example.com';

Change ‘example.com’ to whatever your domain is (do not put an ‘http://’ in there). For example, on my site I’ve changed it to

$site_domain = '.' . 'shtuff.us';

You can put a ‘www’ in your domain name here if you want to, but it’s not necessary and actually might cause some problems.

Next you’ll need to do one of two things. You can either take the stylesheet you want to have be your ‘default’ (the one people will get if they haven’t chosen a style through the switcher) and rename it ‘default.css’, or you can find this line (line #39) in the script:

$style = $_COOKIE['stylesheet'] ? $_COOKIE['stylesheet'] : 'default';

And replace it with the name of your stylesheet. So if you had a stylesheet called, say, ‘main.css’, you’d just replace ‘default’ with ‘main’. And then you can upload the script, because you don’t need to make any more changes to it.

Finally, go into your page templates and change any link and/or style tags you’re using on your pages to point to this script. So you’d want something like this:

<link rel="stylesheet" href="styles.php" type="text/css" />

At this point all you’ve really done is replaced Textpattern’s css.php with my styles.php, but now it’s very easy to do style switching. Say you have an alternate layout you want people to be able to choose, and it’s in a stylesheet called ‘othertheme.css’. Here’s what you do:

  1. Upload that stylesheet.
  2. Somewhere on one of your pages put a link like this: <a href="styles.php?style=othertheme">click here to change theme</a>.

That’s it. When you click that link the script will set a cookie to remember your theme choice, then send you back to the page you clicked from and serve you the theme you’ve chosen instead of the default. To switch back all you’d need is another link:

<a href="styles.php?style=default">click here to switch back to default theme<a>

It’s that simple.

For a live example of this in action, swing by my site and click one of the style-switching buttons in the sidebar; for now the only choice I offer is between a fixed-width and a fluid layout, but I plan to add some more options shortly.

And there’s one other useful feature that you can use if you want to: you can upload a stylesheet called ‘global.css’ and un-comment one line in the script to have it included with each request; that way you can have some styles which are used no matter what particular theme someone has chosen. There are more detailed instructions for that in the script itself, if anyone’s interested.

Article Request Count:

Archived [?]: orphaned: broken links

Posted here:
05 Apr 2005
Article modified:
14 Jul 2008

You may want to leave your comments/questions at the Forum thread for quicker feedback. Otherwise, comment away:

Your comment will NOT be submitted until you click the 'Submit' button on the next pageload.

Commented (7)

Thankyou for this! I’ve implemented it, and it works great.

One question: can the variable $style be used in other php scripts in the page template?
At the moment, no. Because the style script is referenced by a stylesheet link in the page, the page has already been generated and sent to the browser by the time this gets run.

I used to use this within a hand-rolled CMS, though, and had some rudimentary facilities for re-using it; in that version the variable was set in a site-wide configuration file, and would be overridden on each request if the user had a style cookie.

I don’t think it’d be too difficult to do something similar again and make part of this into a TXP plugin, and have that part set a $style variable or something similar that other elements of Textpattern could access. I should have some free time tonight, so I’ll poke around and try to put something together.
Ack. Work attack.

I’ll have to try to find time to work on this over the weekend.
wow, thank you so much for this!I’ve been looking for a CSS switcher for 2 days now that actually remembers what style sheet is chosen for all of the pages :D thanks
I’m trying to implement this on my new theme (being developed @localhost, so I can’t show) and the script is installed but with the link to the theme directory/styles.php in the stylesheet and link to change stylesheet, but when you click ‘change’ nothing happens, I can tell the script is working (sort of) because it doesnt take me to the error page (which is what wordpress normally does) but it just reloads th page with the same stylesheet, why? Everything is set up correct…
Colin Lewis:

Great job – this is the best style switcher available! So easy to implement. I can’t thank you enough for writing this.

Mark:

Where can I get the styles.php script? I couldn’t find it from the given link…

Subscribe to this article's comments RSS feed. [ ? ]   View Recent Comments across the site.

Would you care to write a comment or visit the forum discussion?

You know you want to visit the Archives.

Browse

Categories


Articles

There are also tag clouds, 'cause those are fun.
Published with Textpattern