Theming SharePoint (4 of Infinite)

Michael O’Donovan brings us a blog post about custom (left) navigation in SharePoint. That is what I will be tackling today so I can move away from the ugly Tables and use a more common UL/LI scheme.

Here is my class:

But how do we install it? Good question John. Why thank you John! Copy it to your server. Open the GAC (C:\WINDOWS\assembly) and drag and drop. Now perform an IISRESET and add the control to your master page in the usual way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ Register Tagprefix="asp" Namespace="MMOinsite.SharePoint.Components" Assembly="MMOinsite.SharePoint.Components, Version=1.0.0.0, Culture=neutral, PublicKeyToken=abb33cdce6ddaae1" %>
 
...
 
<Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager"
    runat="server"
    QuickLaunchControlId="QuickLaunchMenu"
    ContainedControl="QuickLaunch"
    EnableViewState="false" >
    <div>
        <SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">
            <Template_Controls>
                <asp:SiteMapDataSource
                    SiteMapProvider="SPNavigationProvider"
                    ShowStartingNode="False"
                    id="QuickLaunchSiteMap"
                    StartingNodeUrl="sid:1025"
                    runat="server"
                />
            </Template_Controls>
        </SharePoint:DelegateControl>
        <asp:ListNavigation id="CustomListNavigation" DataSourceId="QuickLaunchSiteMap" runat="server" />
    </div>
</SharePoint:SPNavigationManager>

It is important to note that the UL/LI scheme is incredibly flexible. You can make them horizontal, drop down menus or keep them as standard vertical lists. Once the control is in place, the designer (CSS for the win here) can take over. For this reason, this type of navigation scheme can also make its way to the top navigation bar. But I will leave that up to you as I have got to get back to work!

Update (9:58): Here are the CSS styles I use with setting AppendLevel to true in the control tag of the master page. There is some pretty wacky CSS going on here and I am sure it can be cleaned up, but it works in IE7 and is a good place to start.

No Comments

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

You must be logged in to post a comment.

WordPress Themes