How to add new Tabs/Content

Topics: Themes
Jul 31, 2008 at 9:36 AM
Edited Jul 31, 2008 at 9:40 AM
I found a number of snippets in these forums which eventually led me to adding new Tabs/Page Content to a default BE site. I thought it might help any newbies (like me) who want to start customizing their site to add other pages (e.g. About, Donate, Shop, Resources, etc.).

I put together this site for a buddy and have used the experience to learn more about BE and how this might (where appropriate) replace CommunityServer-based sites.

1. Create New Page Content
You could create your new page using your HTML editor and store this to site root as a fixed page; but instead of a fixed page, why not add the page so that it can be edited later using the existing BE page edit capability. BE of course supports blog posts but also includes a content type of a Page. These are stored pages containing your customized content that appear within your BE site -- i.e. with (Brightside) the Left-Hand Column containing Tags, Categories, etc. You create a Page by logging into your site and clicking Pages. Create a New Page and it's content. Before I click Save for that new Page I optionally format the Slug (Extract from Title) so that I'm working with an easy Page name. e.g. I would change the Slug "About-Us" to "AboutUs". Just a preference; that's all. Once your page has been saved, take a note of its page name. e.g. for my new content AboutUs the page URL is site.com/page/AboutUs.aspx.

2. Add the New Tab/Link to Content
Using the excellent Brightside theme, find and edit Themes/Brightside/site.master.
Locate this section of code, and insert your new Tab content (in bold) as shown below.

        <!-- Menu Tabs -->
        <ul>
            <!--<li id="current">-->
            <li><a href="~/default.aspx" runat="server"><span>Home</span></a></li>
            <li><a href="~/archive.aspx" runat="server"><span>Archive</span></a></li>
            <li><a href="~/page/AboutUs.aspx" runat="server"><span>About</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>

The tilde (~) character loads the page-navigation from the site root /. Finally, the vertical order of these items determines their Left-Right appearance within your page. You can see the results of this addition here. Note that I've added another page for "Free Stuff" where a formatted the Page name as "Resources". This entry is just another line under my AboutUs entry like so:
<!-- Menu Tabs -->
        <ul>
            <!--<li id="current">-->
            <li><a href="~/default.aspx" runat="server"><span>Home</span></a></li>

            <li><a href="~/archive.aspx" runat="server"><span>Archive</span></a></li>
            <li><a href="~/page/AboutUs.aspx" runat="server"><span>About</span></a></li>
            <li><a href="~/page/Resources.aspx" runat="server"><span>Free Stuff</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>   

Hope that Helps! Nick