SharePoint Saturday NYC slide deck for Intro to SharePoint Branding

1. Intro to SharePoint 2010 Branding Thomas Daly, tdaly@bandrsolutions.com Presented @ SPSNYC 7/30/2011

2. Who am I? 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. Outline What is Branding Planning What’s New in 2010 Tools & Supported Browsers Approaches to Branding Themes Master Pages Upgrading Demo

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. 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. 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. 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

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. No IE 6 Support 7 ways to tell your site visitors to upgrade

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. Themes Set of graphics and cascading style sheets that control the look of your site. Uses Office themes (.THMX) 12 colors, 2 fonts

12. Themes 3Approaches 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. 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. Custom Style Sheets Link to your custom CSS in the MasterPage Upload the CSS to the site, via Alternate CSS (Publishing Only)

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. Search Master Page Contains Minimal Components Converting Custom Master Page into Search Center Master Page

17. Ribbon Security Trim Ribbon Customize Ribbon Position Ribbon placement, look, behavior

18. 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

19. 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

20. 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

21. 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 deployment

22. Questions? Questions / Comments Contact information Thomas M Daly Email: tdaly@bandrsolutions.com Blog – http://thomasdaly.net Twitter - _TomDaly_