SharePoint 2010 Branding for the Masses

Transcription

1 SharePoint 2010 Branding for the Masses

2 Randy Drisgill MVP SharePoint Server Branding and Design Lead SP911 Author Professional SharePoint 2010 Branding Real World SharePoint 2010 Professional SharePoint 2007 Design Blog: Twitter: Orlando, FL

3 John Ross MVP SharePoint Server Sr. SharePoint Consultant SP911 Author Professional SharePoint 2010 Branding Real World SharePoint 2010 MOSS Explained Professional SharePoint 2007 Design Blog: Twitter: Orlando, FL

4 And the Audience?

5 Agenda Important Terms Intro to the new User Experience Approaches to Branding Page Editing SharePoint 2010 Themes Alternate CSS Master Pages

6 What does branding mean?

7 What does branding mean? Branding: The act of building a specific image or identity that people recognize in relation to your company Website Branding: The colors, fonts, logos, and supporting graphics that make up the general look and feel of a corporate website. Branding for SharePoint: Master pages, page layouts, CSS, web parts, XSLT, images, etc.

8 Clarification The word design can often be confused with Software Design (planning for software development)

9 Vocabulary Lesson SharePoint Foundation 2010 is the free version of SharePoint Focused on collaboration with documents and light editing of web pages SharePoint Server 2010 is the licensed version of SharePoint Includes among other capabilities the Publishing Feature Much better platform for creating a strongly branded web site

10 Introduction Overview of the SharePoint 2010 User Experience

11 Web Standards Enhancements Web Content Accessibility Guidelines (WCAG) 2 Cross-browser support: IE, Firefox, Safari NO IE6 Less HTML Tables More XHTML compliant HTML CSS Sprites Better caching for icons

12 Browsers in 2010 Supported browsers on Windows: Internet Explorer bit Supported browser options with known limitations: Internet Explorer bit Firefox bit on Windows Firefox 3.6+ on non Windows operating systems Safari on non Windows operating systems Warning: SharePoint 2010 does not support Internet Explorer 6 for content authoring

13 Approaches to Branding in SP2010 Low Effort Out of the Box Master Pages & UI with Themes Medium Effort Custom CSS & Background Images Alternate CSS Full Effort Custom Master Pages, Page Layouts, CSS, XSLT, Etc.

14 Low Effort Branding Default SharePoint UI + Themes

15 Wiki Sites vs. Publishing Sites Wiki New Team Site Easy page editing / linking Text Layouts = Quick prebuilt page layouts Add images and Web Parts easily Collaboration Publishing Enterprise Wiki replaces Collaboration Portal Wiki pages + Publishing Page Layouts, Workflows, Master pages, caching, etc. Communication

16 Page Editing Demo

17 Master Pages Master pages allow you to change the look and feel for an entire site simply by making changes to a single file Can t have a SharePoint site without one even if you use a theme!

18 Out of the Box Master Pages Default.master Used with Visual Upgrade, very similar to the 2007 default.master Minimal.master Used on sites that have their own navigation on need more space (like the Search Center) V4.master The default master page for most of SharePoint 2010 including Foundation and Team Sites NightandDay.master Included only with Publishing sites. Similar to Blueband.master in 2007, but with a different look and feel. Minimal.master is not the same as minimal master pages were in SharePoint 2007

19 OOTB Master Pages

20 New Theming Infrastructure SharePoint 2007 Themes Were hard to build Only worked with default.master Had a nice personality

21 SharePoint 2010 Themes Themes in SharePoint 2010 are completely different than SharePoint 2007 Based on THMX files created by Office 2007 and above Define 12 colors and 2 fonts that can be applied throughout SharePoint including your own custom CSS Replace existing colors and fonts in CSS rather than applying another CSS file They do not include custom images or any HTML formatting

22 SharePoint 2010 Themes

