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

921
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
921
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DevelopingBrandingSolutionsThomasDaly, tdaly@bandrsolutions.com
  • 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 http://connect.microsoft.com/themebuilder
  • 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 - tdaly@bandrsolutions.com  Blog - http://thomasdaly.net  Twitter - _TomDaly_  LinkedIn  Company Site – http://www.bandrsolutions.com
  • 20. References & AdditionalResources Conditional CSS  Traditional method  CSSRegistration DeployingBranding for Sandbox Packaging & Deploying Branding