1. Developing Branding Solutions for 2013 Thomas Daly, tdaly@bandrsolutions.com tdaly@bandrsolutions.com

2. About Me  SharePoint Consultant @ 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

3. 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

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

5.  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

6. 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?

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

8. Deploying a Composed Look

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

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

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

12. 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.

13. User Control & Element Element User Control Feature

14. 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" />

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

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

17. 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

18. Optimization Techniques

19. 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

20. 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/ /

21. Questions or Comments?  Contact information  Thomas M Daly  Company – http://www.bandrsolutions.comhttp://www.bandrsolutions.com  Blog – http://thomasdaly.nethttp://thomasdaly.net  Twitter - _TomDaly_  Email  Tdaly@BandRSolutions.com [work] Tdaly@BandRSolutions.com  thomas.m.daly@hotmail.com [personal] thomas.m.daly@hotmail.com  LinkedIn LinkedIn