SharePoint 2010 Branding For The Masses SPSTC

SharePoint 2010Branding for the Masses

Randy Drisgill
MVP SharePoint Server
Branding and Design Lead – SP911
Author
Professional SharePoint 2010 Branding
http://bit.ly/sp2010-brandingbook
Real World SharePoint 2010
Professional SharePoint 2007 Design
Blog:
http://blog.drisgill.com
Twitter:
http://twitter.com/Drisgill
Orlando, FL

John Ross
MVP SharePoint Server
Sr. SharePoint Consultant – SP911
Author
Professional SharePoint 2010 Branding
Real World SharePoint 2010
Blog:
http://www.sharepoint911.com/blogs/john
Twitter:
http://twitter.com/johnrossjr
Blue Ribbon in Analogies 5th Grade
Orlando, FL

And the Audience?

Agenda
Important Terms
Intro to the new User Experience
Approaches to Branding
Page Editing
SharePoint 2010 Themes
Alternate CSS
Master Pages

What does branding mean?
Personal Branding

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

Introduction
Overview of the SharePoint 2010 User Experience

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

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

Approaches to Branding in SP2010

Low Effort Branding
Default SharePoint UI + Themes

Wiki Sites vs. Publishing Sites
Wiki
New Team Site
Easy page editing / linking
Text Layouts = Quick prebuilt page layouts
Add images and Web Parts easily
Collaboration
Publishing
Enterprise Wiki replaces Collaboration Portal
Wiki pages + Publishing
Page Layouts, Workflows, Master pages, caching, etc.
Communication

Wiki Pages

Page Editing Demo

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

New Theming Infrastructure
Were hard to build
Only worked with default.master
“Had a nice personality”

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

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")] */
background-color:#fff;

Themes Demo

Medium Effort Branding
Custom 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. 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

F12 Developer Tools

Firebug

Firebug / IE Dev Tools Demo

Here’s how to order!
SharePoint Designer 2010
www.microsoft.com/spd
IE Developer Tools
Built in to IE8 and IE9 – Tools > (F12) Developer Tools
IE7 – http://bit.ly/iedevtoolbar
Firebug:
http://getfirebug.com/

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

Alternate CSS

Alternate CSS Demo

Applying Themes to Custom Branding
When a theme is applied, SharePoint looks for specific CSS comments and replaces colors and fonts:
/* [ReplaceColor(themeColor:"Light2")] */
background-color:#707070;
/* [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)
14TEMPLATELAYOUTS1033STYLESThemable
/Style Library/Themable/
/Style Library/en-us/Themable/

Theme Comments Demo

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

Intro to Full Effort Branding
Master Pages
Likely we have ~10 minutes left – this will be fast

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

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

Contact Information
Our Book:
Blog:
http://blog.drisgill.com
http://www.sharepoint911.com/blogs/john
Twitter:
http://twitter.com/drisgill
http://twitter.com/johnrossjr

Questions

SharePoint911
Established in 2004 by SharePoint MVP Shane Young
Full service SharePoint Consulting
Project Planning
Architecture
Branding
Development
Help Desk
We truly are “The SharePoint Authority.”
http://www.sharepoint911.com

http://johnrossjr.wordpress.com	422
http://popspsdevweb3	48

SharePoint 2010 Branding For The Masses SPSTC

by John Ross on Aug 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 470

Statistics

SharePoint 2010 Branding For The Masses SPSTC — Presentation Transcript