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.

Related Entries

2 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.

Leave a comment

what will you say?


Recently Elsewhere

Recent Entries

  • Say "Hello" to Daisy Amelia Hailey Reese

    In a way I am never to forget, our newest addition, Daisy Amelia Hailey Reese, was brought into the world at 5:16am on June...

  • Meet Melody

    People who know me, know that I love [Movable Type](http://www.majordojo.com/cgi-bin/mt/mt-search.cgi?blog_id=3&tag=movable%20type&limit=20). In fact I have devoted much of the last five years to the product and...

  • MOONSHOT

    On a recent trip to Chicago I stopped by a non-local mega-bookstore to look for a last minute gift for Harper as is required on...

  • Understanding Movable Type Template Sets

    Since releasing the [Hybrid News Theme](http://www.majordojo.com/2009/05/teaser-hybrid-news-theme-for-movable-type.php) I have been contacted by a number of people on the [ProNet mailing list](http://www.sixapart.com/mailman/listinfo/pronet/) asking me to shed some...

  • Obama's Speech to the Muslim World

    I implore everyone to watch Obama's speech. His entire speech is profound. It is moving in how it acknowledges and embraces our past, but...

badge-iheartmelody-white.png