Branding with SharePoint 2010 Welcome!

Feel free to ask questions at any time! Agenda Feel free to ask questions at any time! Introduction Goals & Objectives What is Branding Key Concepts What’s new in SharePoint 2010 Demo Branding Projects Q/A

About Me Cardinal Solutions Group: MCTS: WSS & MOSS Configuration 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?

Default sharepoint site

Showing branded sites

Showing branded sites

Showing branded sites

Showing branded sites

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.

CSS 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.

Tools 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 Demo Show VS2010 Solution (explain each part and dive into some code) Show Before/After deployment Show Creation of new site collection Show how to change a style using IE Dev Toolbar Use Powershell to see properties on the site and change Stylesheet Themes Open preso, save themex file, upload to gallery and show how to modify themes SharePoint Designer Show how to modify a page Explain what it does (UNGHOSTS solution and only affects this site collection) Retract custom brand (show site), add cusotm brand (show site again), discard UNGHOSTED and show how it reverts back

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 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 Use tools to test multiple page types and the solution. 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 Track issues 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/s harepoint-2010-base-css-classes.html http://www.matthuber.com

Agenda Thank You Any Questions?