Branding Microsoft SharePoint Sites And Applications

12 January 2012
Andrzej Pucilowski
Frink_Cognifide_2016_HeaderImages_0117
Organisations tend to work hard in creating a smashing brand identity. Visual presence on the internet is especially important, as nowadays it is not uncommon for people to encounter new brands on the go. Many businesses tend to view their intranet sites and other internal web applications as important as their external applications. Here is a brief summary of how you can add custom branding to sites built on SharePoint 2010, which has become a widely used platform for creating all sorts of both public facing and internal websites.

The easiest thing you can do is to replace the default logo with your organisation’s logo (as shown on the screenshot below). This option is located within the "Look and Feel" section of Site Settings page, so it can be found easily by site owners. While you can set a different logo for each SharePoint site, in most cases you will want to have uniformity across your site collection.

Logo change

(click to enlarge)

 Another simple option is to pick a theme for your site. A theme is a set of colours and fonts that SharePoint will use to display various user interface elements. There is a number of predefined themes that you can choose from. Like the previous one, the "Site Theme" option can be easily found on the Site Settings page. An example themed site is shown on the following screen capture.

Site theme

(click to enlarge)

Creating your own custom theme is pretty straightforward. Instead of having to pick a desired text style and tone for each and every UI element, you can define 12 base colours and two font families that the system will automatically apply to all the look & feel pieces, creating derived shades and tints where necessary. The colour and font selectors can be found down on the theme selection page.
 
You can also use Microsoft PowerPoint to create a theme - having selected colours and fonts, you save it as an Office Theme (*.thmx) file, which needs to be uploaded to the Theme Gallery of your SharePoint site. The advantage here is that a theme created this way will be easy to reuse. This will come in handy in a situation when you need to brand a number of different sites.

SharePoint allows you to incorporate custom styling with the Alternate CSS option (available on Site Master Page Settings page). If you provide such stylesheet, it will be included after the out of box SharePoint CSS, allowing you to override the default styling and make your site look exactly like you want it to. Keep in mind that SharePoint user interface consists of many views and elements, so preparing a stylesheet affecting all the visuals will require considerable front-end development effort. The screengrab below presents a site with an alternate CSS stylesheet applying some more branding.

Alternate stylesheet

(click to enlarge)

If you would like to have even greater influence/ control over the user interface (e.g. to move or hide some UI elements, or add your own custom bits and pieces), you can create a custom master page for your site. There are two paths you can go by.

1 - The easier route is to copy one of the out of box master pages, and use it as a starting point for creating your own master page. Choose v4 master (which is the one that new SharePoint 2010 sites use by default) when building a collaboration site or an application, or pick Night & Day when you intend to create a publishing site.

2 - The more laborious method is to start with a blank master page (you can easily find one on the Internet), containing only a minimal set of elements required for SharePoint to run properly, and then expand it by adding your custom components. This allows you to take nearly full control over the displayed site pages, but requires significant development effort. An example result is shown on the following image.

Custom master page and CSS

(click to enlarge)

As you can see, there are a few branding methods available in Microsoft SharePoint. The nice thing is you can make some basic changes to the look and feel without engaging designers or developers. The advanced methods require some engineering effort, and ideally should be planned and actioned prior to your website's roll-out. I prefer creating custom master pages with heavy branding only for publishing sites (Internet and intranet websites) but otherwise, stick to standard v4 master page with small or medium amount of custom styling on collaboration sites (intranet portals focusing on collective information sharing, data-oriented web applications).

Hope you found these tips helpful and I'd be delighted to get some feedback through your comments!