If you have multiple sub-sites, and/or various projects or links, don’t you often wish you could just simply go to the specific site changing tabs instead of opening a separate browser window and entering the URL? Navigators allow you to add tabs to your pages, and from those pages, you’re able to easily get back to where you were. And master pages provide the look and feel that you want for all of the pages in your site. By changing the styles or content of the master page, you can quickly customize the appearance of an entire site and use it for other pages.

Example: The Community Central site has built-in tabs. You want to add a link to a new “Workgroup” site. You want to be able to navigate from the “Workgroup” site back to the Community Central Site via a tab.

Note: Similar information can be found here: http://store.bamboosolutions.com/KB/article.aspx?id=12891. It’s also attached to this post with the custom master page v4_custom.master that you’re invited to download and use.

Resolution:

This blog provides the steps on how to add tab strips to the master page.

• How to Add Navigator Tab Strip Web Part
• Adding Navigator Tab Strips to the Master Page
• Customizing the Tab Strips on the Master Page

Related Information

• For more information about Navigators, please read the online documentation.

How to Add a Navigator Tab Strip Web Part

1. From the site where you want to have the Navigator tap strip, edit the page and select Add a Web Part. Select Bamboo Navigator Tab Strip:





Next, add items to the Bamboo Navigators list. Note: Make sure to use relative path:



2. Edit the Web Part. Enter the relative path of where the Bamboo Navigators list resides. Select a skin. In this case, the PMCClassic skin is selected:

   

The tabs on the default.aspx page looks like this:

Adding Navigators Tab Strips to the Master Page

1. In SharePoint Designer, open the site whose master page you want to modify. From the default.aspx page, right-click and select Edit File in Advanced Mode:

   

2. At the top of the page, copy the register code of the Web Part. Note: You can also paste it to Notepad, and copy later into the master page.

This line:

   1: <%@ Register TagPrefix="WpNs0" Namespace="Bamboo.WebParts" Assembly="Bamboo.Navigators, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2cc91efae2d531be"%>

   2:  



3. Copy the Div line for the tabs. Put it above the “SharePoint:DelegateControl…”. Note: You can paste it to Notepad to copy later into the master page.
1: <div id=”bb-tabtrips” class=”s4-notdlg”>

2: <div id=”bb-rowtab”>

3: <div id=”bb-Navigators” class=”s4-notdlg”>

4: <wpNs0:NavigatorTabStrip runat=”server” ImportErrorMessage=”Error importing Web Part” DisplayColumnName=”Title” DisplayColumnDescription=”Description” AllowHide=”True” SiteURL=”./” DisplayListName=”Bamboo Navigators” ExportMode=”All” PartImageLarge=”” DisplayColumnIconURL=”IconURL” DisplayColumnParentMenu=”ParentMenu” MissingAssembly=”Error importing Web Part” FrameType=”None” ID=”g_effb272c_df01_46b4_80ea_2ee4824197e3″ IsIncludedFilter=”” DetailLink=”” AllowRemove=”True” DisplayColumnSortOrder=”SortOrder” PartOrder=”2″ ApplyChanges=”True” HelpMode=”Modeless” IsIncluded=”True” DisplayViewName=”Navigators View” Description=”Bamboo Navigator TabStrip” FrameState=”Normal” DisplayColumnURL=”URL” Dir=”Default” AllowZoneChange=”True” AllowEdit=”True” AllowMinimize=”True” Title=”Bamboo Navigator TabStrip” LanguageForDisplay=”1033.English” DisplayListGUID=”1db60e17-9d81-4341-8a63-6f7f959f68b3″ DisplayViewGUID=”3430293f-ea51-4849-99b3-f9b130553123″ HelpLink=”” PartImageSmall=”” AllowConnect=”True” UseOffice2007RibbonUI=”False” ConnectionID=”00000000-0000-0000-0000-000000000000″ ExportControlledProperties=”True” ChromeType=”None” SuppressWebPartChrome=”False” DisplaySkin=”PMCClassic” IsVisible=”True” ZoneID=”Left” _MarkupType=”vsattributemarkup” __WebPartId=”{EFFB272C-DF01-46B4-80EA-2EE4824197E3}” WebPart=”true” Height=”” Width=””>

