Working with Style Catcher
Every style or theme should be in its own folder (with no subfolders) which should contain:
- The css stylesheet.
- Two thumbnails named
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.
- 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.