May 16, 2006
This article reprinted from the the TypePad Hacks Weblog. The original article can be found online:
© 2008, John T Unger
This Hack goes out to James Milstid who got me started on it and Jeff Noble, the most recent of many readers to request a top level menu hack. Additional props to Dynamic Drive CSS Library for the CSS code, and my pal Ffej who pointed me to Dynamic Drive in a completely random act of perfect timing earlier today. And to think that I was gonna lay this out with tables originally!
James posted a great tutorial a couple weeks ago on creating a top level navigation menu. I started playing with it, and was immediately struck with a bunch of possible variations that could be applied to his idea. The drawback? It ended up taking me two weeks to post about it because I was trying out all the possibilities… The Upside? It gave me a bunch of new ideas that allowed me to create the hack below, which I think more closely approximates the look of Word Press menus that TypePad users have been emailing me about. I'm going to repurpose James' instructions to create tomorrow's hack: a "sticky post" that allows you to put a text (and/or image) block at the top of each entry, below the header.
To create a dynamic horizontal menu as seen above, follow the steps in the extended post. You must have a TypePad Pro account and be using advanced templates in order to use this Hack.
Note: when altering your existing template code, it is a very good idea to copy your code and paste it into a text document in case you make a mistake and need to start from scratch. More tips on Code Hacking Safety can be found here: 10 Tips for Working with Advanced Templates.
Step One: Adding the CSS to Your Blog
- Go to DDCSS and choose a design from their list of CSS menus. I went with the Chrome Menu Bar, and will use that code for this example. If you use one of the other designs, you'll have to adjust some of the instructions below (such as file names for the images).
- The Menu Design Page at DDCSS is organized into sections: Demo, Images, CSS and HTML. You'll want to leave the page open so that you can access each section as needed.
- Below the demo image of the menu, you'll see the images needed for the background of your menu bar. Save these to your hard drive.
- Open another tab or window in your browser and login at www.typepad.com.
- Upload your background images using the File Manager. This is different than inserting an image into a post… Use the Instructions here if you need help.
- Click on the name of each image (not the link icon) to open them in another window or tab. Copy the URL for each image so that you can insert it into your CSS in steps 10-13.
- Click the Weblogs tab in TypePad and go to the blog for which you wish to create a horizontal navigation menu.
- If you are already using an advanced template, click the Design tab. If you are using a Basic template follow these instructions to convert your template to advanced.
- Under Advanced Templates, Click on your Stylesheet file. Scroll all the way to the bottom and paste the CSS code from DDCSS below where it says /* other css */.
- Find the line that reads:
background: url(media/chromebg.gif) center center repeat-x;
- Replace the text in the parenthesis with the URL you copied in step 6 for the image with the name chromebg.gif.
- It should now read
something like this (if you use as many directories as I do):
background: url(http://johntunger.typepad.com/typepadhacks/images/00/assets/menu/chromebg.gif) center
- Find the line that reads:
background: url(media/chromebg2.gif) center center repeat-x;
- Replace the text in the parenthesis with the URL you copied in step 6 for the image with the name chromebg2.gif.
- Click Save at the bottom of the page.
Step Two: Creating A Template Module for Your Menu
- Near the bottom of the page, locate and click Create New Template Module.
- Give your new template a name of
banner-headerby typing it in the Template Name field.
- Paste the following code into the Template Body field:
<!-- banner -->
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
- Return to the Menu Design Page at DDCSS and select the code in the HTML field. Paste it into the Template Body field below the two
- Replace the links provided in the example code with your own links and descriptions. You can have more or fewer links than the example provides. A standard rule of thumb for the human attention span is no more than seven links.
- When you have your links the way you want them, Click Save at the bottom of the page.
Step Three: Including Your New banner-header Module into Your Templates
- Return to the Design tab for your blog.
- Click on your Main Index Template. Replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$>
- Click Save.
- Return to the Design tab and click on your Archive Index Template.
- Replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$> and click Save.
- Return to the Design tab and for each of the following templates Category Archives, DataBased Archives, and Individual Archives replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$> Click Save for each one.
- You're done! Click Save and Republish your site (be sure that Publish all Files is selected in the popup window).
- View your blog in a new tab or window. If you don't see the menu
at the top, hold the shift key down the first time you reload the page.
Okay! You should now have a totally rockin' new menu at the top of your blog. Yay!