SharePoint 2010: Replacing the Crumb Trail and Changing the Title

 

I like SharePoint 2010, I really do… but I just can’t get the hang of the Site Title / Crumb Trail thing, and the Navigate Up button is just not right. Below is a series of screens to show how the 2010 navigation works, and the issues I have with the interface. There’s no point in just complaining, so I also have one possible “fix” at the end of this article.

Please leave some comments:

• Am I not understanding how the crumb trail should work?
• Do you have a better solution?

I know that I’m not done with this… so check back…  (See here for more about the CSS to change the site title area.)

 

 

My Issues with the Site Title / Crumb Trail

 

The Home Page of the site

Issues:

• The Site Title is small and not resizable. We had that issue in 2007 also, but we could fix it will a simple CSS addition. Here the title is part of the crumb trail.
  
• Can you even tell if this site is a subsite of another site? (other than I named it #2)  You can click the Navigate Up button to find out:
  
  
• The “Home” text is almost ok, but I can’t edit this. (easily anyway)

 

In a document library:

 

Issues:

• No room for long titles, especially with lists with long names
  
  
• The View dropdown menu is now in the crumb trail! Any redesign/branding we do may lose the view menu!
  
  
• When you dig into the CSS for this area, there is no clean way to set a new font, color or size. I’ll show how in another article (here), but it’s not as easy as it was in 2007.

 

In the library’s Security Documents folder:

 

Issues:

• If I was happy with the issues already listed, then this screen is OK, but drill down another folder…

 

In a sub folder of Security Documents:

 

Issues:

• When you get down to a sub-folder the crumb trail fails. There is no one-click way up to the parent folder. Your only option is to use Navigate Up (two clicks), or go to the top of the library and drill back down.
   
  The Navigate Up dropdown:
  

 

 

A Possible Solution

 

Below is the result I want… a big title, and a working crumb trail with all of the folders.

 

Home page:

 

In a library with nested folders:

 

How to get there?

• Hide the existing crumb trail, but leave the Site Title
• Restyle the Site Title (color, font, size, etc)
• Add the SharePoint 2007 crumb trail control
• Copy the part of the hidden crumb trail’s HTML that displays the View dropdown to just after the 2007 crumb trail
• Restyle the View dropdown to match the 2007 crumb trail

Steps:

1. Open SharePoint Designer 2010, open your site and open the v4.master master page for editing
    
2. Hide the existing crumb trial:
   1. Search for “PlaceHolderPageTitleInTitleArea” and add a DIV block around the two lines before and one line after this text: 
      
      
      This will hide the existing crumb trail, but also hides the View dropdown which we will need later.
       
   2. Restyle the Site Title
      At the end of the page, just before the </BODY> tag add a <STYLE> block something like this: (new code in bold)
       

      <style type="text/css">
        .s4-titletext h1 a
        {
          color:Blue;
          font-size:24pt;
        }
      </style>

      </body>

   3. Add the SharePoint 2007 crumb trail control and a DIV for the View dropdown – I put it just before “PlaceHolderMain” to be near where it was in 2007:  (new code in bold)
       
      <a name="mainContent"></a>
       
        <div>
           <br/>               
           &nbsp;<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap2" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>&nbsp;
          <span id="myViewDiv"></span>
           <br/>
      </div>
       

      <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
      </asp:ContentPlaceHolder>
       

   4. We hid the old crumb trail, but we need the HTML that displays the View dropdown menu. The code here moves that HTML to our crumb trail:
       

      <script type="text/javascript">
        var OldCrumbTrail = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_ctl01_ctl00");
        var NewCrumbTrail = document.getElementById("myViewDiv");
        OldCrumbTrail.childNodes[0].innerHTML=">";
        NewCrumbTrail.outerHTML = OldCrumbTrail.outerHTML;
        OldCrumbTrail.innerHTML = "";
        OldCrumbTrail.id="NOT_ctl00_PlaceHolderPageTitleInTitleArea_ctl01_ctl00";
      </script>

   5. Restyle the View dropdown to match the 2007 crumb trail – just add the following to the style block we created before:
       
      <style type="text/css">
        .s4-titletext h1 a
        {
          color:Blue;
          font-size:24pt;
        } 

        #zz17_ListTitleViewSelectorMenu
        {
            font-size:8pt;
        }
      </style>
       

 

.