1. Branding with SharePoint 2010
Welcome!

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

3. About Me Cardinal Solutions Group: MCTS: WSS & MOSS Configuration
SharePoint Developer
MCTS: WSS & MOSS Configuration
Twitter: @Huber84

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

5. ?

6. Agenda
What is branding SharePoint?

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

8. What gets branded?

9. Default sharepoint site

10. Showing branded sites

11. Showing branded sites

12. Showing branded sites

13. Showing branded sites

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

15. Agenda
Key Concepts

16. Components of Branding
Master Pages
Page Layouts
CSS
Images
And more…

17. What is a Master.page? Acts as a container to each page.
Includes: Navigation, Search, Logos, Site actions controls and more

18. 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:

19. What is a Page Layout?
Contains zones for webparts and content to base Pages off of.

20. Page Layouts Each page has a page layout
Has <asp:Content> tags that put content into an associated <asp:ContentPlaceholder> on the master.page

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

22. CSS Multiple ways to apply CSS
External, Inline, in header
SharePoint has a lot of CSS…75+ style sheets

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

24. 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…

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

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

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

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

29. Tools IE Developer Toolbar Firebug Multiple Browsers
Notepad++ or a compare tool
SharePoint Designer
PowerShell

30. Agenda
What’s new in SharePoint 2010

31. The Good
Bland default brand. No branding from the Cornflower Blue theme
Export PowerPoint Theme and upload to SharePoint
Better cross-browser compliancy

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

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

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

35. Agenda
Branding Projects

36. Approx. breakdown of a project

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

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

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

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

41. Resources http://blog.drisgill.com/
public/SharePoint+Branding+Development
harepoint-2010-base-css-classes.html

42. Agenda
Thank You
Any Questions?