Speak Stiltedly and Wear a Yellow Shirt

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:

If you’re using Mozilla, you can already switch between these styles from the View menu. Otherwise, you’ll need a javascript program to do the actual switching, styleswitcher.js. The javascript must be loaded by every page in the blog (or site) so it should be left in a separate file and loaded with a line in the header (near the LINK tags) thus:

Next, you need the links that will run the program when clicked. As an added bonus, the javascript program includes a cookie to keep track of which style has been selected, and remembers it from page to page. All pages must include the javascript itself, and the LINK tags, but the switching links can be put on just the main page. These HTML links call the function setActiveStyleSheet, according to the title listed in the LINK tag:

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.

This entry was posted on Monday, October 14th, 2002 at 10:58 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.