Developing Branding Solutions for 2013 Thomas Daly,

About Me  SharePoint B&R Business Solutions  Developer  Branding  Focused on the UI side of things  Community Involvement  Speaker  NJ SP Princeton User Group NJ SP Princeton User Group  SharePoint Saturday NYC organizer SharePoint Saturday NYC organizer  NothingButSharePoint.com – Helper / Contributor NothingButSharePoint.com – Helper / Contributor  My SharePoint Blog My SharePoint Blog  MSDN forums

Topics we’ll cover  Creating Branding Based Project in Visual Studio 2012  Deploying Assets  Themes  CSS, Images & JavaScript  Master Pages  Composed Looks  Additional Page Head  CSSRegistration, ScriptLink, Cache Busting  Feature Receivers

Where are we starting from? Master Page CSS Theme Palette Images Web Fonts

 SharePoint Server 2013  Visual Studio 2012  Microsoft Office Developer Tools for Visual Studio 2012 Microsoft Office Developer Tools for Visual Studio 2012  Quick Deploy [Mavention] Quick Deploy [Mavention]  CSS Plugin? Development Environment

Considerations  Where will you deploy files?  Will it be a Sandbox or Farm level solution?  Will it be SPSite or SPWeb based scoping?  Will you be auto applying master pages, themes or composed looks?  Will you be pushing branding down to subsites?  Will you need any additional scripts to programmatically apply / unapply?

Building Simple Project  Mapped Images Folder  Feature Image  Mapped Layouts Folder  CSS Files  Images  JS Files  Modules  Master Pages

Deploying a Composed Look

What do we need in a Composed Look?  Master Page  Theme Palette  Background Image [optional]  Font Scheme [optional]

Building the Project  Modules  Theme [Definition]  Fonts [Definition]  Layouts  Web Fonts  Background Image  Elements  Composed Look [Definition]

Alternative Branding Technique  No Custom Master Page  Attach Custom Style Sheets or Scripts

Additional Page Head  Additional Page Head – a delegate control located in the of SharePoint master pages. Can be used to load multiple controls via code without touching the master page directly.

User Control & Element Element User Control Feature

Sandbox Solution Alternative  Like a trick, ScriptLink is used to link JS files  CustomAction <CustomAction Id="SiteCSS" Location="ScriptLink" ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="/_layouts/15/SharePointProject1/myStyles.css"></' + 'link>');" Sequence="203" />

Building the Project  User Control  Element  Pointer to User Control  Sandbox ScriptLink

Feature Application of Branding Feature Feature Receiver Composed Look Site Icon Master Page

Auto Brand New Sites  By default, (Non-Publishing) SharePoint does not trickle down applied themes, master page & css  By creating Web Provisioned Event Handler we can make the new children sites have the same branding as their parent.  Common things to set are:  Master Page Url  Custom Master Page Url  Site Logo  Parent Navigation  Theme / Composed Look  Use Synchronous Property

Optimization Techniques

Consideration for CSS & JavaScript  CSS Files  Use CSSRegistraiton  JavaScript Files  Use ScriptLink  Top Reasons  SharePoint Ensures Loading Once  Can specify what to load after  Uses SharePoint built-in cache busting

Cache Busting  Calculated MD5 hash of the file contents  Will ensure a fresh copy will be delivered  Auto-gen hash each time file is modified  File must be relative to the layouts  [CSS]  _layouts/1033/styles/ /  [JS]  _layouts/ /

Questions or Comments?  Contact information  Thomas M Daly  Company –  Blog –  Twitter - _TomDaly_   [work]  [personal]  LinkedIn LinkedIn