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