SharePoint 2010: Basics on how to apply branding

So, I have gotten a lot of great feedback within the comments of my blog. I have heard from quite a few people that they either just been tasked with branding SharePoint and don’t know where to start. Or they have a basic idea about SharePoint, CSS and HTML but don’t know where or how to reference the custom CSS. This is a long post so hold on to your hat!

Within this post I am going to focus this topic on SharePoint 2010 but the approach could be used either for 2007 or 2010.

Step 1: The first thing that you have to consider is how the SharePoint site that you are branding is configured?

• Is it SharePoint 2007 or 2010?
• Is it WSS or Full SharePoint Server?
• Will Publishing be enabled?
• What site templates will be branded?
• Publishing
• Team Collaboration
• Meeting Workspaces
• Search Center
• My Sites
• Administration Pages “_layouts/”
• Other?

Step 2: Be prepared and gather all design support files from your visual designer

• Support Images optimized for web
• Style Guide
• Hex colors for all design elements
• Text body colors
• Text link colors
• Text link hover colors
• Text header colors
• Background colors
• Heights and widths of design elements
• Ribbon
• Header
• Logo
• Navigation Container
• Navigation Links
• Left Side Navigation
• Content Area

Step 3: Choose your implementation approach

• Store all CSS and Images on the server
• This approach allows you to store all of your CSS and images in a custom folder on the server within the 14 hive, 12 hive for 2007.
• SharePoint 2010 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\customfolder
• SharePoint 2007 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\customfolder
• This approach allows you to have a single source for all of your CSS and images. Note that it is recommended to create a solution package with all of your files and deploy it especially if you have more than one web front end server. This will push all of the files to the correct location on each web front end so you do not have to do it manually.
• The other option is to Store all CSS and Images within SharePoint Style Library (Publishing Infrastructure and Site Publishing Feature need to be enabled)
• This approach allows you to have version control over your CSS and images. However these files will need to be added to each site collection the branding will be applied to so if you have a lot of site collections there will not be a single source for your files. AKA if you update one it will not update the branding globally.

Step 4a: If you choose to go with storing all of your CSS and images on the server, below are the steps to get you started.
I will walk you through the manual process of adding in the files, a solution would be created to add these files in normally. Please note that this should be done in a development environment first.

• log into your web front end as a administrator
• Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES
• create a new folder within the styles library that is either your company name or project name or what ever makes sense
• upload all of your optimized images into this folder
• right click > new > text document
• rename it custom.css
• Open up the document in notepad and add in the following just to make sure you have it linked up correctly

body #s4-leftpanel{display: none !important;}
body .s4-ca{background-color: #CCC; margin-left: 0px !important;}
body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}

• Save the custom CSS file

Step 4b: If you choose to go with storing all of your CSS and images within SharePoint, below are the steps to get you started.

• first you need to make sure that you have the publishing infrastructure and publishing feature activated within your site.
• To verify click on Site Actions > Site Settings > Site Collection Administration > Site collection features

• Then to verify the site feature click on Site Actions > Site Settings > Site Actions > Manage site features

• by activating the publishing feature it creates a style library at the root of the site collection where you will be able to store and reference your custom CSS and images.
• navigate to the new style library:
  http://sitename/Style%20Library/Forms/AllItems.aspx
• you will normally see four folders
• en-us
• Images
• Media Player
• XSL Style Sheets
• create a new folder at this root location that is either your company name or project name or what ever makes sense
• upload all of your optimized images into this folder
• on your local machine create a new text document in notepad
• save it as “custom.css”, make sure you save as type “All Files” and Encoding “UTF-8”

• Open up the document in notepad and add in the following just to make sure you have it linked up correctly

body #s4-leftpanel{display: none !important;}
body .s4-ca{background-color: #CCC; margin-left: 0px !important;}
body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}

• Save the custom CSS file

Step 5a: Apply your server side custom CSS to your site.
You now have a few choices on how you want to apply your custom CSS to your site/page. If you want more details about other approaches see my blog post here: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html

• Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.
• For non-publishing Click on Site Actions > Site Settings > Galleries > Master pages
• For publishing Click on Site Actions > Site Settings > Galleries > Master pages and page layouts
• hover over v4.master and click on Send To > Download a Copy
• Save this copy of v4.master onto your local machine
• Rename it customv4.master
• Open up the master page in notepad.
• ** Do not try to open it locally with SharePoint designer, it will add in a bunch of weird references and your master page might get errors.**
• at the end of the head tag add the following code
• <SharePoint:CssRegistration name="custom/custom.css" After="corev4.css" runat="server"/>
• Save the master page and upload it into the master page gallery.
• Make sure that you publish it as a major version and approve it as needed.
• to apply your custom master page when publishing has been enabled click on site actions > site settings > look and feel > master page
• If Publishing is not enabled you will have to use SharePoint designer to set this custom master page, there will not be an option to do this through the UI.

• Change the Site Master page and the System Master page to your customv4.master and then click on ok
• Now You will finally see that you branding has been applied.

• Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.
• Click on site actions > site settings > look and feel > master page
• Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”
• add in the following path:
• _layouts/1033/styles/custom/custom.css
• then click on ok
• your site should now have the custom branding applied to this site and if you choose to any existing sub sites.
• ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **
• Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.
• Add the content editor web part to the page
• Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source
• paste in the following:
• <link href="/_layouts/1033/styles/custom/custom.css" rel="stylesheet" type="text/css"/>
• Save/Publish the page. Just this page will now have the custom branding applied.

Step 5b: Apply your Style library custom CSS to your site.
You have the same options as above but with different URL paths.

• Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.
• Use same method above to create your custom master page but use the following reference at the end of the HEAD section.
• <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/custom/custom.css %>" After="corev4.css" runat="server"/>
• Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.
• Click on site actions > site settings > look and feel > master page
• Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”
• add in the following path:
• /Style Library/custom/custom.css
• then click on ok
• your site should now have the custom branding applied to this site and if you choose to any existing sub sites.
• ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **
• Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.
• Add the content editor web part to the page
• Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source
• paste in the following:
• <link href="/Style Library/custom/custom.css" rel="stylesheet" type="text/css"/>
• Save/Publish the page. Just this page will now have the custom branding applied.

I hope this helps any new front end developers out there trying to get their feet wet with SharePoint 2010 branding.