Skip to main content

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

image

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

image

  • 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”

image

  • 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.

image

    • 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.

image

  • 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.

Comments

Ram said…
Excellent Post. Thanks
Anonymous said…
Thanks a lot for your excellent explanation. However, this would be useful only for existing sites. Provisioning new sites would need to go through the same steps again and again to have similar branding.
Rich T said…
Very nice, but as 'Anonymous' said it only really seems beneficial for pre-existing sites on a sharepoint site that require branding. When you create a new page on your sites, would you create a page under the default theme setting and then reset their master page and style sheets or would you create a new page using a predefined template that you created earlier?

Thanks,

Rich
Erik Swenson said…
Anonymous/Rich,
As stated in my post a master page feature stapler would have to be developed and activated per the site collection. So when someone creates a new site collection, all of the custom master pages get added to the gallery via the feature being enabled and when new sites are created the appropriate master page is applied per the specific template chosen. Try checking out the following link on what I mean.

http://sharepointchick.com/archive/2010/03/26/deploying-a-custom-master-page-in-sharepoint-2010.aspx
Anonymous said…
Looks like this applicable ONLY to sharepoint Server 2010 not to foundation 2010; because I don't see Site Collection features "SharePoint server publishing infrastructure" & "SharePoint Server Publishing"
How do you make similar approch to foundation 2010?
EB said…
For Foundation, you can use master picker - cf codeplex.
Chris Arella said…
Thanks Erik for taking time out to put these together. I know first hand how busy we get and how hard it is to find time to contribute these to the community.

To those not finding this useful, as Eric mentioned, this is for branding SharePoint Server 2010 Standard. Server always means "you need to pay for this" in Microsoft terms. Foundation has a very limited subset of funtionality and Publishing Features have always been part of the full license of SharePoint Server going back to MOSS 2007. Microsoft has removed Publishing from Foundation and WSS. If you are dealing with the FREE versions of SharePoint then branding becaomes MUCH more difficult.
Blog sites said…
Great stuff, thanks a lot.
Anonymous said…
Nice post
James said…
Great post! Your blog is an awesome resource for SharePoint designers. I've come accross design and branding tips on your blog in search results pretty often.

Have you ever been tasked with adding custom branding styles to Office Web Apps document viewers? If I'm using a custom master page it doesn't respect the BODY #s4-mini-header styles. Looks like the only way to do it is by adding an additional stylesheet through the publishing infrastructure which isn't always enabled. Thoughts?
This is a really good read for me. Must admit that you are one of the best bloggers I ever saw. Thanks for posting this useful article.
Sulabh Gupta said…
Excellent Post. Thanks.
Sun said…
Your blog is awesome. I am getting a lot of information from your site.

I have a question related with the images and CSS file storage. You mentioned that the images and CSS file can be stored either within the server physical location or within the SharePoint style library. Is there any performance gains over the other approach? Also my publishing site consists of lot of small product iamges and i need to show those images in the portal site. Which is the best option in this case?

I need to use the images within my web part code to display a product or product related images. The business team periodically give new images. In the current system they depend on the support team to upload those images into the server. What is the best approach i can take it here?

Thank you.
aparna john said…
Hi,Planning websites is a continued challenge for website owners in Web Design Cochin. One challenge is that web browsers are using many various screen resolutions. Thanks.....

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…