Using CSS to customize SharePoint 2010

Most of us dive into SharePoint projects from a technical or architectural background and leave the product look and feel customization design to professionals. However sometimes you need to make minor adjustments to the way SharePoint pages, list or web parts are displayed. It is in these cases when the experience with HTML and CSS comes in handy.

The main tool to perform this kind of changes in our SharePoint pages is SharePoint Designer. You can modify an specific page appearance or an entire site by editing the proper master page:

There are certain page customizations easily done by modifying and object property tags. For example, to change an image in a SPLinkButton you simply enter a new url:

These kind of tasks are quite easy to accomplish, however there are certain cases when more complex customizations are needed and CSS unleashes its true power.

CSS is one of the technologies behind Web 2.0 enabling the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. CSS allows the programmer to make changes in the way specific elements in the HTML code are displayed therefore giving greater control over the look and feel of the page.

In order to apply specific designs to a master page within SharePoint 2010 you first need to know what are the styles used so you can reference them accordingly. Heather Salomon at SharePoint Experts has compiled a very complete CSS reference chart for v3 and v4.

Once you have read Heather’s chart you can choose which style you want to modify and define it accordingly. I’m going to do a little example to teach you how to do it.

Let’s suppose we want to change the background of the main content area of our pages.

First we need to identify which element you are going to reference. As it turns out it is #MSO_ContentTable

Next you must create a CSS file and place it in an accessible location, for example the Site Assets library

We want to replace the current background with a JPG file so we copy it also to the same location.

Once you have the files in place we edit the CSS file and add the proper code:

At this point you are almost done. Now you only need to add the correct reference to the CSS file in the v4.master page.

Save the changes and reload you SharePoint page. Now the change become evident.

Just remember that because you modified the main master page (v4.master) and it is currently used by all the pages you are going to affect also other pages in your site collection

As you can using CSS to modify SharePoint look and feel is not a complex task if you have the right tools.

There are other tools you can use to customize your SharePoint sites like jQuery or Raphaël. Feel free to explore them and share with me your experiences.