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 Theme
CSS
Page Palette
Web
Images
Fonts
5. Development Environment
SharePoint Server 2013
Visual Studio 2012
Microsoft Office Developer Tools for Visual
Studio 2012
Quick Deploy [Mavention]
CSS Plugin?
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
AdditionalPage 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
Likea 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
UserControl
Element
Pointer to User Control
Sandbox ScriptLink
16. Feature Application of Branding
Feature
Feature Receiver
Site Icon
Master Page
Composed Look
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 Top Reasons
Use CSSRegistraiton SharePoint Ensures
JavaScript Files Loading Once
Use ScriptLink 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