Add a Menu Bar to MT's Default Themes

I like the idea of a top navigation bar and today I went about adding one to my modified Unity Blue theme by following Elise's instructions for customising the default style in MT4.

The code for the menu bar is modified from Majordojo's Cutline Theme. It's really quite easy to implement.

Go to Design > Templates > Template Modules. Click on the Header template.

Place the following code between <div id="content-inner"> and <div id="alpha">.


<div id="delta"> 
<div id="delta-inner"> 
<div class="menu"> 
<ul> 
<li><a href="<$MTBlogURL$>">Home</a></li> 
<li><a href="<$MTBlogURL$>archives.html">Archives</a></li> 
<li><a href="<$MTBlogURL$>elsewhere.php">Elsewhere</a></li> 
<li><a href="<$MTBlogURL$>about.php">About</a></li> 
<li><a href="<$MTBlogURL$>contact.php">Contact</a></li> 
<li class="rss"><a href="<$MTBlogURL$>rss.xml">RSS</a></li> 
</ul> 
</div> 
</div> 
</div>

Save the changes.

Go back to your Index Templates, and choose to create a new index template. Here you can follow the instructions on Learning Movable Type for creating a custom stylesheet. Be sure to name the link in styles.css correctly.

I ran into trouble here when rebuilding my site and had to hard code <link rel="stylesheet" href="<$MTBlogURL$>styles.css" type="text/css" /> into my Header Template because the path had changed to my new custom stylesheet, which of course is only part of the site's style.

This is the css code for your new custom stylesheet.


#alpha-inner {
   padding-top: 30px;
}

#delta {
   border-top: solid 1px #6699cc;        
   border-bottom: solid 1px #6699cc;
   width: 100%;
   padding: 10px 0 10px 0;
   background-color: #fff;
}

#delta-inner {
   overflow: hidden;
   padding-right: 20px;
   padding-left: 20px;
}

#delta ul {
   margin: 0;
   padding: 0;
}

#delta li {
   float: left;
   text-align: left;
   list-style-type: none;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-serif;
   text-transform: uppercase;
   font-weight: bold;
   margin: 0;
   padding: 0;
   margin-right: 30px;
} 

#delta li a {
   text-decoration: none;
   color: #295684;
}

#delta li a:hover {
   text-decoration: none;
   color: #69c;
}

#delta li.rss {
   float: right;
   width: 100px;
   text-align: right;
   background-image: url(icon_rss.gif) repeat no-repeat right center;
   padding: 0 20px 0 0;
   margin: 0;
}

Change the colours to suit your own blog and remember to copy the rss image to the same directory that you saved the custom template.

Good luck!

Leave a comment

About

I love to play with different features of Movable Type and am constantly trying out new ideas, plugins, pieces of code, themes, etc.
» More...

Recent Entries

  • Notepad Chaos: A Template Set for Movable Type

    Movable Type users looking for something different for their personal blog will love this template set. The design features a notebook look on a striking...

  • Using the Command Line for Fast Upgrades

    My site is hosted on "Dreamhost":http://www.dreamhost.com/rcgi?277567, and the reason I signed up with them was so I could use a command line for direct access...

  • Computer Jargon

    A post on the "MT forum":http://forums.movabletype.org/2008/08/cruft-free-url-annoyances.html called _Cruft-free URL annoyances_ got my attention today and sent me scurrying for a definition. According to Wikipedia, "Cruft":http://en.wikipedia.org/wiki/Cruft...

  • Do I Need To Go Pro?

    With the release of Movable Type Open Source version 4.2, co-inciding with the release of Movable Type Pro, the biggest decision now is which...

  • Up and Down On a Learning Curve

    I've made a few changes to the theme, and noticed a couple of things that happened when I transferred this blog rather than just updating...