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. Office 365 / SharePoint Online flavors
• Designed for up to 25 employees who want:
• One site collection for collaboration
• Public web site
• Full access to create SharePoint 2010 site collections
• Can turn on the publishing features
• Public web site
11. Approaches to Branding
Full Effort
Sandbox Solutions for SharePoint Online - Custom
Master Pages, Page Layouts, CSS, XSLT
Medium Effort
Custom CSS & Images w/ Alternate CSS
Low Effort
Page Editing & Themes
13. Wiki Sites vs. Publishing Sites
• Team Sites
• Easy page editing / linking
• Text Layouts = Quick prebuilt page layouts
• Add images and Web Parts easily
• Collaboration focused
• Publishing Sites (365 Enterprise Plans can activate)
• Page Layouts instead of Text Layouts
• Ability to change master page easily
• Publishing Workflows, caching, etc.
• Communication focused
16. SharePoint 2010 Themes
• 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
• Does not include custom images or any HTML formatting
• Replaces existing colors and fonts in CSS rather than
overlapping multiple CSS files
• Publishing allows theme colors to be adjusted in the
browser!
19. 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?
20. Tools for Working with SharePoint & CSS
• SharePoint Designer 2010
• No easier way to interact with a SharePoint site
• Be careful in Production… you might ONLY have
production with SP Online
• Best to start with a local server or VM
• SPD access can be restricted by Admins
• CSS Tools
• IE Developer Tools (F12 Developer Tools) and/or 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
22. Here’s how to order!
• SharePoint Designer 2010
• www.microsoft.com/spd
• IE F12 Developer Tools
• Built in to IE8/9 – Tools > Developer Tools
• IE7 – http://bit.ly/iedevtoolbar
• Firebug:
• http://getfirebug.com/
23. Cascading Style Sheets 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 and sandbox solutions
• Using the Alternate CSS feature of Publishing sites
• Easy to do but requires
• Activate the Publishing features or create a Publishing site
• O365 Enterprise
26. 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
27. 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!
28. 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
31. 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
32. 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
35. What is a SharePoint Online Public Website
• Public facing internet site for marketing your business
• All Office 365 plans include one Public Website
• Small Business Plans have the Public Website automatically created
at the root level of their site
• Enterprise Plans can create one Public Website from the Manage
Site Collections menu
• Includes web based Site Design Tool to easily style your site
• Public Sites are an evolution of Office Live Small Business
36. Branding Public Websites
• SP Online Public Sites are NOT branded with master pages
and themes like traditional SharePoint sites
• They live in SharePoint and have a simple master page but
you should not edit it
• SharePoint Designer is NOT supported for editing SP
Online Public Websites
• Use the Site Design Tool to change the layout & design of
the site
37. Gadgets
• Stand-alone dynamic HTML “applications” that can be
added to pages in Public Websites
• Include Maps, Slide Show, Stocks, Weather, and more
• There is currently no functionality for adding your own
gadgets
38. Full Public Website Branding with Custom CSS
• Use IE Developer Tools and
Firebug to identify CSS
• Add background images to the
site
• Override CSS http://eslindustriesdemo.sharepoint.com
39. Full Public Website Branding with Custom CSS
• Instead of .s4-XYZ classes you will see a lot of .MS_ and .MSC_
• http://coderightdesign.com/Documents/CSS_Guide_OLSB.pdf
40. Contact Information
• Our Book:
• http://bit.ly/SP2013Branding
• http://bit.ly/sp2010-brandingbook
• Blog:
• http://blog.drisgill.com
• http://johnrossjr.wordpress.com
• Twitter:
• http://twitter.com/drisgill
• http://twitter.com/johnrossjr
Stop by the Rackspace booth if you have any questions!
John
How many Designer vs. Developers vs. Admin?
How many have worked with:
2007 branding
2010 branding
6
7
Randy
John to tell “stylist story”
John
Publishing enables
Ability to apply master pages and themes to all sub-sites from the Web UI
Useful for keeping branding consistent throughout SharePoint
More flexible navigation providers
Includes page layouts for page level templating
John
Randy
Randy will the audience for a volunteer who’s never created a theme
Randy
Randy
Modern 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
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.
John
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.
Randy
Randy
Can start from v4 or night and day as well
Can start from v4 or night and day as well
Randy
Site Design tool took what was in OLSB and brings it into the Ribbon in SharePoint
No SPD