Cutline for Movable Type, TypePad and LiveJournal

As an exercise in seeing how easy it might be to replicate other popular blog designs using Six Apart's HTML and CSS Standard, I turned to what I think is a very simple and elegant design that came out of the WordPress designer community: Cutline, originally designed by Chris Pearson.

My goal was to replicate it as closely as possible within the constraints of the standard. The only tricky part was the fact that the Six Apart template does not come equipped with a nav strip of any kind. So I needed to add that manually. But even without it, the design comes across as an almost perfect redux.

So introducing Cutline for Movable Type, TypePad and LiveJournal:

cutline_sm.png

Download Cutline for Movable Type, TypePad and LiveJournal

How to install Cutline

TypePad - This design is easily used on TypePad by selecting the "Two Column Left" blog layout and then cutting and pasting Cutline's CSS into the Custom CSS field. You will all need to make sure you upload Cutline's images into your account via TypePad's File Manager.

Movable Type - This design will soon be made available via The Style Archive which integrates nicely with Movable Type's StyleCatcher plugin. In the meantime, find the layout you want to use and the upload Cutline into your blog's root directory.

LiveJournal - Select the "Bloggish" S2 Layout for your journal. Then under the "Advanced" tab found within the "Edit Journal Style" area, cut and paste Cutline's CSS into the Custom CSS field.

How to add the Navigation Menu

This is optional.

The Six Apart HTML/CSS standard does not contain all the necessary constructs to support a perfect port of the Cutline theme. To accommodate the Cutline navigation menu that contains "Home," "Archives" and "RSS" link, one must insert the following HTML (and MT Template Code) just above the #alpha div:

<div id="delta">
  <div id="delta-inner" class="pkg">
    <div class="menu">
      <ul>
        <li><a href="<$MTBlogURL$>">Home</a></li>
        <li><a href="<$MTArchiveLink$>">Archives</a></li>
        <li class="rss"><a href="<$MTBlogURL$>/rss.xml">RSS</a></li>
      </ul>
    </div>
  </div>
</div>

Once in place your template should more closely resemble the Cutline Theme.

Recommended Entries

9 Comments

Great job! You really fooled me into thinking that this site was running WP (me knowing that you work for Six Apart).

Thanks for sharing.

--to add the Navigation Menu I just creat a Modules named "Menu",and insert in the templates.

It's always upsetting to hear about these kinds of things.

WOW. I found this site on google poking around for something else entirely, now I'm going to have to go back and read through the old posts :) So long my free time this morning, but this was a truly great find!

Thanks for the tips on How to add the Navigation Menu!!

Thanks for this share, and good continuation for this blog.

Leave a comment

what will you say?


Monthly Archives

Recent Comments

Close