Your SlideShare is downloading. ×
Developing branding solutions
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing branding solutions


Published on

Published in: Technology

  • 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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. DevelopingBrandingSolutionsThomasDaly,
  • 2. About Me SharePoint Consultant @ B&R Business Solutions, based out of NJ A SharePoint Developer – specializing in UI objects (webparts, user controls) both ASP.NET & jQuery components. A SharePoint Brander – transform designs into CSS & images to skin SharePoint.
  • 3. Topics we’ll cover Master Pages Themes Deployment Considerations Advanced Themes Additional Page Head Methods Auto-Brand New Sites Feature Based Application of Branding
  • 4. What is SharePoint Branding? Creating a visual identity in SharePoint Why brand SharePoint? – Top 4 Reasons  Create a unique look and feel  Maintain company visual identity  Create distinct web areas  Make it not look like SharePoint
  • 5. What does branding involve?  Master Pages  Page Layouts  Themes  Cascading Style Sheets (CSS)  Images  JavaScript
  • 6. What to be aware of Planyour approach Consider the end users Have the right tools Browsers, Browsers, & Browsers
  • 7. Tools Visual Studio 2010 SharePoint Designer 2010 Browser Developer Toolbars  IE (F12) Dev Toolbar  Firebug (for FireFox) Visual Studio CSS Plugins  Web Essentials Theme Builder CKS: Development Tools Color Pickers  ColorPic  ColorCop
  • 8. Themes3 Approaches to creating/updating the theme  Existing theme can be modified in UI (Publishing Features on SC level)  New theme can be created in PowerPoint and imported  Microsoft Theme Builder Tool
  • 9. Master Pages Creates a consistent look & layout for pages in your site. If your going custom, Start Clean!  Clean v4 – Tom Daly  My Master Page – basically V4.master, subtracting the V3 content areas, highly document, all controls, & maintain all SharePoint functionality  Starter Master Pages – Randy Drisgill  Codeplex project, nicely documented  Problem with Treeview Nav & Vertical Grip Others, haven’t used yet  Just the Essentials – Heather Solomon  HTML 5 – Kyler Schaeffer
  • 10. Master Pages (key points) Search – uses Minimal.Master  If you plan to have it look like your custom SharePoint master page follow this blog to convert it. Link Important things to remember when working in your Master Page  Special Classes  noindex – prevent content from being indexed  s4-notdlg – prevent contents from appearing in dialogs  s4-notsetwidth – used to set a fixed width  Be careful working with the s4-workspace, test the master page at various times to ensure that the scrollbars still work  Use a DEV toolbar to inspect elements & test CSS  Do not cut out ASP controls, Hide them.
  • 11. Consideration for CSS &Images  SharePoint:CSSRegistration vs <Link>  Deploy to Style Library or Layouts  Conditional CSS for Browsers Targeting
  • 12. Feature Based Branding Pros Cons  Easy to apply across  Difficult to make Site Collections, Sites quick style changes and Sub-Sites (there’s a trick)  Repeatable Branding  You’ll need to know  Powerful, can accomplish many how to use Visual tasks – fast! Studio 2010  Easily rolled out across environments
  • 13. Feature Based Branding – cont. FeatureFeature Receiver Site Icon Master Page Theme
  • 14. Pseudo Theme When regular theming is just not enough! No touching the Master Page Both feature based – samples provided Technique #1  Apply Theme  Apply Alternative CSS Technique #2  Apply CSS File via AddtionalPageHead
  • 15. Technique #1 Take advantage of the power of the feature receiver to apply an alternate CSS & apply a theme Use the theme as a base CSS layer
  • 16. Technique #2 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.
  • 17. Technique #2 – continued Feature ElementUser Control
  • 18. Auto Brand New Sites By default, SharePoint does not trickle down applied themes, master page, alternate 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  Use Synchronous Property
  • 19. Questions or Comments? Contact information  Thomas M Daly  Email -  Blog -  Twitter - _TomDaly_  LinkedIn  Company Site –
  • 20. References & AdditionalResources Conditional CSS  Traditional method  CSSRegistration DeployingBranding for Sandbox Packaging & Deploying Branding