Branding Modern SharePoint

Eric Overfield

We are not there yet, but we will be there soon, as far as SharePoint branding goes. Demos are online 2013 and 2016 online

  • That what and Why of Branding SharePoint
    • Historically the practice of branding your products
    • Improve UX
      • Enhance user adoption
    • Further your organizations brand
    • Provide cohesive strategy
    • Make SharePoint not look like SharePoint

You can brand SharePoint online


No code/minimal code solution

  • Logo
  • Composed looks
  • Use OOTB¬†composed looks or create your own
  • Office 365 themes
  • Custom css – alternative css
  • CSS and Javascript inject with PnP Powershell
    • Use PnP SharePoint Responsive UI
      • SP 2013 may 2015 cu+

No Code Solutions Demo:

  • Create new color pallet by selecting the primary color
  • Responsive UI
  • Paolopia

You need more?

  • Custom Master Pages
  • Custom CSS and JS
  • Display templates
  • Device Channels (dead)
  • The future – The SharePoint framework

SharePoint Framework


  • Provides main html wrapper
  • Defines HTML and body
  • Loads resources
  • Defines page flow and shared components
  • Uses contentplaceholders for replaceable areas
  • OOTB , no longer uses tables for layout!

Page Layouts

  • Defines content layout for given page
  • Contains “content” blocks that link to master
  • Associated with a content type columns
    • May surface content types (cool! metadata) termstore etc.good for rollups
      • Uses article content type example with page layouts
  • Specific to Publishing Sites
    • Very powerful

Page layout Components

Design Manager New SharePoint Branding Tool

  • New to SharePoint 2013
    • Available in SharePoint Online/2013/2016
  • Requires Publishing Infrastructure
  • Import a HTML prototype directly into SharePoint (this is useful)
    • SharePoint handles conversion
  • Interface for custom Master Pages and Page Layouts
  • Also includes display templates
  • No longer limited to SPDesigner

HTML Master-pages

  • Convert a HTML prototype directly into SharePoint
  • Some assembly required

Page Layouts

  • Must derive from Master Page
  • Many out of the box layouts
  • Also uses Snippets and Snippet manager
  • Only edit what is in “content” blocks


  • Snippet gallery is cool*
  • Display templates*
  • Allows to display search results
  • Replaces xslt ..yes!!
  • Control templates (once)
  • Item templates (loops on each item)


The future

  • Announced SP Framework 2016¬†May the 4th
  • SPO released seconf half of 2016
    • New client side rendering (CSR) method for site / data presentation
    • “Classsic” Masterpages. page layouts not going away
    • Review resources for links to videos and blog posts
  • If you are building in a year..look for the framework..earlier.. don’t bother with this
  • Sass / SasssScript do this..no more css..seriously don’t do it
  • Node JS / Bower /Grunt / Gulp
  • CSS/HTML Grids – bootstrap, Susy and others
    • yeoman etc.

New document library..360 only

Right strategy

  • Build a solid foundation
  • Line up project sponsors
  • Get the content, structure and purpose right before branding
  • Secure resources, talent and budget
    • this will help set the level of effort
  • Sitemaps, IA, wireframes, mockups
  • Branding SharePoint Online requires additional considerations

resources: PnP and the sharepoint framework.

Tues_145_Branding Modern SharePoint_Overfield