The Style Contest: For Movable Type, TypePad and LiveJournal

The base-weblog.css stylesheet is the base for the Six Apart Design Standard and hence must be included in your stylesheet. base-weblog.css can be downloaded here and this file must be the first thing included in your stylesheet:

@import url(base-weblog.css);

Images and other media used in your style should be relative to your stylesheet (placed in the same folder or a folder underneath the stylesheet). Doing so allows you to reference the media in the CSS using relative URLs, therefore ensuring maximum compatibility. For example:

styles/my_new_style/styles.css
styles/my_new_style/banner.gif

If I wanted to use banner.gif in my stylesheet, I could reference it thus:

.banner {
background-image: url('banner.gif');
}

To ensure your style functions correctly when viewed in The StyleCatcher Plugin, you'll want to add the following metadata after importing base-weblog.css.

/*
name: My Beautiful Style
designer: Melody Nelson
designer_url: http://www.melodynelson.com
description: A gorgeous blue them
layouts: one-column, two-column-left, two-column-right, three-column
*/


We've strived to make it easy for both our designers (to package a design) and our users (to install a design) and hence have opted for a single directory layout - i.e. all files including stylesheets and images are included in one single folder. For example:

theme-mystyle/
|__ base-weblog.css
|__ theme-mystyle.css
|__ banner.gif
|__ bullet.gif


The base-weblog.css stylesheet is the base for the Six Apart Design Standard and hence must be included in every distribution such that users have easy access to this file. base-weblog.css can be downloaded here. Learn how to include this file.