Wednesday, January 28, 2009

Hide #1 tab in Top Navigation (Home)

OOTB SharePoint will not allow you to remove the 1st tab on the main navigation through the UI. To do this you can simply use the following CSS below and add it to your custom CSS or use the CEWP page style method to just make the change just for that page.

If you look at the code, you will notice that each top navigation item has an ID.

  • zz1_TopNavigationMenun0 (Home Tab)
  • zz1_TopNavigationMenun1 (Tab #2)
  • zz1_TopNavigationMenun2 (Tab #3)
  • zz1_TopNavigationMenun... (Tab Etc)

Since the home tab is always #1 it is always given the ID of "0"

CSS Code:

#zz1_TopNavigationMenun0 {
display: none !important;

Friday, January 16, 2009

Creating a Two Tier Global Navigation

Two tier navigation is not a new concept and has been out for quite a long time. However SharePoint OOTB does not allow you to have a global navigation that spans multiple site collections.

Here are a few examples of a multi tier horizontal navigation.

Example 1: MSDN: Microsoft Developer Network

Example 2: Fed Ex

Example 3: Wall Street Journal

During a recent project I was given the task to create a global navigation that had two tiers like the examples above.

After some investigation my friend Sahil Malik had put together a great blog about creating a consistent navigation across site collections. (Thanks Buddy)

Well this is great and all but his code replaced the OOTB navigation with a custom one. So after some hard thinking I figured out that you could create your own control that drove the tier 1 global navigation (Across site collections) and a tier 2 local navigation (OOTB) that was security trimmed.

To get this to work you should use Shail's post as a guide for code but here are the basic steps:

  • Go to: \inetpub\wwwroot\wss\VirtualDirectories\yourwebappname
  • Create a back up of the web.config on each of the web applications that you want the two tier navigation
  • Add the following to the custom web.config file

<add name="CustomXmlContentMapProvider" siteMapFile="_app_bin/mainMenu.sitemap" type="Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />

  • Go to: \inetpub\wwwroot\wss\VirtualDirectories\yourwebappname\_app_bin
  • Create a file called "mainMenu.sitemap" and add in your navigation simular to something like below

<?xml version="1.0" encoding="utf-8" ?>
    <siteMapNode title="Tab 1 Home" url="/Pages/Default.aspx">
        <siteMapNode title="My Site" url="">
            <siteMapNode title="My Profile" url=""/>
        <siteMapNode title="Collaboration" url="/Collaboration/Pages/Default.aspx"/>
        <siteMapNode title="News" url="/news/Pages/Default.aspx">
            <siteMapNode title="News 1" url="/news/news1/Pages/default.aspx"/>
            <siteMapNode title="News 2" url="/news/news2/Pages/default.aspx"/>
            <siteMapNode title="News 3" url="/news/news3/Pages/default.aspx"/>

Finding out the hard way you cannot have any of the siteMap Node elements have the same url or title...

Please note that if you are placing this custom control on the mysite the relative links will have to be changed to absolute due to the fact that they reside in different web applications.

  • Next you will have to add in the custom control to your masterpage. This can be a bit tricky.
  • Copy the OOTB navigation control "<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">"
  • Place this control in a <TR> tag right above the OOTB navigation control
  • Like in Sahil's blog post rename the DataSourceID= from in the custom control from "topSiteMap" to "xmlSiteMap"
  • You will also need to modify the content placeholder and menu ID's see highlighted items below:


Once you get it finally working your new navigation will have the following functions:

  • Tier 1: Global Navigation
    • Always Consistent
    • Not Security Trimmed
    • Manually configured on the server Via XML (I'm sure if you wanted to get tricky you could hook this up to custom list or something...)
    • Globally across site collections, web applications and even external applications if you wanted (Basically anything)
  • Tier 2: OOTB Local Navigation
    • Changes based on site collection
    • Security Trimmed
    • Configured through the UI
    • Only shows navigation within the site collection

So here is a screenshot of the custom two tier global navigation control:


Have fun customizing, and drop me a line if you have created something similar!

SharePoint Meeting Workspace: The red headed step child template...

I think we all know that building a custom design and master page requires lots of patience and open ended thinking.

The SharePoint Meeting Workspace template to say the least does not play nice with all of the other templates and master pages. These templates include the following:

  • Basic Meeting Workspace
  • Blank Meeting Workspace
  • Decision Meeting Workspace
  • Social Meeting Workspace
  • Multipage Meeting Workspace


Here is what the template normally looks like:

If you attempt to apply your custom master page to any one of these templates you will see something like this:

Note that the navigation tabs are gone and you get a message on the left saying: "There are no more meeting occurrences to select from." It also removes the function on the site actions to add or manage pages.

The issues above are caused because the controls below a not included into the regular "default.master" file. Microsoft decided that all meeting workspace site should use a different master page called "mwsdefault.master". This file is located on in the global folder on the 12 hive.

The following two controls make up the function for the custom site actions menu items

  • <Meetings:CustomToolPaneManager runat="server" __WebPartId="{E5EF4B97-0A6B-4E44-B210-813789452367}" __MarkupType="vsattributemarkup" WebPart="true" Height="" Width=""/>
  • <Meetings:PropertyBag runat="server"/>

This control is the driver for the tabs on the template.

  • <Meetings:PageTabsWebPart runat="server" __MarkupType="vsattributemarkup" WebPart="true" Height="" Width="" __WebPartId="{80A0AA76-9C8C-45B7-B01D-FF0F3E8CB8EC}" id="g_80a0aa76_9c8c_45b7_b01d_ff0f3e8cb8ec"/>

So what do you do now?

Well the best thing I would suggest is to take a copy of the mwsdefault.master and start adding in your customizations. You should not remove or hide any of the controls above as the functionality of the meeting workspaces will be gone.

Once you have all of your changes you will need to work with your developers on feature stapling your master page to a copy of the meeting workspace site definitions.

Monday, January 5, 2009

Comments, working now...

All, I want to apologize to all who wrote comments on my blog and never saw them published to the site. I did not know that I had a rule that stated any comment left 7 days after the published date would need approval. I have published all appropriate comments to my blog.

Again, Sorry for the delay. I will review and respond to all questions as soon as I can.


Stylize Individual Web Parts with a CEWP

The following instructions describe how to change the title bar, background color, and webpart title for one or more web parts on a specific page or site.

1) Navigate to the page or site that requires the styling

2) View the browser’s source code for the page: Page > View Source (IE7) or Use IE developer Toolbar DOM Explorer

  • Search the source using the title of the web part that requires separate styling (i.e. “News”, "Links" etc.)
  • From the “td” tag that contains the web part “title”, select the “id” from the grandparent “td” tag. For example, see the web part “title” and corresponding web part “id” highlighted below:

<td id="MSOZoneCell_WebPartWPQ2" vAlign="top">
<table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="ms-WPHeader">
<td title="News" id="WebPartTitleWPQ2" style="width:100%;">

  • In this case, the “id” for the “News” web part is “MSOZoneCell_WebPartWPQ2”
  • Copy the “id” value

3) In the browser, edit the page: Site Actions > Edit Page

