0

Skinning SharePoint 2010

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.
iCompliance screenshot

 

CSS

The first thing we did was to create an empty CSS file and get it onto the SharePoint server. Using SharePoint Designer 2010, we connected to the site and created a new Document Library called ‘styles’, in which we put our CSS. We also created a ‘scripts’ library for our JavaScript and ‘images’ folder for, well… our images.

 

Master Page

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.

 

Nitty Gritty

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 trick then was to figure out the CSS classes and IDs of the HTML elements we wanted to style. But we did have a very important friend to help us do this… FireBug for FireFox. This plugin lets you inspect the elements of a page, so you can quickly see what classes and IDs you need to hook into, as well as allowing you to tweak CSS directly from your browser. This is obviously not persisted to SharePoint, but once you’re happy with it you can copy and paste it into the CSS file. This really did speed things up and meant we didn’t need to be in the perpetual ‘make a CSS edit, refresh the page, and repeat’ loop.

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.

About Darren Johnson

Darren is a consultant at ECS and, in addition to his great development work, he’s our UI enthusiast.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>