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!

3 Comments

Ah did'nt work I just got a blank, I was using the Sf template with Movabletype...


MT is more hard to understand as I knew before.


i'm using classic blogger Can anyone tell me how to put comment box like this comment to my blog

i need the code ..

http://elpizalblogger.blogspot.com


Leave a comment



Recent Entries

  • Send Entries Using HTML Formatted Email

    There used to be a plugin for earlier versions of Movable Type called "MT-Mail-Entry":http://www.nonplus.net/software/mt/MT-Mail-Entry.htm that allowed you to send friends a HTML-formatted email that included...

  • All Comments Not Getting Published

    I had a problem viewing some of the comments on one of my posts. I thought it must be a comment limit somewhere in the...

  • MT 4.23 Update Released

    Movable Type has released a security upgrade that fixes XSS vulnerabilities, and recommends updating to 4.23 as a mandatory. The vulnerability hasn't been exploited yet,...

  • Updated Joost Action Streams Plugin

    The plugin for [Joost Action Streams](http://mt4.juneeonline.com/babble-on/archives/2008/10/joost-action-streams-plugin.php) has been updated to include favourites. If you've previously installed this plugin I recommend deleting Joost from "Other Profiles"...

  • Adding the ShareThis Button to Mid-Century

    There's a tutorial on Rob Kenny's The Composing Stick with instructions for adding AddThis or ShareThis buttons to your posts. After receiving a request today,...

OpenID accepted here Learn more about OpenID