Monday, October 2, 2017

SharePoint Online Branding

Being able to apply a custom brand on a portal is a critical capability and this article provides you with an overview of the branding options and branding best practices.

Anti-patterns (in other words, don't do these things)-
Below list contains the key things not to do when it comes to branding your portal:
·        Avoid custom master pages
·        DOM structure of SP online is constantly improving so we need to avoid any specific position of the specific element in DOM structure of the page.
·        Customized branding of personal sites (OneDrive for Business sites) is not supported. 
·        Office 365 Suite Bar customization is not supported.

Options available –
·        Custom Master page (not recommended by Microsoft)
·        Page Layouts
·        Alternate CSS
·        Display Templates
·        Themes (composed looks)
·        Third party packages
·        Inject JavaScript (CSOM)

The following general principles should be considered when branding portals in a SharePoint Online environment-
·        The SharePoint Online service is constantly improving. Updates provisioned to the service may affect DOM structure of out of the box pages, and the content of out of the box files (for example, master pages). Developers must keep this in mind and should not rely on unsupported customization approaches (for example, the position of the specific element in DOM structure of the page).
·        Avoid customizing master pages. As mentioned above, updates to the service may affect the structure of out of the box master pages. If you have implemented custom master page copying the contents of any out of the box master page, you will need to further monitor if this out of the box master page is not updated, and re-implement these changes in your custom master page. Otherwise, some SharePoint functionality may start behaving incorrectly, when your custom master page is in use. That's why customizing master pages leads to additional risks and maintenance costs, and it's recommended to avoid it, when possible.
·        Customized branding of personal sites (OneDrive for Business sites) is not supported. It is allowed to apply custom color schemes via Office 365 tenant level branding settings (Customize the Office 365 theme for your organization)
·        SharePoint Online portals must be considered as a part of overall Office 365 ecosystem. That's why every portal now has Office 365 Suite Bar, and customizing it is not supported (see the section Office 365 Suite Bar below).
·        When planning branding and structure of your navigation component, it is important to follow recommendations outlined in Portal Navigation article.
·        When extending portal functionality via custom controls (web parts) it is important to follow recommendations from Portal Performance article.
·        There are significant differences between branding approaches supported for "classic" vs "modern" sites and pages. For detailed information about "modern" sites and pages, see: Customizing "modern" team sites and Customizing "modern" site pages.


Adjust the layout –
As the custom master page is not recommended by Microsoft (custom master pages lead to additional risks and maintenance costs in long-term). That's why developers should consider alternative approaches that allow adjusting the layout of SharePoint portals.
These include:
·       Implementing custom CSS
·        Using custom page layouts
·       Implementing common branding elements (like "footer") by injecting client-side scripts (this approach is discussed in the next section)
·       Embedding client-side scripts in the pages can allow to further customize the look and functionality of the portal.
·       Add a custom action, Add Content Editor or Script Editor web part on a page, Include JavaScript code or a link to JavaScript file in contents of page layouts file.

Samples-







No comments:

Welcome to SharePoint Server 2019, a modern platform for choice and flexibility

“Without continual growth and progress, such words as improvement, achievement, and success have no meaning.” Benjamin Franklin Thi...