Working with Style Catcher

With 3.2 came the very nice StyleCatcher plugin that allowed you to easily manage and apply themes or styles to your blogs. This tutorial will show you how to make your repository work Style Catcher. Note, this tutorial won't show you how to create the library javascript that allows you to browse themes, it simply shows you how to make your themes discoverable by StyleCatcher. In this tutorial, I shall use the example of Vicksburg, the default theme with 3.2.

Every style or theme should be in its own folder (with no subfolders) which should contain:

  1. The css stylesheet.
  2. Two thumbnails named thumbnail.gif and thumbnail-large.gif. These two files are used in StyleCatcher as previews of the theme. The smaller thumbnail (thumbnail.gif) should have dimensions of approximately 120x84 while the larger thumbnail (thumbnail-large.gif) should have dimensions of approximately 280x210.
  3. Media files used within the theme e.g. images. References in the stylesheet should not contain any paths (it should be just the file name for example foo.gif).

Next, in your CSS file, you can specify various metadata that will show up in StyleCatcher when a user clicks the "Show Details" link. The following is an example taken from Vicksburg which should be added to the top of your CSS file, its mostly self explanatory.

/*
 name: Vicksburg Desert
 designer: Walt Dickinson
 designer_url: http://www.iwalt.com
 developer: Walt Dickinson
 developer_url: http://www.iwalt.com
 description: Default Theme
*/

Finally, you'll need to link all these themes up on your repository such that they're discoverable by StyleCatcher. To do this, simply add the following link on your repository page to point to the CSS file of each of your themes.

<link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/vicksburg_variations/theme-vicksburg_desert/theme-vicksburg_desert.css" />

You can see this in action on the Movable Type Style Library

Your themes can now be downloaded via StyleCatcher! A user can now just enter in the URL of your repository to get all your themes.

3 Comments

Ian Wells said:
on Feb 3, 2006 8:20 PM | Reply

Do you know where there is a list of publically or commercially available stylecatcher themes?

Ian

Ollie Bradley said:
on Dec 11, 2006 12:12 AM | Reply

Does anyone know where we can get a list of repository URL's for styles?

Jesse Gardner said:
on Dec 19, 2006 8:14 PM | Reply

Absolutely...

www.thestylearchive.com

Just put the url of the actual style into StyleCatcher and it will do the rest for you.