Take A List Apart’s article on style sheets, MoveableType’s set of default styles, one geek, and one holiday weekend, and you get…Switchable Type. Click on the various links under the Style header in the menu (probably directly to the right, unless you’ve strayed from the main page or have already changed styles).
How to do it yourself: (You may have to right-click on some of the following links and save them, if your browser won’t display them.) First, you need a set of CSS stylesheets to switch between. I used a couple that I had already made for MT, plus the full set of seven from the MT website. Each of the stylesheets must be listed in the header of the pages (that is, at the top of each page template in MT), in the usual place for LINK tags, and must have a title element:
<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” title=”Default” />
<link rel=”stylesheet” href=”<$MTBlogURL$>mtclean.css” type=”text/css” title=”MT Clean” />
<link rel=”stylesheet” href=”<$MTBlogURL$>mttrendy.css” type=”text/css” title=”MT Trendy” />
<a href=”#” onclick=”setActiveStyleSheet(’Default Khaki’); return false;”>Classic Khaki</a>
<a href=”#” onclick=”setActiveStyleSheet(’MT Clean’); return false;”>MT Clean</a>
<a href=”#” onclick=”setActiveStyleSheet(’MT Trendy’); return false;”>MT Trendy</a>
That’s all it takes. Feel free to grab my copies of the MoveableType style sheets as well as my own stylesheets for MT, or, if you’re working on a switcher for a website rather than a blog, take a look at the style section of my site for more generic style sheets.
The most irritating part of the process is editing each of your MoveableType templates to include the LINK tags and the SCRIPT line. For full style effect, you should do every template, including the ones you click to edit and the hidden search template. There’s a lot of clicking, pasting, and saving involved. I ended up linking all the templates to external files and making my own template modules to simplify matters, but even then it was the most time-consuming part of the process.
Templates are the peskiest part of blogging. MT is ahead of the pack, but it would help if all the templates were linked to files automatically the way the search template is. They could at least provide a power-editing mode for templates (indices, archives, and modules) so you could create them or link them to files in one fell swoop.
Another pesky MT problem I had was with the blog description, right under the blog title. The on-page blog title became an H1 header in the latest MT templates, which was all right and compliant and good, but the description beneath it was wrapped in SPAN tags, rather than DIV tags. I went through some trouble trying to figure out why I couldn’t reduce the H1 margins (at least in Chimera, my home browser), until I switched that SPAN to a DIV. My change doesn’t seem to do any harm to the MT stylesheets - I’m not sure whether those work properly without my change, or, if they do, why they do.
I’ve made a new stylesheet for the occasion: Lavender’s Blue. One other thing I should do is rewrite styleswitcher.js so that it forces Netscape 4.x to use the stylesheet that’s safe for old browsers. I’m not sure old browser-users can use the switcher at all - I’ll test that tomorrow. If they can, I may leave it up to them to click the link for paleo-browsers. Browser detection is not my cup of tea. I’d rather make more stylesheets.