Theming Sharepoint 2010

I was recently tasked with theming a SharePoint 2010 web application and I thought it may be helpful to share some of the key items that are useful to know when branding a site within SharePoint.

Keeping it Simple…

You can keep the customisation simple and utilise the front end tools within SharePoint to add your own corporate logo, select a theme or modify a theme by changing the display colours.

Themes

To apply a standard installed theme to your web application, go to Site Settings, Look and Feel and select Site Theme. From here you are able to choose a theme that will change the colours and fonts on your site. You are also able to tweak the colours of a theme if they do not completely match your requirements and preview the results before applying.

You also have the option of importing a theme from an application such as PowerPoint. Using PowerPoint, create yourself a custom theme by using the tools within the Design menu. Save the Theme as a .thmx file and go back to the Site Theme page within your SharePoint site. At the top of the page you will see a link to Theme Gallery, click this and you will be able to upload your .thmx file. Your theme will then be selectable from the available Themes list.

Logo

To add a logo to your SharePoint web application, go to Site Settings, Look and Feel and select Title, description and icon. Here you are able to change the title of your site, add a description if required and add a logo. The logo is selected via a URL. If you want to store the logo within your SharePoint site, perform the following steps first:

Site Actions, Manage Content and Structure & locate the Images folder
Add your image as a new item
Once added, click the link for your image to display it in a browser
Copy the URL from the browser window
Go back to Title, description and icon and paste it into the URL field

Sharpoint Themeing

Getting More Advanced…

If you want to dig further into the customisation of SharePoint, there are 3 main elements to customise and to work with when branding a site:

Master Pages
Custom Style Sheet
Page Layouts

The Master Page controls items such as the position of the Navigators, Search Box, Site Actions, Open Menu, Logo and Site Title, those that are shared across multiple page types. You are able to add in your own <div> tags to help with layout and positioning. To enhance the changes to your master page further, create a Custom Style Sheet. Here you will be able to amend fonts, colours, sizing and positioning of items. Page Layouts reference and use the content of your master page but in addition contain field controls and Web Parts. They are used by all page instances that are based on that page layout whereas a Master Page is used by all pages within a Site.

The top-level SharePoint Server site for a site collection hosted on SharePoint Server 2010 has a special document library called the Master Page and Page Layout Gallery. All page layouts and master pages are stored in this document library.

Getting Started

The default Master Page for SharePoint 2010 is the v4.master. There is another master file called default.master but this is an old SharePoint 2007 master page. To start your customisation you can do any of the following:

edit and work with the v4.master file
make a copy of v4.master and work with the copy
upload a different .master file

As my start point, I downloaded the v4_master_starter page from CodePlex which is Microsoft's open source project hosting web site. The next step was to upload the master page into the SharePoint site. This is done via the Site Actions button, Manage Content and Structure option, Master Page Gallery location, add New Item… ensuring that the Content Type is Master Page. There are a number of other ways to do this
but I find this to be the simplest.

Your new Master Page then needs to be set as the Default Master Page. This can be done in SharePoint Designer by locating the Master Pages view and right clicking on your new .master page and from the menu selecting Set as Default Master Page.

Custom Style Sheet

To enhance the changes to your Master Page, create a custom style sheet. You will then be able to amend and overwrite existing SharePoint styles contained within corev4.css or you can add your own and refer to them in your .master file. A Custom Style Sheet is applied after the corev4.css file so your style sheet should take precedence. Your custom Style Sheet can be stored in either of the following locations:

File System of the SharePoint 2010 server
\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\Template\layouts\1033\Styles

Style Library
Upload the .css file into the Style Library using Site Actions, Manage Content and Structure

To reference and use a Custom Style Sheet in your Master Page you can do either of the following:

Edit the CSS Content Placeholder in the Master Page
<SharePoint:CssRegistration name="/Style Library/sitename/style.css" After="corev4.css" runat="server"/>
Site Actions, Site Settings, Look and Feel, Master Page and add an alternate CSS URL.

Page Layouts

A Page Layout in SharePoint allows you to create a template for a page that users apply to their content for a consistent layout of information. Using SharePoint Designer, go to the Page Layouts view and click the New Page Layout action. Select the Content Type Group and Content Type on which to base your new page layout, enter a URL name and a Title and click OK, this will then open the new page layout in the advanced editor.

To control the layout of content on the page, create a page structure by adding html between the <asp:Content> tags. Within your structure you can then add Web Part Zones which will allow your users to add Web Parts and content to the page. Save the Page Layout and it will then be available to users when they want to create a new page.