Developing branding solutions for 2013
Download as PPTX, PDF1 like1,582 views
This document discusses branding solutions in SharePoint 2013. It covers creating branding projects in Visual Studio 2012, deploying assets like themes, CSS, images and JavaScript, master pages, and composed looks. It also discusses considerations for the development environment, alternative branding techniques, and optimization techniques like additional page head controls, feature receivers, and cache busting.
![Development Environment
SharePoint Server 2013
Visual Studio 2012
Microsoft Office Developer Tools for Visual
Studio 2012
Quick Deploy [Mavention]
CSS Plugin?](https://image.slidesharecdn.com/developingbrandingsolutionsfor2013-130228191504-phpapp01/85/Developing-branding-solutions-for-2013-5-320.jpg)
![What do we need in a
Composed Look?
Master Page
Theme Palette
Background Image [optional]
Font Scheme [optional]](https://image.slidesharecdn.com/developingbrandingsolutionsfor2013-130228191504-phpapp01/85/Developing-branding-solutions-for-2013-9-320.jpg)
![Building the Project
Modules
Theme [Definition]
Fonts [Definition]
Layouts
Web Fonts
Background Image
Elements
Composed Look [Definition]](https://image.slidesharecdn.com/developingbrandingsolutionsfor2013-130228191504-phpapp01/85/Developing-branding-solutions-for-2013-10-320.jpg)
![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>](https://image.slidesharecdn.com/developingbrandingsolutionsfor2013-130228191504-phpapp01/85/Developing-branding-solutions-for-2013-20-320.jpg)
![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](https://image.slidesharecdn.com/developingbrandingsolutionsfor2013-130228191504-phpapp01/85/Developing-branding-solutions-for-2013-21-320.jpg)
Developing branding solutions for 2013
- 1. Developing Branding Solutions for 2013 Thomas Daly, tdaly@bandrsolutions.com
- 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 NothingButSharePoint.com – Helper / Contributor My SharePoint Blog MSDN forums
- 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. Where are we starting from? Master Theme CSS Page Palette Web Images Fonts
- 5. Development Environment SharePoint Server 2013 Visual Studio 2012 Microsoft Office Developer Tools for Visual Studio 2012 Quick Deploy [Mavention] CSS Plugin?
- 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. Building Simple Project Mapped Images Folder Feature Image Mapped Layouts Folder CSS Files Images JS Files Modules Master Pages
- 8. Deploying a Composed Look
- 9. What do we need in a Composed Look? Master Page Theme Palette Background Image [optional] Font Scheme [optional]
- 10. Building the Project Modules Theme [Definition] Fonts [Definition] Layouts Web Fonts Background Image Elements Composed Look [Definition]
- 11. Alternative Branding Technique No Custom Master Page Attach Custom Style Sheets or Scripts
- 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. User Control & Element Feature Element User Control
- 14. 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" />
- 15. Building the Project UserControl Element Pointer to User Control Sandbox ScriptLink
- 16. Feature Application of Branding Feature Feature Receiver Site Icon Master Page Composed Look
- 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
- 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. 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. 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