This document discusses developing branding solutions for SharePoint 2013. It covers creating branding projects in Visual Studio 2012, deploying assets like themes, CSS, images and JavaScript, using master pages, composed looks, additional page headers, and cache busting. Optimization techniques are also discussed, such as using CSS registration and script links to efficiently load stylesheets and scripts.
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
SharePoint Saturday NYC organizer
NothingButSharePoint.com – Helper / Contributor
My SharePoint Blog
MSDN forums
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
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?
12. Additional Page Head
Additional Page Head – a delegate
control located in the <HEAD> of
SharePoint master pages. Can be used to
load multiple controls via code without
touching the master page directly.
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
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/<MyFolder>/<MyFile.css>
[JS]
_layouts/<MyFolder>/<MyFile.js>
21. Questions or Comments?
Contact information
Thomas M Daly
Company – http://www.bandrsolutions.com
Blog – http://thomasdaly.net
Twitter - _TomDaly_
Email
Tdaly@BandRSolutions.com [work]
thomas.m.daly@hotmail.com [personal]
LinkedIn