Microsoft SharePoint branding is one of those things that front-end developers love to hate and love to master. It is the inspiration for many blogs like SharePoint Makes Me Cry (which helps validate our frustration) and Randy Drisgill’s blog which proves him to be no less than a SharePoint branding god.
When I first gained access to a SharePoint 2010 site a few months before its official release within the BC Government, I decided to challenge myself and test out the purportedly much improved branding capabilities by creating an a-typical sharepoint site.
I designed Creative Gov (pictured above) to help showcase and support creative talent and encourage the use of visually appealing (this example is well out of style now) and effective design principals on the web. The key purpose was to open our imagination to what a SharePoint site experience could be.
This design put my patience and css skills to the test (modifying SharePoint’s CSS usually feels like a tug of war). Implementing it gave me the opportunity to get a feel for SharePoint branding in the 2010 environment (substantially different from 2007). And while I almost developed a permanently furrowed brow, I was thoroughly impressed with the possibilities and relative flexibility 2010 now offered.
I used Randy Drisgill’s Starter Master Page and moved forward with the design overhaul from there.
Site Width
Using a set width for a SharePoint site can be more challenging at times, but can also allow you to move beyond the typical fluid layout used in most SharePoint sites.
I changed CreativeGov to use a centered set width by adjusting the wrapper div and adding an s4-nosetwidth class to the s4-workspace div.
<div ID="s4-workspace" class="s4-nosetwidth">
#wrapper {
width: 960px;
margin: auto;
}
The s4-nodlg class prevents element from showing up in dialog boxes. This helps prevent your custom branding from disrupting some of the required SharePoint default functionality. The shortfall of this class, however, is that this class is inheritable, and not feasible for use of base layer elements such as the wrapper div.
Using the ms-dialog class overrides custom styles when needed on dialog boxes.
html.ms-dialog #wrapper {
width: 100%;
}
This is a great option to use when the s4-nosetwidth class can not be used.
The Ribbon
The Ribbon is one of the major addition to SharePoint 2010. It certainly improves usability for users, but at times can be cumbersome and take up additional screen real estate. In some cases you will want to adjust it to fit a site’s needs. I experimented with Ribbon positioning on CreativeGov, and moved it just above the header in the end.
You can also control who does and does not see the Ribbon by changing or adding the Permissions string in the SP Security Trimmed Control.
<Sharepoint:SPSecurityTrimmedControl id="SPSecurityTrimmedControl1" runat="server" Permissionsstring="ManageSubwebs">
You can customize your user permission groups, but ManageSubwebs typical allows web editors to view the ribbon while standard users would not.
Navigation
While some branded sites opt for using entirely custom navigation, I like to use the same Top Navigation Menu and re-brand it’s look. This allows you to still use the Link Menu options in Site Settings to generate a menu.
Along with other style changes, I used the CSS3 Font-face to transform the font face of the Top Navigation Menu, and other labels on the SharePoint Site. I used a similar standard fall back font for browsers that don’t support @font-face.
I also experimented with re-formatting and moving the Site Content Menu. This menu is a default component of most SharePoint master pages and page templates. The s4-leftpanel div is floated on the right, rather than sitting on the left.
Summery
I had the opportunity to share my SharePoint branding experience fellow SharePoint brander (and multitalented) Justin Hewitt at the SharePoint 2010 launch event in the BC Public Service. Both of us had the same common theme, to share the potencial opportunities offered through SharePoint when branding is applied, and to urge IT professionals and business decision makers to look much deeper than the SharePoint 2010 OTB (out of the box) environment when evaluating if SharePoint 2010 meets their needs.
Earlier versions of SharePoint, and OTB environments that do not immediately meet all the needs of clients and users have unfairly given SharePoint solutions a bad reputation at times. I hope that as more clients upgrade to or implement SharePoint 2010, and in the future SharePoint 2013 (see Randy’s top 2013 features), we continue to consider the possibilities made available through SharePoint branding.