Your SlideShare is downloading. ×

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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
  • Transcript

    • 1. SharePoint 2010Branding for the Masses
    • 2. Randy Drisgill
      MVP SharePoint Server
      Branding and Design Lead – SP911
      Professional SharePoint 2010 Branding
      Real World SharePoint 2010
      Professional SharePoint 2007 Design
      Orlando, FL
    • 3. John Ross
      MVP SharePoint Server
      Sr. SharePoint Consultant – SP911
      Professional SharePoint 2010 Branding
      Real World SharePoint 2010
      Blue Ribbon in Analogies 5th Grade
      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?
      Personal Branding
    • 7. What does branding mean?
      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.
    • 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
    • 14. Approaches to Branding in SP2010
    • 15. Low Effort Branding
      Default SharePoint UI + Themes
    • 16. Wiki Sites vs. Publishing Sites
      New Team Site
      Easy page editing / linking
      Text Layouts = Quick prebuilt page layouts
      Add images and Web Parts easily
      Enterprise Wiki replaces Collaboration Portal
      Wiki pages + Publishing
      Page Layouts, Workflows, Master pages, caching, etc.
    • 17. Wiki Pages
    • 18. Page Editing Demo
    • 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
    • 21. OOTB Master Pages
    • 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
    • 24. SharePoint 2010 Themes
    • 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")] */
    • 26.
    • 27. Themes Demo
    • 28. Medium Effort Branding
      Custom CSS
    • 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
    • 31. F12 Developer Tools
    • 32. Firebug
    • 33. Firebug / IE Dev Tools Demo
    • 34. Here’s how to order!
      SharePoint Designer 2010
       IE Developer Tools
      Built in to IE8 and IE9 – Tools > (F12) Developer Tools
      IE7 –
    • 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
    • 36. Alternate CSS
    • 37. Alternate CSS Demo
    • 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")] */
      /* [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)
      /Style Library/Themable/
      /Style Library/en-us/Themable/
    • 39. Theme Comments Demo
    • 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:
    • 43. SharePoint Functional Elements
    • 44. Creating New Master Pages
      One option is to copy one of the OOTB master pages
      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:
      VERY Minimal Starter Master Page from Microsoft:
    • 46. Starter Master Page
    • 47. Contact Information
      Our Book:
    • 48. Questions
    • 49. SharePoint911
      Established in 2004 by SharePoint MVP Shane Young
      Full service SharePoint Consulting
      Project Planning
      Help Desk
      We truly are “The SharePoint Authority.”