Modify the top navigation menu...

Sep 16, 2008 at 3:11 PM
Hi:

I was wondering if someone could give me some tips on how to modify the top navigation bar...the one that says: "Home | Archive | Contact | Subscribe | Log off | Filter by APML "

I also wanted to put a header graphic, is this possible?

Thanks,

Mitch

Sep 16, 2008 at 9:38 PM
Hi Mitchel,

You may edit the top navigation bar in a file called 'site.master', located in the theme folder.
For header graphic you may login as adminstrator, goto setting, scroll down and find the HTML header box.

Be very careful with the site.master file though, it may help if you have some basic knowledge of HTML and .NET.

James
Sep 17, 2008 at 11:46 AM
Mitch,

Using (as an example) the Brightside Theme, you need to edit the Themes/Brightside/site.master file adding new menu items after/before the current Home, Archive, Feed.

I use BlogEngine Pages to provide the target page. This means that your target navigation URL is a reference to ~/page/pagename.aspx and that you can use BE to edit that target page.

This is an example of the pages added at a customer site MostlySafeForWork.com:
        <!-- Menu Tabs -->
        <ul>
            <!--<li id="current">-->
            <li><a href="~/default.aspx" runat="server"><span>Home</span></a></li>
            <li><a href="~/page/Newsletter.aspx" runat="server"><span>Newsletter</span></a></li>
            <li><a href="~/page/Resources.aspx" runat="server"><span>Free Stuff</span></a></li>
            <li><a href="~/page/AboutUs.aspx" runat="server"><span>About</span></a></li>
            <li><a href="~/archive.aspx" runat="server"><span>Archive</span></a></li>
            <li><a href="~/syndication.axd" runat="server"><span>Feed</span></a></li>
            <!--<li><a href="~/page/your-page-here.aspx" runat="server"><span>Your link</span></a></li>-->
        </ul>   

Therefore the new menu items in bold above have been created as Pages. Each page has its unique URL as the Page name. You can also change the order to suit your own requirements.

Adding an image requires some editing and knowledge of the CSS used by your specific Theme. I use a FireFox/Mozilla Add-On called FireBug to understand and test a Theme's CSS. This would show you the Class (header, logo, slogan) used for the header/title etc. Alternatively try this free BE Extension for a rotating image used at my client's site above.

Hope that helps!

Nick
Sep 17, 2008 at 3:54 PM
James and Nick,

Thank you very much for the excellent information. I was able to do what I wanted!!!

Mitch