DevelopingBrandingSolutionsThomasDaly, tdaly@bandrsolutions.com
About Me SharePoint  Consultant @ B&R Business  Solutions, based out of NJ A SharePoint Developer – specializing in UI  ...
Topics we’ll cover Master Pages Themes Deployment Considerations Advanced Themes Additional Page Head Methods Auto-B...
What is SharePoint Branding? Creating   a visual identity in SharePoint Why   brand SharePoint? – Top 4 Reasons    Crea...
What does branding involve?    Master Pages    Page Layouts    Themes    Cascading Style Sheets (CSS)    Images    J...
What to be aware of Planyour approach Consider the end users Have the right tools Browsers, Browsers, & Browsers
Tools   Visual Studio 2010   SharePoint Designer 2010   Browser Developer Toolbars       IE (F12) Dev Toolbar       F...
Themes3 Approaches to creating/updating the theme    Existing theme can be modified in UI     (Publishing Features on SC...
Master Pages   Creates a consistent look & layout for pages in your site.   If your going custom, Start Clean!       Cl...
Master Pages (key points)   Search – uses Minimal.Master       If you plan to have it look like your custom SharePoint  ...
Consideration for CSS &Images   SharePoint:CSSRegistration   vs <Link>   Deploy to Style Library or Layouts   Condition...
Feature Based Branding Pros                           Cons    Easy to apply across          Difficult to make     Site C...
Feature Based Branding – cont.                   FeatureFeature Receiver                                           Site Ic...
Pseudo Theme   When regular theming is just not enough!   No touching the Master Page   Both feature based – samples pr...
Technique #1   Take advantage of    the power of the    feature receiver to    apply an alternate    CSS & apply a theme...
Technique #2   Additional Page Head – a delegate control located in the    <HEAD> of SharePoint master pages. Can be used...
Technique #2 – continued  Feature ElementUser Control
Auto Brand New Sites   By default, SharePoint does not trickle down    applied themes, master page, alternate css   By c...
Questions or Comments? Contact   information    Thomas M Daly    Email - tdaly@bandrsolutions.com    Blog - http://tho...
References & AdditionalResources Conditional   CSS    Traditional method    CSSRegistration DeployingBranding for Sand...
Upcoming SlideShare
Loading in …5
×

Developing branding solutions

1,199 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,199
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developing branding solutions

  1. 1. DevelopingBrandingSolutionsThomasDaly, tdaly@bandrsolutions.com
  2. 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. 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. 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. 5. What does branding involve?  Master Pages  Page Layouts  Themes  Cascading Style Sheets (CSS)  Images  JavaScript
  6. 6. What to be aware of Planyour approach Consider the end users Have the right tools Browsers, Browsers, & Browsers
  7. 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. 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 http://connect.microsoft.com/themebuilder
  9. 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. 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. 11. Consideration for CSS &Images  SharePoint:CSSRegistration vs <Link>  Deploy to Style Library or Layouts  Conditional CSS for Browsers Targeting
  12. 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. 13. Feature Based Branding – cont. FeatureFeature Receiver Site Icon Master Page Theme
  14. 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. 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. 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. 17. Technique #2 – continued Feature ElementUser Control
  18. 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. 19. Questions or Comments? Contact information  Thomas M Daly  Email - tdaly@bandrsolutions.com  Blog - http://thomasdaly.net  Twitter - _TomDaly_  LinkedIn  Company Site – http://www.bandrsolutions.com
  20. 20. References & AdditionalResources Conditional CSS  Traditional method  CSSRegistration DeployingBranding for Sandbox Packaging & Deploying Branding

×