When it comes to the look and feel of your SharePoint site, sometimes all you need is a little bit of custom style to move it to the next level. This session will introduce the topic of branding as it relates to SharePoint 2010 in a way that anyone can approach. We will look at some of the technologies involved in creating branding for SharePoint 2010, which will include creating a custom SharePoint 2010 theme using Microsoft Office, as well as making changes to master pages using SharePoint Designer 2010.
Throughout the session, we will discuss new features that affect branding in SharePoint 2010 such as the Ribbon, Wiki Pages and Visual Upgrade. By the end of the session, attendees will have a basic understanding of how to make their SharePoint 2010 website look more like their existing corporate Web design.
2. Randy Drisgill MVP SharePoint Server Branding and Design Lead – SP911 Author Professional SharePoint 2010 Branding http://bit.ly/sp2010-brandingbook Real World SharePoint 2010 Professional SharePoint 2007 Design Blog: http://blog.drisgill.com Twitter: http://twitter.com/Drisgill Orlando, FL
3. John Ross MVP SharePoint Server Sr. SharePoint Consultant – SP911 Author Professional SharePoint 2010 Branding http://bit.ly/sp2010-brandingbook Real World SharePoint 2010 Blog: http://www.sharepoint911.com/blogs/john Twitter: http://twitter.com/johnrossjr Blue Ribbon in Analogies 5th Grade Orlando, FL
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
12. 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
13. Browsers in 2010 Supported browsers on Windows: Internet Explorer 7+ 32-bit Supported browser options with known limitations: Internet Explorer 7+ 64-bit Firefox 3.6+ 32-bit on Windows Firefox 3.6+ on non Windows operating systems Safari 4.04+ on non Windows operating systems Warning: SharePoint 2010 does not support Internet Explorer 6 for content authoring
16. 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
19. 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!
20. 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
22. New Theming Infrastructure SharePoint 2007 Themes Were hard to build Only worked with default.master “Had a nice personality”
23. 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
25. 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;
29. 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?
30. 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
34. Here’s how to order! SharePoint Designer 2010 www.microsoft.com/spd IE Developer Tools Built in to IE8 and IE9 – Tools > (F12) Developer Tools IE7 – http://bit.ly/iedevtoolbar Firebug: http://getfirebug.com/
35. 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 Also possible with Powershell if you don’t have Publishing
38. 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) 14EMPLATEAYOUTS033TYLEShemable /Style Library/Themable/ /Style Library/en-us/Themable/
40. 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
41. Intro to Full Effort Branding Master Pages Likely we have ~10 minutes left – this will be fast
42. Master Pages Unlike themes, Master Pages allow full control over the contents of the page including HTML Adventure Works 2010 MSDN Article: http://bit.ly/Real-World-Branding
44. 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
45. 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
49. 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.” http://www.sharepoint911.com
Notas do Editor
John
Randy
John
JohnHow many Designer vs. Developers vs. Admin?How many have worked with:2007 branding2010 branding
John
John
RandyJohn to tell “stylist story”
JohnPublishing enablesAbility to apply master pages and themes to all sub-sites from the Web UIUseful for keeping branding consistent throughout SharePointMore flexible navigation providersIncludes page layouts for page level templating
John
Randy
Randy
John
John
John
Randy
JohnThink back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
Randy
Randy
John
John
John
Randy
Randy will the audience for a volunteer who’s never created a theme
Randy
RandyModern web design standards dictate that whenever possible tables are used only for data, not for page layout. In SharePoint 2007, because we are working with HTML written for IE5.5 we often find that table based branding is more efficient
Randy
Randy
Randy
Randy
Randy
Randy
Think back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.