Using CSS to customize SharePoint 2010

June 4, 2012 at 4:30 pm Leave a comment

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.

image

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:

image

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:

image

image

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.

image

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

image

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

image

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

image

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

image

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.

image

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

image

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

image

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.

Advertisements

Entry filed under: SharePoint. Tags: , , , .

Incorrect Page Redirection in SharePoint 2007 Migrated Site Improvements to the BizTalk Schedule Task Adapter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


June 2012
M T W T F S S
« Mar   Jul »
 123
45678910
11121314151617
18192021222324
252627282930  

Categories


%d bloggers like this: