SharePoint Online: Intranet Branding

Organizations that deploy SharePoint either on-premises or in the cloud almost always ask the same question:  How can I change the look and feel (or brand) of the sites?  I use the term branding to describe the task of modifying a sites colors, fonts, logos and other user interface elements.

With SharePoint Online there are a few different options for intranet branding.  A person may choose to use themes, SharePoint Designer, or a SharePoint Sandboxed Solution created with Visual Studio 2010. Each of these options provide a specific level of customization capabilities which I will describe throughout this post.

Julian Soh, a co-worker, has a great analogy when speaking about SharePoint branding.  Julian says to think of a SharePoint site as a room in your house. If you are looking to make a minor change to that room you would most likely paint it, which is a fairly simple task. It is possible to do the same thing with a SharePoint site. By configuring a site theme a site administrator can select fonts and colors to be used within the site.

image

If the SharePoint administrator goes into the site settings page for their site they will see the option to choose a site theme under the look and feel heading.  Clicking on the Site theme link will allow the administrator to choose from one of several predefined themes, or the person can use the customize theme section to manually choose colors and font settings. Under the look and feel section on the site settings page there is a link called Title, description, and icon. Clicking on this link enables the site administrator to change the title, description or site logo (icon).

Let’s go back to the room analogy for a SharePoint site. If just painting the room doesn’t meet your needs you may need to do a bit of remodeling.  This might involve reconfiguring the room or knocking out a wall to make the room bigger.  This type of renovation is much more involved than just painting and may require an advanced skill set, however, it does give you more options to make the space fit your specific needs.  SharePoint Designer is a free product that provides the ability to make complex changes to a SharePoint site by modifying it’s master page. The master page is the template that is used to render the look, feel, and content of a SharePoint site.  By modifying the master page it is possible to reconfigure the web part zones, change the layout of the standard controls, and modify the default styles.

Important note: never modify the default master page files included with SharePoint. If you wish to use one of the included master pages as a starting point, make a copy of the file and modify it.

SharePoint Designer is a great tool for making complex branding changes, however, those changes are only applied to a single site collection. To use the same brand across all of the site collections would require that the master page file along with any supporting images, scripts and style sheets  be manually copied to each site collection. Although this is not a complex process it does introduce the potential for mistakes.

If you plan to create a custom brand for your SharePoint 2010 intranet that will be applied to every site collection I would recommend creating a sandboxed solution using Visual Studio 2010.  The SharePoint development tools in Microsoft Visual Studio 2010 provide a simple and effective approach to packaging and deploying the files and code that are required to apply branding to Microsoft SharePoint 2010 sites using a sandboxed solution. For SharePoint Online you would still need to upload the custom solution to each site collection, however, since the files are all packaged together there is a lesser chance that a mistake will be made by misplacing a file or forgetting to copy it.  A SharePoint 2010 Sample SharePoint Online BrandingSandboxed solution created with Visual Studio also allows you to write code to automate part of the branding process.  For example, you may include code to automatically change the site’s logo when the solution package is activated.  You can also add code that will reset the site to the original look, including removal of the logo, when you deactivate the sandboxed solution.

Building a sandboxed solution with Visual Studio 2010 is not a difficult process but it still does require some familiarity with web development concepts. Usually a sandboxed solution would be built and packaged by someone who has prior experience building SharePoint solutions or at a minimum experience building web applications with Visual Studio.

SharePoint Online supports custom branding efforts through the use of themes, SharePoint Designer or sandboxed solutions.  The use of themes is the simplest method but only provides capabilities to change the colors and fonts used to render the pages.  If you wish to make more complex changes to the brand of a site you will need to use either SharePoint Designer 2010 or Visual Studio 2010.

Below I have provided links to articles that have more in depth examples on how to brand a SharePoint site by using the techniques mentioned above. 

 

Resources for this article:

Themes Overview for SharePoint Server 2010

Customize a master page to brand your site with SharePoint Designer 2010

SharePoint Designer (32 bit) Free Download

Deploying Branding Solutions for SharePoint 2010 Sites Using Sandboxed Solutions

Source Code Example for Sandboxed Solution Branding

Starter Master Pages for SharePoint 2010

2 thoughts on “SharePoint Online: Intranet Branding”

  1. Good re-cap. However, I””d love to find out how to deploy a master page/page layout package out to multiple site collections with one fell swoop. We””ve got a bunch of team sites that I””d like to apply my branding too. Any tips?

  2. @Ben – as of right now I am not aware of any simple way to accomplish this task. Sandboxed solutions have to manually be deployed and activated on each Site Collection. My initial thought would have been to script something using PowerShell, however, that is not supported yet with SharePoint Online. I am doing some more digging into this and will post back any updates I have here.

Leave a Reply