labs.steveottenad.com

Add Custom CSS to a Sharepoint 2010 Site

Note: this does not work in WSS, only MOSS. You need the Microsoft.SharePoint.Publishing namespace for this tutorial to be of any use.

One of the biggest parts of creating a professionally customized Sharepoint 2010 site is being able to provide your own custom CSS. This allows you to alter the appearance of just about every element on the page, and provide your own branding in place of SP2010’s default styles. However, getting that custom CSS file hooked into your site can be a bit tricky.

Create Your CSS

The easiest and most straightforward method is to include a link to your custom CSS in your masterpage. Hopefully you can open your site in Sharepoint Designer 2010. If you can, open it up, then navigate to the “Style Library” folder and right click it to create a new folder called “Custom”. Inside this newly created folder, create a new file called “styles.css”. You will put all your custom CSS in here, and load it after the default Sharepoint styles to override/change what you need

Alter Your Masterpage

Next, open up your current masterpage. This is usually v4.master by default, and always located in the “_catalogs/masterpage” directory. Right before the

<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">

tag, put the following line of code to include a reference to your custom CSS file you just created.

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/Custom/styles.css %>" After="corev4.css" runat="server"/>

This snippet registers your custom CSS file, and loads it after the “corev4.css file, a default sharepoint stylesheet that contains most of the CSS that governs sharepoints appearance.

10 Comments

  1. Michael says:

    Didn’t work for me; I got “Parser Error Message: The expression prefix ‘SPUrl’ was not recognized. Please correct the prefix or register the prefix in the section of configuration.”

  2. sottenad says:

    Are you using MOSS or WSS? I believe it relies on the Microsoft.Sharepoint.Publishing namespace. Check at the top of your masterpage. Check this post for more info, but I dont think it will work in WSS. http://www.novolocus.com/2008/06/23/relative-urls-in-sharepoint-sites-using-spurl/

  3. […] If you already have a custom stylesheet attached to your masterpage, open that up. If not, visit This page for more information on how to do […]

  4. Clem says:

    Great tips but it work only for Sharepoint Server 2010, not for sharepoint Foundation.
    http://msdn.microsoft.com/en-us/library/gg447066.aspx

  5. Natasja says:

    This url reference worked for me:
    <SharePoint:CssRegistration name="” After=”corev4.css” runat=”server”/>

  6. venkat says:

    nice tip…. please tell me how to use jquery to customize master page in sharepoint 2010.

  7. a says:

    Hey there just wanted to give you a quick heads up.
    The text in your post seem to be running off the screen in Safari.
    I’m not sure if this is a formatting issue or something to do with internet browser compatibility but
    I thought I’d post to let you know. The style and design look
    great though! Hope you get the issue fixed soon. Many thanks

Leave a Reply