View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
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
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
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!
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
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
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
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
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