2. About Me
ï‚– SharePoint Consultant
ï‚– Developer
ï‚– Branding
ï‚– Focused on the UI side of things
ï‚– Community Involvement
ï‚– Speaker
ï‚– NJ SharePoint User Group
ï‚– SharePoint Saturday NYC Organizer
ï‚– SharePoint Saturday NJ Organizer
ï‚– My SharePoint Blog
ï‚– MSDN forums
3. Topics for
Discussion
ï‚– Branding Assets
ï‚– Creating Branding Based Projects inVisual Studio
2013
ï‚– Deploying Assets for On-Prem / O365
ï‚– Themes
ï‚– CSS, Images & JavaScript
ï‚– Master Pages
ï‚– Composed Looks
ï‚– Additional Page Head
ï‚– Feature Receivers
ï‚– CSSRegistration, ScriptLink, Cache Busting
ï‚– Tools for improved development
5. Special
Considerations
ï‚– Are you On-Prem / O365?
ï‚– Will it be a Sandbox or Farm level solution?
ï‚– Will it be Site orWeb based scoping?
ï‚– Aka (SPSite, SPWeb)
ï‚– Aka (Site Collection, Site)
ï‚– Will you be auto applying master pages, themes or
composed looks?
ï‚– Will you be pushing branding down to sub sites?
ï‚– Do you have Single Site Collection or Multiple?
ï‚– Will you need any additional scripts to
programmatically apply / un-apply?
8. Example 1
Review
ï‚– Created Module to deploy .master file
ï‚– Created Mapped folder for CSS, images &
JavaScript
ï‚– Create Module for Style Library
9. Example 1
KeyConcepts
Modules &
Elements
ï‚– There may be times when you may want to deploy
files to the SharePoint server regardless of their file
type, such as new master pages.
ï‚– To do this, you can use Modules (not to be confused
withVisual Basic code modules).
ï‚– Modules are containers for files in a SharePoint
solution.When the solution is deployed, the files in
the module are copied to the specified folders on
the SharePoint server.
ï‚– An Element is an atomic unit within a Feature.
ï‚– There are several types of elements that can be
included in a Feature.
ï‚– More info on Module Items and Elements
ï‚– More info on ElementTypes
10. Example 1
KeyConcepts
Module –
Master Page
ï‚– Module
 Path – Location in the Project
 Url – Location on the Server
ï‚– File
 Type – GhostableInLibrary, can edit with Designer
 Level – Published so it’s auto approved
 ReplaceContent –True so future packages will overwrite
ï‚– Properties
 UIVersion – the targeted version of SP
 ContentTypeId – value for Master Page content type
 Title –Title of the master page
11. Example 1
KeyConcepts
Module –
Style Library
ï‚– Module
 Path – Location in the Project
 Url – Location on the Server
ï‚– File
 Type – GhostableInLibrary, can edit with Designer
 Level – Published so it’s auto approved
 ReplaceContent –True so future packages will overwrite
13. Composed
Looks
(Theming)
ï‚– Theming provides a quick and easy way to apply
lightweight branding to a SharePoint 2013 site
ï‚– A composed look, or design, is the color palette,
font scheme, background image, and master page
that determine the look and feel of a site.
14. Example 2
Deploying a
Composed
Look
ï‚– Components
ï‚– Master Page
ï‚– Theme Palette
ï‚– Background Image [optional]
ï‚– Font Scheme [optional]
ï‚– Options
 Declarative [Code – On-Prem]
ï‚– Imperative [XML - Sandbox / O365]
Deploying a custom Composed Look in SP2013
• Part 1
• Part 2
15. Example 2
Review
ï‚– Create Module for .spcolor file (theme)
ï‚– Create Element for Composed Look definition
ï‚– Create Module for custom Master Page
ï‚– Add and supporting images / fonts
16. Example 2
KeyConcepts
Module -
Theme
ï‚– Module
 Path – Location in the Project
 Url – Location on the Server
ï‚– File
 Type – GhostableInLibrary, can edit with Designer
 Level – Published so it’s auto approved
 ReplaceContent –True so future packages will overwrite
17. Example 2
KeyConcepts
Elements –
Composed
Look
ï‚– The Definition of the Composed Look
 Title & Name – Name of the Composed Look
 MasterPageUrl – url of the master page
 ThemeUrl – url of the .spcolor file
 ImageUrl – url of background image
 FontSchemeUrl –url of .spfont file
 DisplayOrder – Order in which is will appear in the list
19. Example 3
Additional
Page Head
ï‚– Additional Page Head is 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.
ï‚– What could is be used for?
 Scenario 1 – Need a master page that is full width & one that is
fixed width.
 Scenario 2 – Need two create two distinct site brands and
master page layout is the same or similar
 Scenario 3 – Need to apply different style sheet on sub site to
