View
224
Download
0
Category
Tags:
Preview:
Citation preview
Developing Branding Solutions for 2013Thomas 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?
MasterPage
CSSThemePalette
Images Web Fonts
SharePoint Server 2013 Visual Studio 2012 Microsoft Office Developer Tools for Visu
al Studio 2012
Quick Deploy [Mavention] CSS Plugin?
Development Environment
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
Deploying a Composed Look
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
Additional Page Head Additional Page 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
Element
User Control
Feature
Sandbox Solution Alternative Like a 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 User Control Element
Pointer to User Control Sandbox ScriptLink
Feature Application of BrandingFeature
Feature Receiver
Composed Look
Site Icon
Master Page
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
Optimization Techniques
Consideration for CSS & JavaScript CSS Files
Use CSSRegistraiton
JavaScript Files Use ScriptLink
Top Reasons SharePoint
Ensures Loading Once
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]
Recommended