23 SharePoint 2010 Themes SharePoint Server allows theme colors to be adjusted in the browser! CSS has comment s in the markup that tell SharePoint what colors and fonts to replace Can apply to your custom branding if you use the comments / themeable folder /* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;

24 Themes Demo

25 Medium Effort Branding Custom CSS

26 Why is CSS important with SharePoint? CSS used to override default SharePoint branding OOTB SharePoint uses a LOT of CSS Primary CoreV4.css file has over 7000 lines of CSS Besides the theming specific comments how many descriptive comments are in CoreV4.css?

27 Tools for Working with SharePoint & CSS SharePoint Designer 2010 No easier way to interact with a SharePoint site Be careful in Production. Go wild in a local VM Can be more restricted by Admins CSS Tools IE8 Developer Tools AND Firebug for Firefox Highlight elements in the browser and see What style is being applied to the HTML element How CSS classes are overriding each other Immediately see impact of CSS changes

28 Firebug / IE Dev Tools Demo

29 Here s how to order! SharePoint Designer IE Developer Tools Built in to IE8 Tools > Developer Tools IE7 Firebug:

30 Custom CSS Options CSS Applied to a page with Content Editor Web Part Easy to do but only applies to a single page CSS Applied to a custom master page Requires some knowledge of master pages Using the Alternate CSS feature of SharePoint Server Publishing sites Easy to do but requires SharePoint Server Publishing

31 Alternate CSS Demo

32 Applying Themes to Custom Branding When a theme is applied, SharePoint looks for specific CSS comments and replaces colors and fonts: /* [ReplaceColor(themeColor:"Light2")] */ background-color:#707070; /* [RecolorImage(themeColor:"Dark2", method:"tinting")] */ background-image:url("/style Library/images/logo.png"); /* [ReplaceFont(themeFont: "MajorFont")] */ font-family: verdana; Themable Locations Theme comments only work here (or any sub-folder beneath each) 14\TEMPLATE\LAYOUTS\1033\STYLES\Themable /Style Library/Themable/ /Style Library/en-us/Themable/

33 Theme Comments Demo

34 Recreating in Your Environment Create a wide header graphic Apply header with Alternate CSS Add a logo by setting the site icon Add theme comments and apply a theme

35 Intro to Full Effort Branding Master Pages Likely we have ~10 minutes left this will be fast

36 Master Pages Unlike themes, Master Pages allow full control over the contents of the page including HTML Adventure Works 2010 MSDN Article:

37 SharePoint Functional Elements

38 Creating New Master Pages One option is to copy one of the OOTB master pages V4.master NightAndDay.master Good for when you only need to make minor changes 665 lines of code how many comments? Ribbon takes up 1/3 of the code

39 Using a Starter Master Page The 2007 term Minimal Master Page has been replaced with Starter Master Page My SharePoint Server 2010 and SharePoint Foundation 2010 Starter Master Pages: startermasterpages.codeplex.com VERY Minimal Starter Master Page from Microsoft: code.msdn.microsoft.com/odcsp14startermaster

40 Starter Master Page

41 But wait there s more! Want to hear about more advanced branding? 10 Steps to Creating Engaging Web Portals Friday at 8:15 am Creating Custom Branded Sites Friday at 3:45 pm Stop by the SharePoint911 booth if you have any questions!

42 Contact Information Our Book: Blog: Twitter:

43 Questions

44 SharePoint911 Established in 2004 by SharePoint MVP Shane Young Full service SharePoint Consulting Project Planning Architecture Branding Development Help Desk We truly are The SharePoint Authority.

45 RACKSPACE HOSTING 5000 WALZEM ROAD SAN ANTONIO, TX US SALES: US SUPPORT: RACKSPACE HOSTING RACKSPACE US, INC. RACKSPACE AND FANATICAL SUPPORT ARE SERVICE MARKS OF RACKSPACE US, INC. REGISTERED IN THE UNITED STATES AND OTHER COUNTRIES