Moveable Style

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” />

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:

<script type=”text/javascript” src=”<$MTBlogURL$>styleswitcher.js”></script>

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:

<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.

7 Responses to “Moveable Style”

  1. Caff Says:

    I don’t know if this is a new problem or not, but your category archives seem to be screwed up. They all link to the same file.

  2. Leonieke Says:

    is Movabletype taking over the world? Thanks for the changable styles explanation … as soon as I’ve recovered from installing MT, I’ll look into it ;o)

  3. Jemima Says:

    Yes, MT is taking over the world.

    Thanks for the heads-up, Caffey - the archive configuration disappeared during a little template wrestling incident, and when I remade them I put one path in the wrong place. They should be fixed now.

  4. SaRa Says:

    Pretty cool. Thanks for the explanation, I’ve been wondering how to do something like this for a while. I may even take a shot at it sometime.

  5. Knowledge Says:

    Dare I say ‘argh’?
    would you call this a busy day or a boring day?

  6. Says:

    Skin Chooser for MovableType
    Moveable Style or Switchable Type, mucho coolness. Now to implement.

  7. Mind of Knowledge Says:

    Other people’s blogs
    See that wonderful list of links on the right hand side? It’s where I go for my daily fixes of