Applying a style to your site

Movable Type has many default Styles that you can apply to your blog. The blog below has no specific Style applied to it. Click the thumbnails on the right to see the blog with a new Style applied to it.

Reset to unstyled

Structure

The default MT Templates make use of a simple but flexible architecture to create the structure of a page.

The Header, Content and Footer comprise the three major content elements.

Content columns are formed by three divs named Alpha (main content), Beta (primary sidebar) and Gamma (secondary sidebar).

Layouts

Movable Type provides designers with 6 standard layouts as part of the default CSS that's included with all styles. All these layouts are achieved with the same html structure through the use of a class on the <body> element. You can easily modify these sizes to create the exact layout you want.

Modules and Widgets

The content of your blog also has a structure.

Within the Design > Template Sets interface, you can add, remove or reorder the widgets that are used on your blog. View all widgets on the page.

Reset to unstyled

Custom CSS

Now that you've seen the structure and default layouts, customizing MT to create a look that's all your own will be easier. In the textarea to the right, I've added a few lines of CSS. Click the button to see those styles applied to the blog. Once you've seen how it works, go ahead and make your own changes and click the button again.

Reset to unstyled