Edit

Branding

  • Article

Summary

There are many different reasons why you would apply custom branding to a SharePoint site. These reasons can include corporate identity, usability, marketing, etc. SharePoint Online sites support customized branding, but options are slightly different than with SharePoint on-premises deployments.

Resources in this article will help you consider the short and long-term impact of customization from an operational and a maintenance perspective. Guidance around the long term impact analyzes is not really specific for SharePoint; but is rather a rule of thumb for any IT solution built with any platform.

High-level guideline/general rules

  • Office 365 is being updated frequently. To be able to benefit of the latest capabilities, use only the recommended approaches to brand SharePoint Online
  • When customizing SharePoint user experience through DOM manipulation, custom CSS or custom master pages and page layouts, after applying each SharePoint update, verify that your customizations are still working as expected and don't collide with any of the changes introduced withing the installed updates.

Modern experiences

Applies to: Office 365

In 2016, the SharePoint Online team released "modern" collaboration sites. These "modern" team sites are integrated with Microsoft 365 groups and bring a greatly improved end user experience. "Modern" team sites are responsive by design and are much faster to create and use from an end user perspective. Following are some of the key benefits of the "modern" team sites:

  • Designed to scale for any device natively without customizations for a fully responsive experience.
  • Contain native news, quick links, and activity capabilities.
  • Integrated with Microsoft 365 groups.
  • Significantly faster site creation compared to "classic" team sites.
  • Include "modern" lists and libraries with support for Microsoft Flow and PowerApps.
  • Contain "modern" page editing capabilities.
  • Include an updated site contents page with additional insights on site usage.

"Modern" sites have a different level of customization options compared to "classic" team sites. Over time we'll introduce additional customization options, mainly focusing on extensibility and branding. The following list gives a quick overview of the supported capabilities for "modern" team sites. You can:

  • Apply a custom theme or change the logo.
  • Apply an out-of-the-box theme.
  • Create custom site columns (fields) and content types.
  • Create lists and libraries.
  • Configure site settings, such as regional settings, languages, and auditing settings.
  • Use SharePoint Framework extensions to provide user interface components and controls.
  • Use Hub Sites capability to provide cross site collection navigation capability.

Articles

Solutions

Videos

Classic experiences

Applies to: Office 365 | SharePoint Server 2016 | SharePoint Server 2013

The classic SharePoint user experience is based on ASP.NET master pages and page layouts. While it gives you more control and flexibility with regards to branding, it requires more effort to keep operational. Master pages and page layouts in SharePoint contain references to SharePoint resources. Every time you patch your SharePoint Farm or SharePoint Online is updated, you will have to ensure that your custom master pages contain all the necessary references for you to be able to fully use the latest SharePoint features.

Articles

Solutions

Videos

Modern themes

Applies to: Modern sites

SharePoint site owners have new options for applying custom styles and colors to sites that make it easier to define and manage themes across site collections. These new features include:

  • The ability to define custom themes and make them available to site owners. Themes are defined in a JSON schema that stores color settings and related metadata for each theme.
  • An online Theme Generator tool that you can use to define new custom themes.
  • A simplified set of default themes, with six light themes and two dark themes presently available.
  • An updated color palette, with 12 light colors and 6 dark colors, as well as 16 supplementary themes.
  • Control over which themes are available for use on pages within your sites. For example, you can define custom themes based on your organization's branding or identity, and make those the only available themes within your sites.

These capabilities are available to administrators via PowerShell cmdlets, and to developers via the SharePoint Client Side Object Model (CSOM) or the SharePoint REST API.

Articles

Composed looks (classic SharePoint themes)

Applies to: Classic sites

Composed looks are out-of-the-box themes that are included in SharePoint 2013 and SharePoint Online. To apply a composed look to a SharePoint site, select Site Settings > Look and Feel > Change the look. You can then use the Change the look wizard to customize the colors, fonts, master page, and background image of a composed look. The Change the look wizard copies, transforms, and stores CSS in SharePoint's content database. It also recolors images and stores them in the content database.

Articles

Design Manager and Design packages

Applies to: Classic sites

Design Manager is a feature in SharePoint that makes it easier to create a fully customized, pixel-perfect design while using the web-design tools that you're already familiar with. Design Manager is a publishing feature that is available in classic publishing sites in both SharePoint and Office 365.

With Design Manager, you can create a visual design for your website by using whatever web design tool or HTML editor you prefer, using only HTML and CSS, and then upload that design into SharePoint. Design Manager is the central hub and interface where you manage all aspects of a custom design.

Articles

Custom master pages and page layouts

Applies to: Classic sites

Master pages provide the look and feel and standard behavior that you want for all of the pages in your site. Together with content pages, they produce output that combines the layout of the master page with content from the content page.

Because Microsoft SharePoint is built on top of Microsoft ASP.NET, it supports master pages for defining elements that are common to all pages. You can specify all of the shared elements of your site in the master page or pages, and add page-specific elements to content pages.

Articles

Videos

Solutions

Custom CSS

Applies to: Classic sites

Cascading style sheet (CSS) plays a large role in SharePoint branding. To successfully customize the site design in SharePoint 2013 and SharePoint Online, it's useful to be familiar with how SharePoint uses CSS.

Articles

Videos

Solutions

Samples

Script Embedding and DOM manipulation

Applies to: Classic sites

Script Embedding means a pattern where custom JavaScript is added on the page which then modifies the end user experiences by modifying the html DOM structure. Typical approaches for this model is to use either User Custom Actions, JSLink, Content Editor web part or Script Editor web part. Challenge of the DOM manipulation related model is dependency on the actual page structure. These kind of customizations are fragile and can easily break as new capabilities are released in SharePoint Online.

Articles

Videos

Samples