Link here to site

Movable Type is an extremely flexible content management tool. MT can publish content in many different formats, using any kind of text- based markup. Creating themes for Movable Type can be accomplished in a variety of methods based upon the markup of the templates. In this article we'll focus on html markup with css formatting.

The methods in this article assume that you are using one of the Default Template Sets from MT4, but these methods work equally well for other template sets.

Here's a glossary of terms that I'll use in this article:

• Template - A text file typically containing MTML (Movable Type Markup Language) which outputs content from MT that is marked up with HTML, XML, JavaScript, or other languages. These templates may have PHP, ASP, or languages which will be interpreted by the server when requested by a browser.
• Template Set - A group of templates that when used together can create a blog, a website, or any combination there of. Because templates are simply text-based, a template set may contain a Style (a CSS file) rather than linking to a style.
• Style - This term is used to refer to a CSS file and the images referred to in the CSS code.
• Theme - A theme is a the combination of a Template Set and a Style.
• StyleCatcher - the plugin bundled with Movable Type that provides an interface for browsing installed styles, remote style libraries, installing styles, and selecting styles. Can be found in MT4 navigation Design > Styles. (Hopefully to be updated in the near future to allow the selecting and installing of Themes; however at present installing Template Sets is not handled by StyleCatcher.)

Methods of Creating a Theme

Now that we have some common vocabulary, there are five methods of creating a theme in Movable Type. Here they are, in order of increasing complexity and power:

1. Point & Click
2. Extend a Style Catcher Style (let Design Assistant help!)
3. Roll Your Own Style
4. Roll Your Own Theme
5. Create Style Catcher Theme

NOTE: As you read through the following methods, keep in mind that you do not need to manage your Stylesheet within Movable Type.

The stylesheet can be maintained and modified on the server as a text file. Using MT to manage the file simply gives you the ability to edit the Stylesheet via MT.

These examples assume that you have Movable Type installed and a blog configured and publishing. Learn more about Installing Movable Type.

1. Point & Click

Using this method the blog theme will be composed of:

• a Default Template Set
• a theme from among the default themes or a style library

This is the simplest of all methods.

1. Navigate to StyleCatcher in the blog you'd like to update: Design > Styles 2. Select a category.
2. Click a theme thumbnail to preview the theme.
3. Optionally, choose a Layout in the preview panel.
4. Click "Apply Design" in the preview panel, and StyleCatcher will update and republish your Stylesheet index template.
5. View your blog and you'll see your new theme.

2. Extend a Style Catcher Theme (let Design Assistant help!)

This method allows the customization of a theme selected by Style Catcher using Point & Click method above.

When complete the blog theme will be composed of:

• a Default Template Set (possibly modified)
• a theme from among the default themes or a style library
• and either an inline CSS or by linking to CSS in a new index template

How to...

1. Use the "Point & Click" method above to select a theme that you'd like to modify.
2. Navigate to Design > Templates

