Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

SharePoint 2010 branding examples — November 30, 2011

SharePoint 2010 branding examples

A couple of weeks ago I had two sessions at SharePoint & Exchange forum 2011 about branding in SharePoint and Data Views in SharePoint Designer. SEF was as usual a great event with a lot of good speakers like Marc D Anderson, Penny Coventry, Todd Klindt, Dan Holme, CA Callahan, Göran Husman, Wictor Wilén and many more.

I talked about theoretical aspects of branding like importance, decision points, tools and how to plan for a branding in SharePoint in general in the branding session and I showed how to brand the SharePoint user interface piece by piece, not by how to make dramatic changes to the interface; more about where to start and which classes you can modify per element like:

  • Header area, faded background and height
  • Logo
  • Breadcrumbs
  • Social icons, smaller icons and the added title text with jQuery
  • Global navigation with dropdown
  • Searchbox, custom button, background color and jQuery for replace the default text

As promised during my session about branding, you’ll find all CSS and jQuery you’ll need to create a look and feel like the image above. Please feel free to use this in the way you want.

CSS

Download all the CSS here

Changes in the master page

If you want to display one more level in the fly out for the global navigation

<!-- Global Navigation activate dropdown -->	
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="2"
SkipLinkText=""
CssClass="s4-tn"/>

In this example I used small icons for the social icons, to do this just add –mini to the Control Id

<!-- Mini Social Icons  -->
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>

The mini extensions means that no text will be displayed, just the icon will show up. I used jQuery to set a custom attribute per icon with first and last child. Paste this jQuery in your custom Master page and don’t forget to add a reference to latest jQuery in the head section of the MasterPage.

<script type="text/javascript">
$(document).ready(function() {
   $(".ms-mini-socialNotif-Container > a:first-child > span > span > IMG").attr({
   	title: "I like",
   	}); 
   $(".ms-mini-socialNotif-Container > a:last-child > span > span > IMG").attr({
   	title: "Tags & note",
   });
  });
</script>

The searchbox button is an image in the dimensions of 37 x 25 px, create you own button or use a background color. I have tested this stuff in latest Firefox, GC and IE 9 and hopes this can give you some ideas and thanks so much to everyone that attended at my sessions, if you have any questions about my presentations, please feel free to contact me.

/ Christian