Developing branding solutions for 2013

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

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

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

Where are we starting from?

Master Theme
CSS
Page Palette

Web
Images
Fonts

Development Environment
 SharePoint Server 2013
 Visual Studio 2012
 Microsoft Office Developer Tools for Visual
Studio 2012
 Quick Deploy [Mavention]
 CSS Plugin?

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?

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

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

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

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

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.

User Control & Element
Feature

Element

User Control

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

Building the Project
 UserControl
 Element
 Pointer to User Control
 Sandbox ScriptLink

Feature Application of Branding
Feature

Feature Receiver
Site Icon

Master Page
Composed Look

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

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

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>

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

Developing branding solutions for 2013

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Developing branding solutions for 2013

Similar to Developing branding solutions for 2013 (20)

More from Thomas Daly

More from Thomas Daly (20)

Developing branding solutions for 2013