Getting Started with SharePoint Branding

594 views

Published on

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

No Downloads
Views
Total views
594
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Getting Started with SharePoint Branding

  1. 1. Thomas Daly, tdaly@bandrsolutions.com Presented @ NYC SharePoint Users Group 4/6/2011
  2. 2. Who am I?  A SharePoint developer who specializes in implementing designs and creating web components to enhance the user interface and user experience.
  3. 3. Outline  What is Branding  Planning  What’s New in 2010  Tools & Supported Browsers  Approaches to Branding  Themes  Master Pages  Upgrading  Demo
  4. 4. What is SharePoint Branding?  Creating a visual identity in SharePoint  Covers everything, from editing pages, webparts, css, master pages, themes, page layouts, jquery/javascript, xslt, CAML, SharePoint Designer . . .  Why brand SharePoint?  Create a unique look  Maintain company visual identity  Create distinct web areas  Make it not look like SharePoint
  5. 5. Planning  Intranet or Internet scenario  Collaborational or Informational  Determine Audience - target browsers, users, & screen resolution  Existing company style or guidelines  Custom Page Layouts  Custom or 3rd Part Components  Timeframe  Approval  Deployment
  6. 6. What’s New – Changes  Less Table, mainly DIV based  New objects – Ribbon, Dialog Boxes  Increased Browser Support  Utilizing Office Theme Engine  Increase Standards Compliance
  7. 7. Tools & Supported Browsers  Tools  IE Dev Toolbar (embedded in IE8)  Firebug / Firebug Lite  SharePoint Designer 2010  ColorPic  Multiple Versions  IE  Firefox  vmware, virtual pc, or virtual box  Supported Browsers  Internet Explorer 7 & 8  Mozilla Firefox 3.6  Safari 4.04
  8. 8. Other Browsers & Tools  Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome;  Chrome  Built in developer tool bar  Opera  Dragonfly
  9. 9. No IE 6 Support  7 ways to tell your site visitors to upgrade
  10. 10. Approaches to Branding  Basic  End User situation – none or limited knowledge of html or CSS  Updating theme, adding logo, selecting new master page.  Intermediate  Requires – some ability to understand, write CSS, html  Modifying current MasterPage, adding some custom CSS  Advanced  Create Custom Master Page, custom CSS.
  11. 11. Themes  Set of graphics and cascading style sheets that control the look of your site.  Uses Office themes (.THMX)  12 colors, 2 fonts
  12. 12. Themes  3 Approaches to creating/updating the theme  Existing theme can be modified in UI (Publishing Features)  New theme can be created in PowerPoint and imported  Microsoft Theme Builder Tool http://connect.microsoft.com/themebuilder
  13. 13. Theme Engine  Attach Custom CSS – EnableCssTheming  Enable custom CSS to see themes - /Style Library/en-us/Themable  Capabilities – ref  Replace colors, Replace fonts  Recolor images - Blending, Tinting, Fill
  14. 14. Custom Style Sheets  Link to your custom CSS in the MasterPage  Upload the CSS to the site, via Alternate CSS (Publishing Only)
  15. 15. Master Pages  Starter Master Pages – new term for Minimal Master Pages  http://startermasterpages.codeplex.com/  Includes 3 master pages: regular, foundations, meeting workspaces  Provides clean starting point for branding  Well documented for easy understanding  V3 Master Page Support
  16. 16. jQuery’s Role in Branding  Creating interactive web components  Manipulating the DOM after the fact  Add / Remove classes  Adjust CSS styles  Perform adjustments to page base on other criteria  Add flare
  17. 17. Upgrading Branding  Theme  No direct method  Master Page  MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Page http://msdn.microsoft.com/en-us/library/ee539981.aspx
  18. 18. Deployment Options  Varies depending on your branding effort  SharePoint Designer Based  Upload master pages, images, CSS, & scripts  Manual process per site  Solution Based Deployment  Upload master pages, images, CSS, & scripts  Automatically activate theme, apply master pages, build out site components.  Repeatable branding application, programmatically across sites
  19. 19. Demo  Theme  Create through PowerPoint, Import  Update through UI  Theme Tool  Alternate CSS method  Show V3 Master Page Support  OOTB v3.master  Heather base master page  Show Starter Master  Apply Blank Master Page  Apply Customized Master Page  Deployment  Feature driven deployment
  20. 20. Questions?  Questions / Comments  Contact information  Thomas M Daly  Email: tdaly@bandrsolutions.com  Blog – http://thomasdaly.net  Twitter - _TomDaly_

×