SharePoint 2010 Branding For The Masses SPSTC


Published on

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.

Published in: Technology, Design
1 Comment
  • Nice presentation. Let me introduce you Bind Tuning a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • Can start from v4 or night and day as well
  • Can start from v4 or night and day as well
  • John
  • SharePoint 2010 Branding For The Masses SPSTC

    1. 1. SharePoint 2010Branding for the Masses<br />
    2. 2. Randy Drisgill<br />MVP SharePoint Server<br />Branding and Design Lead – SP911<br />Author<br />Professional SharePoint 2010 Branding<br /><br />Real World SharePoint 2010 <br />Professional SharePoint 2007 Design<br />Blog:<br /><br />Twitter:<br /><br />Orlando, FL<br />
    3. 3. John Ross<br />MVP SharePoint Server<br />Sr. SharePoint Consultant – SP911<br />Author<br />Professional SharePoint 2010 Branding<br /><br />Real World SharePoint 2010 <br />Blog:<br /><br />Twitter:<br /><br />Blue Ribbon in Analogies 5th Grade<br />Orlando, FL<br />
    4. 4. And the Audience?<br />
    5. 5. Agenda<br />Important Terms<br />Intro to the new User Experience<br />Approaches to Branding<br />Page Editing<br />SharePoint 2010 Themes<br />Alternate CSS<br />Master Pages<br />
    6. 6. What does branding mean?<br />Personal Branding<br />
    7. 7. What does branding mean?<br />Branding: <br />The act of building a specific image or identity that people recognize in relation to your company<br />Website Branding: <br />The colors, fonts, logos, and supporting graphics that make up the general look and feel of a corporate website.<br />Branding for SharePoint: <br />Master pages, page layouts, CSS, web parts, XSLT, images, etc.<br />
    8. 8. Clarification<br />The word “design” can often be confused with Software Design (planning for software development)<br />
    9. 9. Vocabulary Lesson<br />SharePoint Foundation 2010 is the free version of SharePoint<br />Focused on collaboration with documents and light editing of web pages<br />SharePoint Server 2010 is the licensed version of SharePoint<br />Includes among other capabilities the Publishing Feature<br />Much better platform for creating a strongly branded web site<br />
    10. 10. Introduction<br />Overview of the SharePoint 2010 User Experience<br />
    11. 11.
    12. 12. Web Standards Enhancements<br />Web Content Accessibility Guidelines (WCAG) 2<br />Cross-browser support: IE, Firefox, Safari<br />NO IE6 <br />Less HTML Tables<br />More XHTML compliant HTML<br />CSS Sprites – Better caching for icons<br />
    13. 13. Browsers in 2010<br />Supported browsers on Windows:<br />Internet Explorer 7+ 32-bit<br />Supported browser options with known limitations:<br />Internet Explorer 7+ 64-bit<br />Firefox 3.6+ 32-bit on Windows<br />Firefox 3.6+ on non Windows operating systems<br />Safari 4.04+ on non Windows operating systems<br />Warning: SharePoint 2010 does not support Internet Explorer 6 for content authoring<br />
    14. 14. Approaches to Branding in SP2010<br />
    15. 15. Low Effort Branding<br />Default SharePoint UI + Themes<br />
    16. 16. Wiki Sites vs. Publishing Sites<br />Wiki<br />New Team Site<br />Easy page editing / linking<br />Text Layouts = Quick prebuilt page layouts<br />Add images and Web Parts easily<br />Collaboration<br />Publishing<br />Enterprise Wiki replaces Collaboration Portal<br />Wiki pages + Publishing<br />Page Layouts, Workflows, Master pages, caching, etc.<br />Communication<br />
    17. 17. Wiki Pages<br />
    18. 18. Page Editing Demo<br />
    19. 19. Master Pages<br />Master pages allow you to change the look and feel for an entire site simply by making changes to a single file<br />Can’t have a SharePoint site without one – even if you use a theme!<br />
    20. 20. Out of the Box Master Pages<br />Default.master – Used with Visual Upgrade, very similar to the 2007 default.master<br />Minimal.master – Used on sites that have their own navigation on need more space (like the Search Center)<br />V4.master – The default master page for most of SharePoint 2010 including Foundation and Team Sites<br />NightandDay.master – Included only with Publishing sites. Similar to Blueband.master in 2007, but with a different look and feel.<br />Minimal.master is not the same as minimal master pages were in SharePoint 2007<br />
    21. 21. OOTB Master Pages<br />
    22. 22. New Theming Infrastructure<br />SharePoint 2007 Themes <br />Were hard to build<br />Only worked with default.master<br />“Had a nice personality”<br />
    23. 23. SharePoint 2010 Themes<br />Themes in SharePoint 2010 are completely different than SharePoint 2007<br />Based on THMX files created by Office 2007 and above<br />Define 12 colors and 2 fonts that can be applied throughout SharePoint including your own custom CSS<br />Replace existing colors and fonts in CSS rather than applying another CSS file<br />They do not include custom images or any HTML formatting<br />
    24. 24. SharePoint 2010 Themes<br />
    25. 25. SharePoint 2010 Themes<br />SharePoint Server allows theme colors to be adjusted in the browser!<br />CSS has comment’s in the markup that tell SharePoint what colors and fonts to replace<br />Can apply to your custom branding if you use the comments / themeable folder<br />/* [ReplaceColor(themeColor:"Light1")] */<br />background-color:#fff;<br />
    26. 26.
    27. 27. Themes Demo<br />
    28. 28. Medium Effort Branding<br />Custom CSS<br />
    29. 29. Why is CSS important with SharePoint?<br />CSS used to override default SharePoint branding<br />OOTB SharePoint uses a LOT of CSS<br />Primary CoreV4.css file has over 7000 lines of CSS<br />Besides the theming specific comments how many descriptive comments are in CoreV4.css?<br />
    30. 30. Tools for Working with SharePoint & CSS<br />SharePoint Designer 2010<br />No easier way to interact with a SharePoint site<br />Be careful in Production. Go wild in a local VM<br />Can be more restricted by Admins<br />CSS Tools<br />IE8 Developer Tools AND Firebug for Firefox<br />Highlight elements in the browser and see… <br />What style is being applied to the HTML element<br />How CSS classes are overriding each other<br />Immediately see impact of CSS changes<br />
    31. 31. F12 Developer Tools<br />
    32. 32. Firebug<br />
    33. 33. Firebug / IE Dev Tools Demo<br />
    34. 34. Here’s how to order!<br />SharePoint Designer 2010 <br /><br /> IE Developer Tools<br />Built in to IE8 and IE9 – Tools > (F12) Developer Tools<br />IE7 –<br />Firebug:<br /><br />
    35. 35. Custom CSS Options<br />CSS Applied to a page with Content Editor Web Part<br />Easy to do but only applies to a single page<br />CSS Applied to a custom master page<br />Requires some knowledge of master pages<br />Using the Alternate CSS feature of SharePoint Server Publishing sites<br />Easy to do but requires SharePoint Server Publishing<br />Also possible with Powershell if you don’t have Publishing<br />
    36. 36. Alternate CSS<br />
    37. 37. Alternate CSS Demo<br />
    38. 38. Applying Themes to Custom Branding<br />When a theme is applied, SharePoint looks for specific CSS comments and replaces colors and fonts:<br />/* [ReplaceColor(themeColor:"Light2")] */<br />background-color:#707070;<br />/* [RecolorImage(themeColor:"Dark2", method:"Tinting")] */ <br />background-image:url("/Style Library/images/logo.png");<br />/* [ReplaceFont(themeFont: "MajorFont")] */<br />font-family: verdana;<br />Themable Locations – Theme comments only work here (or any sub-folder beneath each)<br />14TEMPLATELAYOUTS1033STYLESThemable<br />/Style Library/Themable/ <br />/Style Library/en-us/Themable/<br />
    39. 39. Theme Comments Demo<br />
    40. 40. Recreating in Your Environment<br />Create a wide header graphic<br />Apply header with Alternate CSS<br />Add a logo by setting the site icon<br />Add theme comments and apply a theme<br />
    41. 41. Intro to Full Effort Branding<br />Master Pages<br />Likely we have ~10 minutes left – this will be fast<br />
    42. 42. Master Pages<br />Unlike themes, Master Pages allow full control over the contents of the page including HTML<br />Adventure Works 2010 MSDN Article:<br />
    43. 43. SharePoint Functional Elements<br />
    44. 44. Creating New Master Pages<br />One option is to copy one of the OOTB master pages<br />V4.master<br />NightAndDay.master<br />Good for when you only need to make minor changes<br />665 lines of code… how many comments?<br />Ribbon takes up 1/3 of the code<br />
    45. 45. Using a Starter Master Page<br />The 2007 term “Minimal Master Page” has been replaced with “Starter Master Page”<br />My SharePoint Server 2010 and SharePoint Foundation 2010 Starter Master Pages:<br /><br />VERY Minimal Starter Master Page from Microsoft:<br /><br />
    46. 46. Starter Master Page<br />
    47. 47. Contact Information<br />Our Book:<br /><br />Blog:<br /><br /><br />Twitter:<br /><br /><br />
    48. 48. Questions<br />
    49. 49. SharePoint911<br />Established in 2004 by SharePoint MVP Shane Young<br />Full service SharePoint Consulting<br />Project Planning<br />Architecture<br />Branding<br />Development<br />Help Desk<br />We truly are “The SharePoint Authority.”<br /><br />