Friday, May 10, 2013

Modifying SharePoint 2010 Styles (css)

One of the first things many of my clients ask me about SharePoint sites is how to customize the look and feel. The built in theme elements allow some control over color, but have little control over layout and appearance, and do not allow the addition of some of the newer html markup elements such as gradients.

Customizing the look and feel of SharePoint sites is possible of course, since, for the most part css dictates the site appearance and layout. However, the core SharePoint style sheets (such as corev4.css and others) are large and not intuitive to change. I have seen many clients sites where the core style sheets have been changed without understanding the repercussions, the page they happened to be working on and refreshing as they updated the style sheet looks fine, but other pages, such as admin or list settings pages, have elements out of line or missing altogether.

A better approach is to write your own custom css, perhaps based on a portion of the core css, and then apply that directly to a master page.

This post takes you step by step through the css master page update process. You will require site owner or higher permissions to allow you to open the site master page in SharePoint designer and update.

Create a Custom css file

First, we need the css that you are going to update the SharePoint site with. Pasted below is a small section of css that controls the background color of the header section on SharePoint pages:

/* top banner background */
.s4-title-inner{
background-color:#FA7405; /*Default*/
background: -webkit-gradient(linear, left top, left bottom, from(#FA7405), to(#f7f7f7)); /*Safari, Chrome*/
background: -moz-linear-gradient(top, #FA7405, #f7f7f7); /*FireFox*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFAA00, endColorstr=#f7f7f7); /*IE*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF9E3E, endColorstr=#FF9E3E)"; /*IE/
padding:0px 0px 0px 0px;
margin:0px;
min-height:70px;
}

Note how the different browser options are handled here, with a line for each of the major browser types, otherwise, your styles will only render in Internet Explorer.

The various style components and what they affect are listed here:
SharePoint 2010 CSS Chart

Either use the above css as a starting point or create your own, and save it as a css file.

Add css file to Style Library in SharePoint

On the site that you wish to apply the new style to, go to the site actions menu, and choose “View All Site Content”. Depending on your site type, you may already have a document library created called “Style Library”:

 

If you already have this document library, click the link to access it. If you don’t, create a standard document library on your site with the same name.

Once you are in the style library, add your style sheet to that library:

 

Then, right click on that style sheet and choose “Copy Shortcut”. Paste that shortcut into Notepad or similar:

http://k2webdev:9915/sites/TPBI/SiteAssets/Top_Menu_Blue.css

Update the Master Page with your Style Sheet

Open SharePoint Designer 2010, and open your newly created site.

Double click the “Master Pages” heading in the left nav bar:

 

Double click “v4.master”. This will open the setting information for this file. Choose “Edit File” in the customizations section. You will be probably be prompted to check out, so do so. The master page file should open up and look something like this:

 

At the top of the master page file is the “head” section, delimited by this markup:


<head runat="server">
</head>

Within this section, put in a link to your style sheet with the path to the style sheet you saved formerly, such as:

 

Note that this is a relative url based on the site root.

Save this change and check in your master page.

Tweak Look and Feel in SharePoint

Now that you have updated and saved the master page, you should be able to navigate to your site and see the updated look based on your updated css. If there is no change in the look, ensure your pathing in the master page is correct. Now you can modify and tweak your css settings directly in the css file you linked the master page to, save them, refresh the SharePoint site and see the effect of your changes.

You can modify the css file directly in SharePoint designer by navigating to the site assets folder, double clicking the css file name, and choosing “edit”.

In the screenshot below, the top banner background was changed to orange using the previously provided css, along with some changes to the top menu as well:

 

In conclusion, it is very possible and fairly simple to modify SharePoint 2010 css using the above approach, and, by not changing the core4.css files directly, we are minimizing unwanted side effects and the huge learning curve associated with learning that file all at once.