Branding with SharePoint 2010

transcript

Welcome!

Agenda

• Introduction• Goals & Objectives• What is Branding• Key Concepts• What’s new in SharePoint 2010• Demo• Branding Projects• Q/A

Feel free to ask questions at any

About Me

• Cardinal Solutions Group:–SharePoint Developer

• MCTS: WSS & MOSS Configuration• mhuber@cardinalsolutions.com• www.matthuber.com• Twitter: @Huber84

Goals and Objectives• To gain a better understanding of what branding is

in SharePoint• To show that branding can enhance your

SharePoint experience• To give you some ideas on how you can brand your

environment• To show how branding solutions are

created.

Agenda

What is branding SharePoint?

In a nutshell• Customization of the ‘look & feel’ in SharePoint• Making SharePoint not look like SharePoint• Design Elements:

– Images– Color Palette– Tag lines, Titles– Layout

What gets branded?

What are the benefits of branding?• Provide a consistent look & feel across all

SharePoint sites• Can enhance your SharePoint experience• Show your brand’s colors/look applied to the

environment• In my opinion….creates ownership, better adoption

Agenda

Key Concepts

Components of Branding

• Master Pages• Page Layouts• CSS• Images• And more…

What is a Master.page?

• Acts as a container to each page.– Includes: Navigation, Search, Logos, Site actions

controls and more

Many, Many Master.pages• Upwards to 5-6 different master.pages

– Publishing, Teams, MySite, Search, Meeting Workspace

• Each contain different controls and custom actions related to that Site Definition

• Example: Search Center using a Team Site Master.page:

What is a Page Layout?

• Contains zones for webparts and content to base Pages off of.

Page Layouts

• Each page has a page layout• Has <asp:Content> tags that put content into

an associated <asp:ContentPlaceholder> on the master.page

What is CSS?

• Cascading Style Sheets – is a simple way to add styles (fonts, colors, spacing) to web pages.

• Multiple ways to apply CSS– External, Inline, in header

• SharePoint has a lot of CSS…75+ style sheets

Create new or edit existing?• Never edit existing SharePoint files on the 14 hive

(filesystem)!• Create new branding assets in the 14 hive.• Create new CSS files that are called AFTER the

core.css and other SharePoint CSS files.

Solution Architecture• Ghosted or UnGhosted solution?• Long story short…

– Ghosted customizations are compiled on the web server == faster, scalable, optimized

– UnGhosted customization are not compiled and pulled from the ContentDB == slower, individual sites

• Which one do we choose? It depends…

Solution Architecture Cont.• Branding, by default, is not automatically applied• Resolved by Feature Stapling – activate features when

a site definition is invoked– Feature Stapler

• Listens for site definitions to be invoked, then applies a Feature when its called.

• Contains an event receiver to apply branding to each site collection when activated and un-apply when deactivated.

– Feature Staplee• Contains the branding artifacts and event receivers to apply the

brand.

Feature Stapling with Branding Diagram

Team Site Created

Team Site Definition Invoked

Feature Activated on new

Team Site

Feature Event

Receiver “On

Activated” event fires

Branding is Applied

Feature Event Receivers• Occur in two places:

– Farm (Stapler)• OnActivation – Add Feature to all sites that are not

administration sites

• OnDeactivation – Remove Feature for all sites that are not administration sites

– Site Collection (Staplee)• OnActivation – change SPWeb.CustomMasterUrl (front-end),

SPWeb.MasterUrl (back-end), and SPWeb.AlternateCSSUrl (Overriding Style Sheet) to the custom branding

• OnDeactivation – revert back to default branding.

Lots of work…for these benefits:

• Automatic application of proper master.page when the site definition is invoked

• Automatic ‘reset’ of master.pages when Features are deactivated

• No modification of SharePoint default files.• Clean application, Clean removal, and no

need to manually apply branding per site collection.

• IE Developer Toolbar• Firebug• Multiple Browsers• Notepad++ or a compare tool• SharePoint Designer• PowerShell

Agenda

What’s new in SharePoint 2010

The Good

• Bland default brand. No branding from the Cornflower Blue theme

• Export PowerPoint Theme and upload to SharePoint

• Better cross-browser compliancy

The Bad, & The Ugly

• Some site definitions run off of a completely different set of styles

• To create teamsite layouts, need to Activate the publishing Features

• New sub-sites don’t automatically inherit the parent-site’s branding

Agenda

Tips & Tricks

• Use Starter Master.pages– Available on codeplex

• Use S4-NotDlg css class to exclude items from the Modal Popup window

• Achieving rounded web part corners are much easier

• Web Parts can have different styles…per Web Part Zone

Agenda

Branding Projects

Approx. breakdown of a project

Planning/Design Development TestingRollout Support

Planning & Design• Determine colors/styles/font/layout/etc.• The Designer works with the developer to make

sure SharePoint components are covered.• Target browsers and resolutions• Main “Mockup(s)” produced

Development• Implement the mockup• Create master.page, CSS, and page layouts.

– Custom web part dev might occur…if the brand requires it

• Use tools to test multiple page types and the solution.

Testing• VERY Important!• Have multiple testers because some people pay

more attention to detail than others.• Be particular

– Look for pixel errors, font inconsistencies, color mis-matches

• Track issues

Rollout & Support• Applying branding won’t change content…think of it

as a mask you can put on and take off.• There are 1000’s of lines of code in style sheets and

master.pages…so issues might show up.

Resources

• http://blog.drisgill.com/• http://

www.sharepointdevwiki.com/display/public/SharePoint+Branding+Development

• http://www.heathersolomon.com/blog/• http://

erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html

• http://www.matthuber.com

Agenda

Thank YouAny Questions?

Branding with SharePoint 2010

Documents