Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Breadcrumb in SharePoint & Design considerations — March 26, 2010

Breadcrumb in SharePoint & Design considerations

The breadcrumb in SharePoint is out of the box is quite invisible and takes not always the place it could have. As you know, the breadcrumb is meant to be a secondary global navigation, and if you have a deep and multilevel site structure and a large amount of sites and page the breadcrumb could really be helpful for the users.

So If you like to make it a bit more visible, let’s give it some graphics with a repeating background, separators and an end / start image.

BreadCrumb

To the point, how to do this in SharePoint?
Well I had first to say that the breadcrumb control in SharePoint could be a bit tricky to deal with, because it´s not only one breadcrumb around. The Master page has a control, you have to delegate the control in the page layouts and all the OOTB site definitions have their ways to handle the control. To make this work the same way on the site collection at every pages, from a page in a site with the publishing feature enabled, to a blog site and down to an view page for a library; I leave this out for you to investigate. Besides of all this, the site map have several properties with different kinds of behaviors and several site map providers for you to consider.

To get the repeating background it´s just to set a class to the asp:SiteMapPath, and to get the arrows you can use the PathSeparatorTemplate. To this I have an start and an end image.

Look for this in the master:
   asp:ContentPlaceHolder
and for this in the page layout and in the site defintions:
   asp:Content ContentPlaceHolderId=”PlaceHolderTitleBreadcrumb”   

    

Examle in a custom site defintion built on the team site

Example in a listview


Example in a Page

The SiteMapPath control


<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">	
<div class="BreadCrumbStart"></div>
<div class="BreadCrumbWrapper">	
<asp:SiteMapPath ID="MySiteMap" runat="server" class="MySiteMap" RenderCurrentNodeAsLink="True">
  <RootNodeStyle CssClass="RootBCnode" />
  <CurrentNodeStyle CssClass="CurrentBCnode" />
  <PathSeparatorTemplate>
   <img src="/Style%20Library/Images/CustomImages/Spitter18.png" border="0" class="SplitterImage"/>
  </PathSeparatorTemplate>
</asp:SiteMapPath>
</div>	 
<div class="BreadCrumbEnd"></div>
</asp:ContentPlaceHolder>

 

CSS

.BreadCrumbWrapper {
 background-color:#fff;
 float:left;
 margin:0px;
 padding:0px;
}
.BreadCrumbStart {
 background-color:#fff;
 float:left;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbStart.png');
 background-repeat: no-repeat;
 width:28px;
 height:26px;
 margin-top:0px;
 padding:0px;
}
.BreadCrumbEnd {
 background-color:#fff;
 float:left;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbEnd.png');
 background-repeat: no-repeat;
 width:20px;
 height:26px;
 margin-top:0px;
 padding:0px;
}
.RootBCnode a:link, a:visited{
 color:#555
}
.CurrentBCnode a:link, a:visited {
 text-decoration:none;
 color:#333
}
.MySiteMap {
 font-family:Arial, Helvetica, sans-serif;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbBack.png');
 background-repeat: repeat-x;
 height:26px;
}
.MySiteMap SPAN {
 font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
 font-size:10px;
 color:#382e1f;
 vertical-align:middle;
 text-align:center;
}
.SplitterImage {
 margin-top:3px
}

Read more about breadcrumbs in this article in Smashing Magazine. http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

Hide the Quick Launch in SharePoint 2010 — March 15, 2010

Hide the Quick Launch in SharePoint 2010

There is no way out of the box to hide the Quick Launch and the Tree View navigation in SharePoint 2010. Let´s say you have a team site and you really want to use the full width of the home page of this team site. How to do this?
The easiest way is to use the old school CEWP trick that worked even back in 2003, just add a the Web Part that now has the name Content Editor and add the following text in the HTML Source mode:


/*--Hide Quick Launch --*/
#s4-leftpanel{
display:none
}
.s4-ca{
margin-left:0px
}

You can also download and import this as a .dwp from here if you like.

The Master page that includes this navigation control does not longer have a table structure as it had in SharePoint 2007, which gives a cleaner and a well-formed markup HTML. The DIV elements in the master are floated to each other and have their positions defined by margins or a width, this is why I had to set the margin to zero for the s4-ca class, the wrapper for the content in the page. The value for the left panel ID can be set to not be displayed.