Whether or not you are using Visual Studio to deploy your branding solutions, this session is for you. We’ll start with the basics discussing the pieces compromising your branding assets, and the tools that are needed for the job. Next we’ll dive into the concept and techniques that could be utilized in order to apply your branding, such as: Applying Themes, MasterPage, Tricks with Additional Page Head, Alternative Style Sheets, and Feature Receivers.

1. Developing
Branding Solutions
for 2013
Presented by Thomas Daly

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

5. Topics for
Discussion
 Branding Assets
 Creating Branding Based Projects in Visual 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

6. What are
Branding
Assets?
Master
Page
CSS
Composed
Look
Images
Web Fonts JavaScript

7. Special
Considerations
 Are you On-Prem / O365?
 Will it be a Sandbox or Farm level solution?
 Will it be Site or Web 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
Deploying Master Pages, Images, CSS &
JavaScript

9. Example 1
Deploying
Master Page,
Images, CSS,
& Javascript
 Mapped Images Folder
 Feature Image
 Mapped Layouts Folder / Style Library
 CSS Files
 Images
 JS Files
 Modules
 Master Pages

10. Example 1
Review
 Created Module to deploy .master file
 Created Mapped folder for CSS, images &
JavaScript
 Create Module for Style Library

11. Example 1
Key Concepts
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
with Visual 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 Element Types

12. Example 1
Key Concepts
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

13. Example 1
Key Concepts
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

14. Example 2
Deploying a Composed Look

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

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

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

18. Example 2
Key Concepts
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

19. Example 2
Key Concepts
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

20. Example 3
Additional Page Head

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

22. Example 3
Review
 Add Style Sheet / JavaScript
 Create User Control
 Link User Control to CSS / JS
 Create Elements linked to User Control

23. Example 3
Key Concepts
User Control
[On-Prem]  Links to our additional style sheet or JavaScript
 User Controls supported in On-Prem only

24. Example 3
Key Concepts
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 the CSS [Hacky]
<CustomAction Id="SiteCSS" Location="ScriptLink"
ScriptBlock="document.write('&lt;link
rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
href=&quot;/_layouts/15/SPS.SP2013.Branding/example3/css/examp
le3.cssquot;&gt;&lt;/' + 'link&gt;');"
Sequence="203" />

25. Example 4
Feature Receivers

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

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

28. 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 the Web
Provisioned Event Receiver will ensure Composed
Look is applied before the site is display after it’s
initial creation.

29. Example 5
CSSRegistration, ScriptLink, Cache Busting

30. 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 in Web Parts
 More details on CSSRegistration

31. 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 in Web Parts

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

33. Tools for improved
development

34. Tools
 CKS: Developer Tools - http://cksdev.codeplex.com/
 Must have for Quick Deploy alone
 Mindscape Web Work Bench -
https://visualstudiogallery.msdn.microsoft.com/2b
96d16a-c986-4501-8f97-8008f9db141a
 Sass / Less Support
 Bundle
 Minify

35. Questions?
 Contact Info
 Thomas M Daly
 Website – http://thomasdaly.net
 Twitter - _tomdaly_
 Email
 TDaly@BandRSolutions.com [work]
 Tom.M.Daly@gmail.com [personal]
 LinkedIn