So, you’ve built your SharePoint site and now need to make it look, well… not like SharePoint?! To do this you’ll need to skin the beast.
Fortunately, skinning SharePoint 2010 isn’t that painful, and we did this recently on our own iCompliance solution. This consists of a dashboard-style homepage, several lists and webparts (and a few workflows, which are irrelevant to this post) all housed under a site.
The main goal was to get away from the standard SharePoint UI and give a fresh feel to it. As is always the case with SharePoint, there are ‘many ways to skin a cat’ (or SharePoint in this case), so this just details how we did it.
The next thing we did was to create our own Master Page and include a reference to our CSS using this ASP snippet:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/icompliance/resources/Styles/icompliance.css %>" After="corev4.css" runat="server"/>
and we put this just above this ASP tag:
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
This was really it for setting up the conditions necessary to create our own SharePoint theme and we were ready to get our hands dirty with CSS.
CSS seems to be a bit like Marmite, you either love it or hate it. Fortunately for me, I’m in the pro-Marmite camp so skinning SharePoint wasn’t too arduous. The SharePoint 2010 HTML is reasonably well marked-up for providing classes and IDs to hook CSS into.
The most useful CSS classes and IDs to hook into are detailed below, where the Class/ID column contains a CSS-like reference to the tag:
- Ribbon – #s4-ribbonrow
- Site Title – .s4-title h1
- Navigation – #s4-topheader2
- Each Navigation Menu – .menu-horizontal li.static
- Homepage Web Parts – .ms-bodyareacell table td.s4-wpcell-plain, .ms-bodyareacell table td.s4-wpcell
- List Column Headers – th.ms-vh2
- Selected rows in a list – .ms-itmhover, .s4-itm-selected
You’ll see from the screenshot at the top, we did a couple other cool bits like created a tabbed site UI, and added dropdown menus in the navigation, which I’ll detail in future posts.