3. Open the Stylesheet index template. You'll see something like the following:

   @import url(<$mt:StaticWebPath$>themes-base/blog.css);
   @import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);`
   

4. Add any styles that you want to after the base Blog styles and the Theme you just selected.

   For example you could make all the links blue and the page titles italic, you'd just add the styles after the @imports:

   @import url(<$mt:StaticWebPath$>themes-base/blog.css);
   @import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
   a { color: blue; }
   #page-title { font-style: italic; }
   

Design Assistant "Movable Type Design Assistant") can assist with this process by guiding you through the process of selecting a Style, selecting a layout, and creating the custom CSS you want. Copy and paste the css code under the imported CSS files in the Stylesheet index template as described in step 4 above.

Note: Because the Stylesheet template will be overwritten if another style is selected in Style Catcher, it is suggested that a new index template is created for your styles. Name this new index template something like like "My Styles" and set the output to something like "my-styles.css". Then instead of including the css styles directly into the Stylesheet index template as in step 4 above, include a link to your "My Styles" template like this:

    @import url(<$mt:StaticWebPath$>themes-base/blog.css);
    @import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
    @import url(<$mt:Link template="My Styles"$>);

Note: If Style Catcher is used to change themes after making modifications to the Stylesheet index template as described above, the Stylesheet index template containing the modifications will be overwritten and a backup of the template will be saved in the Backup Templates. To find it, navigate to Design > Templates, then choose the Quickfilter: Backup Templates.

3. Roll Your Own Style

Rolling your own style is just like extending a Style Catcher Style as described above in method 2, however instead of relying upon the existing theme base CSS (for layout and other basic CSS) and a specific Style Catcher Style style's CSS and images (for the look and feel), just use your own styles.

In the Stylesheet indext template, remove the @imports for blog.css and the $theme/screen.css files so that template simply imports the "My Styles" index template like this:

@import url(<$mt:Link template="My Styles"$>);

Alternately, you may simply place your CSS directly in the Stylesheet index template.

When complete, your theme will be composed of:

• a Default Template Set (possibly modified)
• a new Stylesheet and/or a modified Stylesheet index template

4. Roll Your Own Theme

Perhaps you're a savvy developer or designer, and you know exactly what you want. You've already created static mock-ups of your site in HTML (which includes a listing of entries) and you have a stylesheet that makes the content look pretty. Now you're want to integrate with Movable Type.

Because Movable Type is so flexible, there are many ways to do this.
In fact your stylesheet does not even need to be managed by Movable Type... however doing so will allow you to edit your CSS via web browser.

PRO TIP: Wanna be able to edit your Styles directly and also have the benefit of being able to edit via MT? If you do not have any MT tags in your stylesheet, set the Output File and Link to File fields to the same location. Then you can edit the template via MT or directly on the file system and they will both stay in sync. Just be careful not to edit both simultaneously or you may lose some changes.

When complete, this theme will simply be composed of:

• a template set modified from the default template set, of which one template is the stylesheet.

For simplicity I will cover the publishing the an index (homepage) and a CSS document referencing some images into the web_root. (If you want to publish the blog to another directory, update the paths in the examples below.)

web_root/    <--- or blog directory
    images/
        header.jpg
        body.jpg
    index.html
    styles.css

1. Since we're rolling our own, it'll be easiest to start with a new Movable Type blog. Once you've got the blog configured to the location you want to publish the blog, populate it with some content.

   Add a few entries and add a few comments on those entries. If you are going to have monthly archives, update the dates of some of entries to be in previous months. If you are going to have categories, create a few categories and add the entries to the categories.

2. In the directory where you'll be publishing your blog, create a directory called "images" and upload all images referenced in the stylesheet. For this example I'll assume that you have two images:
   body.jpg and header.jpg that are referenced in the stylesheet with absolute image paths:

   body { background-image: url(/images/body.jpg); }
   #header { background-image: url(/images/header.jpg); }
   

3. Next let's add your stylesheet to Movable Type. Go to Design > Templates and then open the default Stylesheet index template. (You don't need to use this template, you can create a new index template if you like, but that's beyond the scope of this simple tutorial).

4. Delete the exisitng code in the default Stylesheet index template template and paste your CSS in it's place. Ensure that the output file is "styles.css", that the template type is "styles" and then click "Save & Publish".

5. Now that the blog has content and the stylesheet (and it's images) are setup, let's build a homepage. Go to Design > Templates and then open the Main Index template.

6. Copy all the code starting with the Entries container tag <mt:Entries> and ending with the Entries container tag </ mt:Entries>. Depending upon which template set you are using the content will be slightly different. Here's a simplified version:

   <MTEntries>
       <h2><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>
       <div><$MTEntryAuthorLink$> on <$MTEntryDate format="%x % X"$></div>
       <MTIf tag="EntryBody">
           <$MTEntryBody$>
       </MTIf>
   </MTEntries>
   

7. Integrate this code with your HTML comp, replacing the title of a entry with <$MTEntryTitle$>, the body of the entry with < $MTEntryBody$>, the link to the full post with <$MTEntryPermalink $>, etc.

8. Once all the variable content is replaced, paste the code over the code in the Main Index template. (Note: You may want to back up the code from the Main Index template for reference, but note that you can also just create a new blog to refer to the default template code as well.)

9. Make sure that the path to the stylesheet is correct. It should be:

   <link rel="stylesheet" href="/styles.css" type="text/css" />
   

   or if you want to have mt manage the location of the Stylesheet, use the <$mt:Link$> tag with "styles" as the value of the template:

   <link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />
   

10. Once the Main Index template has been updated, click "Save & Publish".

11. To view the fruits of your labor, click the "View Published Template" link in the right sidebar on the Edit Template screen, or click the "View Site" icon in the navigation.

Now that your homepage is published, you can now update the HTML in other templates using steps 5 thru 9 as a guide. To make the addition of new templates even simpler, place code that is common among templates into modules; using header and footer modules will save you a lot of time when creating new templates.

5. Create StyleCatcher Theme

So there is a template set with an HTML structure that you are fond of and now you just want to create multiple Styles which can be applied to the template set.

StyleCatcher was built for MT3 and upgraded for MT4, but there are still some limits in what it can do. At present, StyleCatcher does the following things:

• selection of a Style from among the Default Styles available in $MT_DIR/mt-static/themes/
• viewing of Styles from a remote Style Library (or repository)
• import of a Style from a remote Style Library
• setting the default layout for a theme (from among the layouts the theme supports)

StyleCatcher does not yet do these things:

• allow selection of a Theme (package of Template Set and Style)
• filter available Styles based upon installed Template Sets, only let certain styles be applied when a certain template set is installed
• install a template set as part of choosing a theme
• allow a Style to require to default stylesheets such as base.css and layout.css
• allow a Style to define the code that should be included in the Stylesheet index template (base theme css, layout css, print styles, mobile styles, etc.)

Thus, if you'd like to create a few themes that can be selected and applied to a blog via StyleCatcher you have a few options:

1. Add new Styles to $MT_DIR/mt-static/themes/
2. Create an external theme library. More info on Registering Style Catcher Repositories

Since the second option above builds upon the first and is described in more detail on the Registering Style Catcher Repositories page, I'll simply describe the first option.

A StyleCatcher Style is composed of a CSS document and images inside a folder. Here's what makes up the Minimalist Red style:

minimalist-red/           <-- folder
    header.gif            <-- header background image
    screen.css            <-- css document
    thumbnail-large.gif   <-- large thumbnail for StyleCatcher  (278px x 209px)
    thumbnail.gif         <-- small thumbnail for StyleCatcher  (120px x 90px)

Once you have Rolled Your Own Style (as in option 3 above) you can convert it to a Style which can be selected via StyleCatcher.

1. Create a directory in $MT_DIR/mt-static/themes/ called "my- awesome-style".
2. Create a CSS document called "screen.css" ("screen" because the CSS will most-likely be for presentation on a screen, as opposed to print or mobile) and place it in the "my-awesome-style" directory.

3. Edit the top of the CSS document to include the following code:

   /*
   name: 
   designer: 
   designer_url: 
   layouts: 
   */
   

   Enter values for name, designer, and designer_url as appropriate for your theme's name, your name, and your site. These values are simple strings.

   The value of layout is special. This line lists the layout options supported by the stylesheet, separated by commas. When a user selects a style in StyleCatcher, they are presented with the list of layout options that the style supports. When a layout is picked, MT will set the value of a special template variable called page_layout with the name of the operative layout option. This variable can then be referenced in your templates to set the class of the body element of your pages, as in <body class="<$mt:var name="page_layout"$>">.

   Any values can be used for naming layout options, but the following values have localized phrases associated with them in MT:

   layout-wtt  <-- Wide, Thin, Thin
   layout-twt  <-- Thin, Wide, Thin
   layout-wt   <-- Wide, Thin
   layout-tw   <-- Thin, Wide
   layout-wm   <-- Wide, Medium
   layout-mw   <-- Medium, Wide
   

   So, when finished with this section of your CSS, you might have values like the following if the stylesheet supports all of the layout options defined in MT_HOME/mt-static/themes-base/blog.css CSS document. ()

   /*
   name: My Awesome Style
   designer: Awesome Designer
   designer_url: http://awesome-designer.com
   layouts: layout-wtt, layout-twt, layout-wt, layout-tw, layout-wm, layout-mw
   */
   

4. Place any images used by the Style in the "my-awesome-style" directory and make sure that the images are reference relative to the css document "screen.css". If you were referring to an image called header.gif which is in the same directory as the CSS document, the CSS code for referring to this images would be similar to this:

   #header { background-image: url(header.gif); }
   

5. Go the home page of the blog to which you want to apply this styles and then navigate to Design > Style and then scroll through the Default Styles until you see "My Awesome Style". Select layout.

6. Select "My Awesome Style", choose a layout, click the "Apply Design" button.

7. View your blog to see the new theme applied or got to Design > Templates and view the Stylesheet index template to ensure that the content looks something like this:

   @import url(<$MTStaticWebPath$>themes-base/blog.css);
   @import url(<$MTStaticWebPath$>themes/my-awesome-style/screen.css);
   

   Note: If you are not using blog.css, you may need to delete it. Hoping to fix this for a future release of StyleCatcher.

8. Once you can view your site, take a screen shot to create the thumbnails. Scale the screen shot to 278px x 209px for thumbnail- large.gif, and scale to 120px x 90px for thumbnail.gif.

9. Save the thumbnail images in the Style folder and your StyleCatcher Style is complete.

10. (Optional) Create variations on your theme using different colors.

    Duplicate the my-awesome-style folder and for your winter variation name it "my-awesome-style-winter". Open the screen.css file and, instead of updating the colors in the CSS, append additional CSS that will override the original colors. This way, you can later make modifications across all your variations more easily via search-and- replace.

Byrne Reese - 3 August 2007 - 3 Comments