JohnHow many Designer vs. Developers vs. Admin?How many have worked with:2007 branding2010 branding
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
Randy will the audience for a volunteer who’s never created a theme
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
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.
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.
Can start from v4 or night and day as well
Can start from v4 or night and day as well
Site Design tool took what was in OLSB and brings it into the Ribbon in SharePointNo SPD
Use the style sheet tab to add custom CSS
Intro to Branding SharePoint2010 in the Farm & OnlineRandy Drisgill & John RossSharePoint MVPsRackspace Hosting
Agenda• Important Terms• Approaches to Branding• Page Editing• SharePoint 2010 Themes• Alternate CSS• Master Pages
What does branding mean?
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.
Clarification• The word “design” can often be confused with Software Design (planning for software development)
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
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
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
Low Effort BrandingPage editing and themes
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
Page Editing Demo
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!
Medium Effort BrandingCustom CSS
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?
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
Firebug / IE Dev Tools Demo
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/
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
Alternate CSS Demo
Intro to Full Effort BrandingMaster Pages
Master Pages• Unlike themes, Master Pages allow full control over the contents of the page including HTMLAdventure Works 2010 MSDN Article: http://bit.ly/Real-World-Branding
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!
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
OOTB Master Pages
SharePoint Functional Elements
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
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
Starter Master Page
Public Website BrandingWorking with SharePoint Online Public Websites
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
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
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
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
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
Contact InformationStop by the Rackspace booth if you have any questions!• 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