Textpattern Resources at textpattern.org

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.