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

  • Published on

  • View

  • Download

Embed Size (px)




<ul><li> 1. Thomas Daly, tdaly@bandrsolutions.com Presented @ SPSVB 1/7/2012</li></ul> <p> 2. Thanks to the Sponsors! 3. About Me SharePoint Consultant @ B&amp;R Business Solutions,based out of NJ A SharePoint Developer specializing in UI objects(webparts, user controls) both ASP.NET &amp; jQuerycomponents.; A SharePoint Brander transform designs intocss/images to skin SharePoint. 4. What are we going to cover? What is Branding Planning Whats New in 2010 Tools &amp; Supported Browsers Approaches to Branding Themes Master Pages Upgrading Demo 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. Planning Intranet or Internet scenario Collaborational or Informational Determine Audience - target browsers, users, &amp; screenresolution Existing company style or guidelines Custom Page Layouts Custom or 3rd Part Components Timeframe Approval Deployment 7. Whats New Changes Less Table, mainly DIV based New objects Ribbon, Dialog Boxes Increased Browser Support Utilizing Office Theme Engine Increase Standards Compliance 8. Tools &amp; 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 &amp; 8 Mozilla Firefox 3.6 Safari 4.04 9. Other Browsers &amp; Tools Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome; Chrome Built in developer tool bar Opera Dragonfly 10. No IE 6 Support 7 ways to tell your site visitors to upgrade 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. Themes Set of graphics and cascadingstyle sheets that control thelook of your site. Uses Office themes (.THMX) 12 colors, 2 fonts 13. Themes 3 Approaches to creating/updating the theme Existing theme can bemodified in UI (PublishingFeatures) New theme can be createdin PowerPoint andimported Microsoft Theme BuilderToolhttp://connect.microsoft.com/themebuilder 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. Custom Style Sheets Link to your custom CSS in the MasterPage Upload the CSS to the site, via Alternate CSS (Publishing Only) 16. Master Pages Starter Master Pages new term for Minimal Master Pages http://startermasterpages.codeplex.com/ Includes 3 master pages: regular, foundations, meetingworkspaces Provides clean starting point for branding Well documented for easy understanding V3 Master Page Support 17. Search Master Page Contains Minimal Components Converting Custom Master Page into Search Center Master Page 18. Ribbon Security Trim Ribbon Customize Ribbon Position Ribbon placement, look, behavior 19. jQuerys 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. Upgrading Branding Theme No direct method Master Page MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Pagehttp://msdn.microsoft.com/en-us/library/ee539981.aspx 21. Deployment Options Varies depending on your branding effort SharePoint Designer Based Upload master pages, images, CSS, &amp; scripts Manual process per site Solution Based Deployment Upload master pages, images, CSS, &amp; scripts Automatically activate theme, apply master pages, build out site components. Repeatable branding application, programmatically across sites 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. Questions or Comments? Contact information Thomas M Daly Email - tdaly@bandrsolutions.com Blog - http://thomasdaly.net Twitter - _TomDaly_ Company Site http://www.bandrsolutions.com </p>