change fonts or colors
ï‚– Additional Page Head can attach different style sheets to the
same master page.
ï‚– Minimize overhead of maintaining multiple master pages
20. Example 3
Review
ï‚– Add Style Sheet / JavaScript
ï‚– Create User Control
ï‚– Link User Control to CSS / JS
ï‚– Create Elements linked to User Control
22. Example 3
KeyConcepts
Elements
ï‚– Contains the point to the User Control
 Id – where the control will be loaded
 ControlSrc – path to the User Control
 Sequence – Order in which is appears [if multiple]
ï‚– For Sandbox / o365
ï‚– Link directly to the CSS in the elements
ï‚– Use JavaScript to write the link to theCSS [Hacky]
<CustomAction Id="SiteCSS" Location="ScriptLink"
ScriptBlock="document.write('<link
rel="stylesheet" type="text/css"
href="/_layouts/15/SPS.SP2013.Branding/example3/css/examp
le3.cssquot;></' + 'link>');"
Sequence="203" />
24. Example 4
Feature
Receivers
ï‚– Feature event receivers are methods that execute when
one of the following feature-related events occurs in
SharePoint:
ï‚– A feature is installed.
ï‚– A feature is activated.
ï‚– A feature is deactivated.
ï‚– A feature is removed.
ï‚– Feature Receivers in branding can be used for:
ï‚– Apply Composed Look
ï‚– Apply Master Page
ï‚– Apply Site Logo
ï‚– Apply branding to all sub sites
ï‚– Auto Apply Parent Branding on New Site Creation
ï‚– Feature Receivers are code so best for on-prem only.
 At the moment Sandbox can run code but it’s depreciated
in the next release.
ï‚– Sandbox has a hard limit to how long a sandboxed
solution can take to be completed.
ï‚– By default, this is 30 seconds
25. Example 4
Review
Feature
Receiver –
Activated &
Deactivating
ï‚– Add Master Page, CSS, Images & JavaScript like
previous examples
ï‚– Add Feature Receiver
ï‚– Add code to enable specific branding features
ï‚– Introduced public class to hold constants
ï‚– Introduced helper class w/ common branding
functions
ï‚– Branding & Provisioning for SharePoint Online &
Office 365
26. Example 4
Review
Web
Provisioned
Event Receiver
ï‚– By default, (Non-Publishing) SharePoint does not
trickle down applied themes, master page & css
ï‚– By creating Site Provisioned Event Handler we can
make the new children sites have the same
branding as their parent.
ï‚– Common things to set are:
ï‚– Apply Master Page (Site & System)
ï‚– Apply Site Logo
ï‚– Apply Alternative CSS
ï‚– Apply Parent Navigation
ï‚– Apply Composed Look
ï‚– Added the Synchronous property to theWeb
Provisioned Event Receiver will ensure Composed
Look is applied before the site is display after it’s
initial creation.
28. Example 5
CSS
Registration
ï‚– SharePoint:CSSRegistration
ï‚– Used to register CSS files with SharePoint
ï‚– Prevents loading file multiple times
ï‚– Can control what file it will load after
ï‚– Using with files in _layouts will produce Cache
Busting effect
ï‚– Supports Dynamic Urls for Site Collection / Site
ï‚– Supports Conditional CSS
ï‚– Good to use inWeb Parts
ï‚– More details on CSSRegistration
29. Example 5
ScriptLink
ï‚– SharePoint:ScriptLink
ï‚– Used to register JS files with SharePoint
ï‚– Prevents loading file multiple times
ï‚– Can control what file it will load after
ï‚– Using with files in _layouts will produce Cache
Busting effect
ï‚– Supports Dynamic Urls for Site Collection / Site
ï‚– Good to use inWeb Parts
30. Example 5
Cache
Busting
ï‚– Using CSSRegistration & ScriptLink auto adds
?rev={hd5 hash}
ï‚– Files must also be stored in the _layouts, using the
Style Library or another folder will not generate a
hash
ï‚– This changes whenever the file is updated making
the browser think that it doesn’t have it and forces
a re-download
 Cache Busting can be done manually – when you
update css or javascript append a ?ver=x.x.x or
anything different on the end of the url
ï‚– This does not always update automatically.
Sometimes it needs a IISRESET
32. Tools
ï‚– CKS: DeveloperTools - http://cksdev.codeplex.com/
ï‚– Must have for Quick Deploy alone
ï‚– MindscapeWeb Work Bench -
https://visualstudiogallery.msdn.microsoft.com/2b
96d16a-c986-4501-8f97-8008f9db141a
ï‚– Sass / Less Support
ï‚– Bundle
ï‚– Minify
33. Questions?
ï‚– Contact Info
ï‚– Thomas M Daly
 Website – http://thomasdaly.net
ï‚– Twitter - _tomdaly_
ï‚– Email
ï‚– TDaly@BandRSolutions.com [work]
ï‚– Tom.M.Daly@gmail.com [personal]
ï‚– LinkedIn