Introduction

Branding is essential for organizations because it creates a sense of trust and makes people feel identified with the organization.

In SharePoint, there are different options available to brand sites.  Some options are more accessible to implement than others, depending on the level of complexity and customization. Often the more detailed the branding needs to be the more complex the approach would be.

Below are listed the most common ways to implement branding in SharePoint online.

Office 365 Theme

Office 365 Theme is the simplest option to brand not only SharePoint sites but also the whole Office 365 tenant.

A simple out of the box configuration in the Office 365 Admin center allows changing the default colors to a more personalized look and feel. Although the options are limited, this is an excellent way to start. You can change the color of the top navigation bar for everyone in the organization as well as the company logo.

To apply these changes, you need to have Administrator privileges in the Office 365 tenant.

Reference: https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530?ui=en-US&rs=en-US&ad=US

Sharepoint Themes

Site owners in SharePoint can use this branding option; It can help you change the corporate colors of specific elements in SharePoint sites.

Depending on the SharePoint site version you are using- classic experience or modern experience- you can have two different options for this approach which you can find below.

Classic SharePoint experience

You can select from a predefined list of fonts, add a background image and select colors for specific elements in SharePoint pages such as Body text, Global Navigation background and text, Current Navigation background and text, among others.

A classic SharePoint theme or(also known as composed looks) are built of colors, fonts, a layout and a background image, SharePoint includes various out-of-the-box SharePoint themes that can be used immediately to change the default aspect of your SharePoint sites, you can find this option in Site Settings > Look and Feel > Change the look.

Right after the selection of the theme, you get a preview of the page, and you can customize the look and feel further by selecting the individual options available such as Background image, Colors, Site layout (master page) and Fonts.

Figure 4 – Elements of a composed look

Developers and advanced users have the option to extend the available default options for colors and fonts by creating custom spcolor and spfont files which are nothing but XML files with the definition of the colors and fonts that we wish to use in our sites.

The location of these are in the Theme Gallery, located in Site Settings > Web Designer Galleries > Themes > 15.

To make the customization of these files a little easier, Microsoft provides a tool called color palette tool that can be helpful when creating new designs as you can see a preview of the changes made to the site. Check out our previous Tip of the Month on Branding with the SharePoint Color Palette Tool for details.

To have consistent branding, site owners can set a site theme across the entire site collection, this action is available for Publishing sites and can be achieved by inheriting from the root site, the option is located in Site Settings > Look and Feel > Master page > Theme.

Reference: https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/use-composed-looks-to-brand-sharepoint-sites

Modern SharePoint experience

Microsoft is constantly making enhancements to the SharePoint online environment. One of those enhancements is the introduction of Modern experience which makes the site more responsive with a modern look and feel. Eventually, this will be the way to build sites in the future, so it’s a good idea to start getting involved in this new feature.

If you are using modern SharePoint sites, you still have the option to use custom themes, but this option is slightly different from the one provided for classic SharePoint sites. In this scenario, Themes are defined in a JSON schema that stores the color settings for SharePoint elements.

SharePoint provides six predefined light color themes and two dark themes, which are accessible from any modern page in Site Settings > Change the look.

Figure 5 – Predefined SharePoint themes

There are a few options to extend the available list of predefined themes for modern SharePoint sites; the first step would be to generate the JSON schema with the desired colors, Microsoft provides a Theme Generator that can help you build the schema for this purpose.

Once the Theme is ready, we need to register it at the tenant level, which is usually done through PowerShell scripts, these actions will make the new Theme available for authorized users to select under a new section named Company themes.

Figure 6 –  Modern SharePoint site themes

Additionally, SharePoint allows power users to disable all predefined themes and only allow the selection of Company themes across the entire tenant; this is helpful when a set of standard approved colors are allowed in the organization.

In the same way, as for classic SharePoint sites, Themes can be applied to subsites within a site collection- the option can be found in Site Settings > Look and Feel > Master page > Theme.

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview

Custom solution

When it comes to custom Branding in SharePoint online, the most popular options to customize the site are CSS and JavaScript injection or a mix of both; these options are intended to be performed by developers with knowledge about HTML, style sheets, and JavaScript.

Some developers may consider the customization of Master Pages to update the default look and feel of the SharePoint site, which is also a custom branding approach used very frequently for SharePoint on-premise environments. However, customizing the Master Page is not recommended by Microsoft as they often push new updates to Office 365 tenants which can lead to abnormal behavior in the SharePoint functionality.

It’s important to know that the options described in this article are useful when working with classic SharePoint sites, however as previously mentioned, the trend is to make the transition to modern pages. With that being said, proceed with caution if you decide to use these alternatives as it may have to be changed in the future.

CSS customization

The main idea behind this approach is that this custom CSS will be present in all classic SharePoint pages so that the default style is overwritten.

Developers can use any developer tools provided in most browsers to inspect the DOM (Document Object Model) elements, get the class or id of every element you wish to change and create custom CSS properties.

The custom CSS file is placed in a location accessible by everyone. Usually this location is the SharePoint Style Library located in the root site collection. Since this file is in a shared location, you can reuse it for all other subsites in the site collection.

To apply the custom CSS file to the SharePoint site, the Publishing feature needs to be activated; then you will be able to navigate to Site Settings > Look and Feel > Master Page > Alternate CSS URL.

JavaScript injection

The idea of this approach is similar to using CSS, having the script available in all classic SharePoint pages and modify the default behavior by getting the DOM elements and modifying its properties with JavaScript or related frameworks, being jQuery the most popular.

The injection of scripts in SharePoint can be achieved through a special type of element in SharePoint known as a custom action, which among other features, it can inject a reference to a script in the entire site or site collection.

There are multiple ways to create and deploy custom actions, for developers, the most common way is by using Visual Studio and create a deployable SharePoint Add-in. Another way to do it is by using the Chrome browser and installing extensions like Chrome SP Dev Tools or SP Editor which will allow you to inject scripts faster and easier.

The final product is a beautiful site making SharePoint look unique and really good for your end users with colors, logos and any other elements that can match the corporate standards.

Figure 7 – Branded home page

 

This tip written by Abel Solutions SharePoint Consultant Carlos Santiago.