4) In one of the web part zones, add a new content editor web part. (It does not matter what zone this is added to since the web part will be hidden once editing is complete.)

  • In the “Edit” menu of the new content editor web part, select “Modify shared web part”, and then select “Source Editor”
  • In the pop-up window that appears, paste the following code, which includes the “id” value from the source code (here we use the example value in italics):


/* Webpart Header Color */
# MSOZoneCell_WebPartWPQ2 .ms-wpheader td{
background-color: #006699;

/* Webpart Border Color */
# MSOZoneCell_WebPartWPQ2 .ms-wpborder{
border: 1px #FFCC00 solid;
background-color: #006699;

/* Webpart Title Text Color */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A:link{

/* Webpart Title Text Visited Color */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A:visited{


  • Click “Save” in the pop-up window to save the changes
  • Expand the “Layout” section in the editing pane that appears on the right-side of the browser window
  • Select the check box labeled “Hidden” to ensure that the content editor web part will not be visible to users
  • Click “OK” in the editing pane to complete editing the web part

5) Determine the web part that is to be differentiated using this new styling

  • Under the “Edit” menu of this web part, select “Modify Shared Web part”
  • Expand the “Appearance” section of the web part editing pane
  • Scroll-down to the “Chrome Type” drop-down list and select “Title and Border”
  • Click “OK” in the editing pane to save the new settings for the web part

6) Repeat step 2 and add to step 4 for any additional web parts that require this styling

7) Click “Exit edit mode” in the top right of the browser to return

8) Refresh the browser to see the styling changes made to the selected web part(s)

Note: This solution only effects the current page, and if the web part changes position in its current zone, or is moved to another zone, the custom branding will follow the web part to its new position on the page. SharePoint assigns these webpart ID's as you add each webpart to the page, so if the webpart is removed and then added back to the page the styling you might get some unexpected results.

This can be considered a quick and dirty method. There are other options that will span all pages using a particular page layout by adding a div tag with a particular class around a webpart zone for which you can set a style per webpart zone area and not the webpart itself.

Thanks and happy styling!

Friday, January 2, 2009

Presenting at SharePoint Summit 2009!

I have been selected to present at the 2009 SharePoint Summit in Montreal Canada on April 8th.

My Session: IA and Branding Process: Sketches to Wireframes to Hi-Fidelity Designs

Learn about proven methods to guide you from paper napkin sketches to hi-fidelity prototypes. Explore how to transition from each process and who is involved.

This session will entail the following:

  • Methods to gathering requirements
  • Benefits of a creative brief and Style guide
  • Understand what functional concepts are and how they can be used
  • Explore options on creating wireframes
  • Creating the Design Composition (Differences between design adaptation and custom design)
  • Building the design (CSS, Images, Master Pages, Page layouts, testing for multiple browsers and Mobile devices)

This track is designed for IA’s and Developers looking for proven methods for designing and branding their sites.

My Session Bio:

My Co-worker Paul Galvin will also be presenting as well.

Paul's Session:

Paul's Session Bio:

I hope to see you all there!