Creating a better toolbar on your blog
When I converted the WordPress theme NightVision into a Movable Type style, I had to create a menu bar. By default, the Personal Blog template set does not support such a thing, but it's not very hard to add. In fact, when you use the LinkRoller plugin that Arvind created, implementing and managing one is really easy. Here's how.
All this menu bar is, is a divider with an unorder list. Before you get started, download the LinkRoller plugin and install it on your blog.
Now, go to Create->Link and create a few links and tag them "toptoolbar." The reason that these links are going to be tagged is that it will make them identifiable to the <mt:Assets> tag. Now, create a template module in the Templates management area with the following content:
Save that module as "MenuBar", and then go to each archive template and index template that is a web page, and add <mt:Include module="MenuBar"/> to the space between <div id="content-inner"> and <div id="alpha">. Rebuild your blog, and you'll now have a toolbar the top. However, in order to make it display properly, you will have to add some style information to your blog. If you don't want to edit the files that are bundled under mt-static, create a new index template called "StyleSheet Supplement" and add some CSS instructions based on the following example:
Tell it to output as "stylesupplement.css" and save the template. Then, open the Stylesheet index template, add @import url(<mt:BlogURL/>stylesupplement.css);. Save and rebuild.
Now, go to Create->Link and create a few links and tag them "toptoolbar." The reason that these links are going to be tagged is that it will make them identifiable to the <mt:Assets> tag. Now, create a template module in the Templates management area with the following content:
<div id="menu">
<ul>
<mt:Assets tag="toptoolbar" sort_order="ascend" sort_by="label">
<li class="page_item">
<a href="<$mt:AssetURL$>"><$mt:AssetLabel$></a>
</li>
</mt:Assets>
</ul>
</div>
Save that module as "MenuBar", and then go to each archive template and index template that is a web page, and add <mt:Include module="MenuBar"/> to the space between <div id="content-inner"> and <div id="alpha">. Rebuild your blog, and you'll now have a toolbar the top. However, in order to make it display properly, you will have to add some style information to your blog. If you don't want to edit the files that are bundled under mt-static, create a new index template called "StyleSheet Supplement" and add some CSS instructions based on the following example:
#menu
{
width: 950px;
height: 60px;
margin-bottom: 30px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
text-transform: uppercase;
}
Tell it to output as "stylesupplement.css" and save the template. Then, open the Stylesheet index template, add @import url(<mt:BlogURL/>stylesupplement.css);. Save and rebuild.
No TrackBacks
TrackBack URL: http://www.codemonkeyramblings.com/mt/mt-trackback.cgi/669


Leave a comment