Registering Style Catcher Repositories

Movable Type allows for users to browse, select and download themes hosted on a remote website. These repositories, once setup (see below) can be registered within the application and listed alongside other style repositories or “categories” as seen in the screenshot below:

When a user clicks one of these categories, Movable Type will download and display a listing of all the styles found in that repository, along with thumbnails, author names, and theme names. This makes it easy for users to find styles that might interest them.

Registering a Style Library

Once a library or repository has been setup, the following plugin code sample will register a new library within the user interface:

sub init_registry {
    my $plugin = shift;
    $plugin->registry({
      stylecatcher_libraries => {
          'sixapart_mt4' => {
              url => 'http://www.sixapart.com/movabletype/styles/mt4/library',
              label => 'MT 4 Style Library',
              description_label => "A collection of styles compatible with Movable Type 4 default templates.",
              order => 1
          },
      }
    });
}

Configuration Properties

• url - the URL the repository is located
• label - the display name for the repository
• description_label - a detailed description for the style repository
• order - the sort key for the repository

Setting Up a Library or Repository

Style Catcher works by scanning a URL for a list of themes available at that URL (ie. view source of MT4 Style Library). Meta data is then extracted from each of the themes found there and displayed to the user so that they can more easily select the one they want.

To link to a theme from a URL so that Style Catcher can detect its presence and make it available through its user interface, add the following HTML (for each theme) to the HEAD of your HTML document:

<link rel="theme"
    type="text/x-theme" 
    href="http://www.somedomain.com/styles/mystyle/mystyle.css" />

The file that is linked to using this convention must be a valid CSS file. At the beginning of that file must contain a comment block that contains the meta data about that style. The header contains a sequence of name/value pairs. For example:

/*
name: Bonjour Chatette
designer: Mena Trott
designer_url: http://mena.typepad.com
developer: Randy Reddig
developer_url: http://shaderlab.com
*/
/* your CSS here */

The list of recognized and supported keys are:

• name - the name of the theme
• designer - the name of the designer or designers
• designer_url - the URL of the designer (this will be linked to)

Each theme that is linked to from the same URL must have a unique file name. For example, the following is NOT valid and will not work:

<link rel="theme"
    type="text/x-theme" 
    href="http://www.somedomain.com/styles/styleA/styles.css" />
<link rel="theme"
    type="text/x-theme" 
    href="http://www.somedomain.com/styles/styleB/styles.css" />

However, the following will work and is recommended:

<link rel="theme"
    type="text/x-theme" 
    href="http://www.somedomain.com/styles/styleA/styleA.css" />
<link rel="theme"
    type="text/x-theme" 
    href="http://www.somedomain.com/styles/styleB/styleB.css" />

Packaging a Style for Distribution

• All assets and files needed by a style (background images, css, etc) must be contained by a single directory
• All images referenced within a styles CSS must use relative paths

Notes

• The Style Catcher plugin must be enabled for this to function properly.