5: </wpNs0:NavigatorTabStrip>

6: </div>

7: </div>



4. Make a copy of the v4.master. Check out the v4.master page and select Edit File in Advanced Mode. Copy the code for “register” and “div” to the v4.master. Save and Check In. Note: You can also download the attached v4.master file as your template master page for SharePoint 2010.

   

   You will see this message:

   

   Make sure to select the updated v4.master page as the default master page and custom master page:

   

From the browser, go back to the site and you should see the tab strip on the right-hand side of the page:

Customizing the Tab Strips on the Master Page

Note that after you have modified the master page, the tabs do not display fully on the page. The top gets cut off. In order to fix this, it’s necessary to add an additional CSS stylesheet.

1. From SharePoint Designer, check out the v4.master page and select Edit File in Advanced Mode. Add the tags for the CSS stylesheet as follows:

Note: Add the lines right below the “SharePoint:SPHelpPageComponent…”

1: <style type=”text/css”>

2: .s4-trc-container-menu{

3: margin:0px;

4: }

5: .s4-trc-container-menu #bb-signin{

6: float:right;

7: }

8: .s4-devdashboard{

9: margin:0px;

10: width:20px;

11: }

12: #bb-signin .s4-help{

13: float:right;

14: margin:0px !important;

15: }

16: #bb-tabtrips{

17: clear:right;

18: }

19: #bb-rowtab{

20: float:right;

21: }

22: #bb-Navigators{

23: margin-top:8px;

24: }

25: </style>



You should see the site adjusted like this:



You can also use the PMC Classic skin adding the CSS stylesheet tags as follows:

1: <style type=”text/css”>

2: .s4-trc-container-menu{

3: margin:0px;

4: }

5: .s4-trc-container-menu #bb-signin{

6: float:right;

7: }

8: .s4-devdashboard{

9: margin:0px;

10: width:20px;

11: }

12: #bb-signin .s4-help{

13: float:right;

14: margin:0px !important;

15: }

16: #bb-tabtrips{

17: clear:right;

18: }

19: #bb-rowtab{

20: float:right;

21: }

22: #bb-Navigators .RadTabStrip_PMCClassic{

23: font:11px Verdana, arial, tahoma;

24: height:auto !important;

25: }

26: #bb-Navigators .RadTabStrip_PMCClassic .level1{

27: background-image:none !important;

28: }

29: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a{

30: padding-left: 0px;

31: color: #ffffff;

32: text-decoration: none;

33: line-height:normal !important;

34: border-left: #e1e1e1 1px solid;

35: }

36: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a:hover{

37: color: #FFFFFF !important;

38: background-image:none !important;

39: text-decoration:none !important;

40: line-height:normal !important;

41: }

42: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a .innerWrap{

43: padding:0 15px;

44: }

45: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected{

46: line-height:normal !important;

47: color: #FFFFFF;

48: border-left:none;

49: border-right:none;

50: }

51: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected .innerWrap{

52: background-image:none !important;

53: color: #FFFFFF !important;

54: }

55: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected:hover{

56: color: #FFFFFF !important;

57: }

58: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a.selected:hover .innerWrap{

59: background-image:none !important;

60: }

61: #bb-Navigators .RadTabStrip_PMCClassic .level1 li a:visited{

62: color: #ffffff;

63: }

64: #bb-Navigators{

65: margin-top:8px;

66: }

67: </style>

It will look like this:

You have now customized your site with the Navigators tabs to allow you and your users to easily get to the other sites. Note: If you are using these steps to add tabs for the PM Central master page, please make sure to use the instructions in the Customization PM Central where you only modify the nested master page only. You can also delete the Navigator TabStrip in the middle of your website selecting Delete Web Part.

APPLIES TO:

• SharePoint Foundation 2010 and SharePoint Server 2010
• Navigators for SharePoint 2010
• SharePoint Master Pages
• SharePoint Designer 2010