SPSVB 1 7-2012 - getting started with share point branding


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SPSVB 1 7-2012 - getting started with share point branding

  1. 1. Thomas Daly, tdaly@bandrsolutions.com Presented @ SPSVB 1/7/2012
  2. 2. Thanks to the Sponsors!
  3. 3. 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.
  4. 4. What are we going to cover? What is Branding Planning What’s New in 2010 Tools & Supported Browsers Approaches to Branding Themes Master Pages Upgrading Demo
  5. 5. 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
  6. 6. 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
  7. 7. What’s New – Changes Less Table, mainly DIV based New objects – Ribbon, Dialog Boxes Increased Browser Support Utilizing Office Theme Engine Increase Standards Compliance
  8. 8. Tools & Supported Browsers Tools  IE Dev Toolbar (embedded in IE8)  Firebug / Firebug Lite  SharePoint Designer 2010  ColorPic  Multiple Versions  IE  Firefox  vmware workstation, virtual pc, or virtual box Supported Browsers  Internet Explorer 7 & 8  Mozilla Firefox 3.6  Safari 4.04
  9. 9. Other Browsers & Tools Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome; Chrome  Built in developer tool bar Opera  Dragonfly
  10. 10. No IE 6 Support 7 ways to tell your site visitors to upgrade
  11. 11. 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.
  12. 12. Themes Set of graphics and cascading style sheets that control the look of your site. Uses Office themes (.THMX) 12 colors, 2 fonts
  13. 13. 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
  14. 14. 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
  15. 15. Custom Style Sheets Link to your custom CSS in the MasterPage Upload the CSS to the site, via Alternate CSS (Publishing Only)
  16. 16. 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
  17. 17. Search Master Page Contains Minimal Components Converting Custom Master Page into Search Center Master Page
  18. 18. Ribbon Security Trim Ribbon Customize Ribbon Position Ribbon placement, look, behavior
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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 Jquery  Conditional CSS  Enhance OOTB elements  DOM Changes Deployment  Feature driven deploymentweb
  23. 23. Questions or Comments? Contact information  Thomas M Daly  Email - tdaly@bandrsolutions.com  Blog - http://thomasdaly.net  Twitter - _TomDaly_  Company Site – http://www.bandrsolutions.com