Developing branding solutions for 2013


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Developing branding solutions for 2013

  1. 1. DevelopingBrandingSolutions for 2013Thomas Daly,
  2. 2. 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  – Helper / Contributor  My SharePoint Blog  MSDN forums
  3. 3. 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
  4. 4. Where are we starting from? Master Theme CSS Page Palette Web Images Fonts
  5. 5. Development Environment SharePoint Server 2013 Visual Studio 2012 Microsoft Office Developer Tools for Visual Studio 2012 Quick Deploy [Mavention] CSS Plugin?
  6. 6. 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?
  7. 7. Building Simple Project Mapped Images Folder  Feature Image Mapped Layouts Folder  CSS Files  Images  JS Files Modules  Master Pages
  8. 8. Deploying a Composed Look
  9. 9. What do we need in aComposed Look? Master Page Theme Palette Background Image [optional] Font Scheme [optional]
  10. 10. Building the Project Modules  Theme [Definition]  Fonts [Definition] Layouts  Web Fonts  Background Image Elements  Composed Look [Definition]
  11. 11. Alternative Branding Technique No Custom Master Page Attach Custom Style Sheets or Scripts
  12. 12. 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.
  13. 13. User Control & Element Feature ElementUser Control
  14. 14. Sandbox Solution Alternative Likea trick, ScriptLink is used to link JS files CustomAction<CustomAction Id="SiteCSS" Location="ScriptLink"ScriptBlock="document.write(&lt;linkrel=&quot;stylesheet&quot;type=&quot;text/css&quot;href=&quot;/_layouts/15/SharePointProject1/myStyles.css&quot;&gt;&lt;/ + link&gt;);"Sequence="203" />
  15. 15. Building the Project UserControl Element  Pointer to User Control  Sandbox ScriptLink
  16. 16. Feature Application of Branding FeatureFeature Receiver Site Icon Master Page Composed Look
  17. 17. 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
  18. 18. Optimization Techniques
  19. 19. 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
  20. 20. 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>
  21. 21. Questions or Comments? Contact information  Thomas M Daly  Company –  Blog –  Twitter - _TomDaly_  Email  [work]  [personal]  LinkedIn
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.