Developing Branding Solutions for 2013
33
Developing Branding Solutions for 2013 Presented by Thomas Daly
-
Upload
thomas-daly -
Category
Technology
-
view
146 -
download
1
Transcript of Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Presented by Thomas Daly
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
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
What are Branding Assets?
Master
PageCSS
Composed Look
Images
Web Fonts JavaScript
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?
Example 1Deploying Master Pages, Images, CSS & JavaScript
Example 1Deploying Master Page, Images, CSS, & Javascript
Mapped Images Folder Feature Image
Mapped Layouts Folder / Style Library CSS Files
Images
JS Files
Modules Master Pages
Example 1Review
Created Module to deploy .master file
Created Mapped folder for CSS, images & JavaScript
Create Module for Style Library
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
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
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
Example 2Deploying a Composed Look
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.
Example 2Deploying 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
Example 2Review
Create Module for .spcolor file (theme)
Create Element for Composed Look definition
Create Module for custom Master Page
Add and supporting images / fonts
Example 2Key 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
Example 2Key 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
Example 3Additional Page Head
Example 3Additional 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
Example 3 Review
Add Style Sheet / JavaScript
Create User Control
Link User Control to CSS / JS
Create Elements linked to User Control
Example 3Key Concepts
User Control[On-Prem] Links to our additional style sheet or JavaScript
User Controls supported in On-Prem only
Example 3Key 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('<link
rel="stylesheet" type="text/css"
href="/_layouts/15/SPS.SP2013.Branding/example3/css/examp
le3.cssquot;></' + 'link>');"
Sequence="203" />
Example 4Feature Receivers
Example 4Feature 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
Example 4Review
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
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.
Example 5CSSRegistration, ScriptLink, Cache Busting
Example 5CSS 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
Example 5ScriptLink
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
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
Tools for improved development
Tools
CKS: Developer Tools - http://cksdev.codeplex.com/ Must have for Quick Deploy alone
Mindscape Web Work Bench -https://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a
Sass / Less Support
Bundle
Minify
Questions?
Contact Info Thomas M Daly
Website – http://thomasdaly.net
Twitter - _tomdaly_
[email protected] [work]
[email protected] [personal]
