How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber

Intro > Examples > Concepts > Demo > Q/A About Me SharePoint Cardinal Solutions Love all things SharePoint –Branding is my favorite topic Video gamer

Intro > Examples > Concepts > Demo > Q/A Agenda Introduction Goals & Objectives What is Branding? Key Concepts Demo Q/A

Intro > Examples > Concepts > Demo > Q/A Goals & Objectives Learn what Branding is for SharePoint Show how Branding can enhance the SharePoint experience Get some ideas brewing for your brand Show how branding solutions are created

Intro > Examples > Concepts > Demo > Q/A I have some questions… Who is using SP2010? Earlier? Is anyone using the default brand? Has anyone branded SharePoint before?

Intro > Examples > Concepts > Demo > Q/A In a nutshell, branding is… Customization of the look & feel of SharePoint Making SharePoint not look like SharePoint Design Elements: Master Pages CSS Images Page Layouts Colors Fonts Taglines Animation etc…

Intro > Examples > Concepts > Demo > Q/A History – SharePoint Team Services

Intro > Examples > Concepts > Demo > Q/A History – WSS 2.0

Intro > Examples > Concepts > Demo > Q/A History – WSS 3.0

Intro > Examples > Concepts > Demo > Q/A Now… – SharePoint 2010

Intro > Examples > Concepts > Demo > Q/A

Intro > Examples > Concepts > Demo > Q/A

Intro > Examples > Concepts > Demo > Q/A Concepts again… Design Elements: Master Pages CSS Images Page Layouts Colors Fonts Taglines Animation etc…

Intro > Examples > Concepts > Demo > Q/A What is a Master.page? Acts as a container to each page. –Includes: Navigation, Search, Logos, Site actions controls and more

Intro > Examples > Concepts > Demo > Q/A Many, Many, Master.pages 5-6 different master.pages Publishing, Teams, MySite, Search, Meeting Workspace Each contain different controls and custom actions related to that Site Definition

Intro > Examples > Concepts > Demo > Q/A What is a Page Layout? Contains zones for webparts and content.

Intro > Examples > Concepts > Demo > Q/A Page Layouts Most pages have a page layout Team & Publishing site templates behave differently Has multiple tags that put content into an associated on the master.page

Intro > Examples > Concepts > Demo > Q/A What is CSS? Cascading Style Sheets – is a simple way to add fonts, colors, spacing and more to web pages.

Intro > Examples > Concepts > Demo > Q/A CSS Multiple ways to apply CSS –External, inline, tag SharePoint has a lot of CSS… 75+ style sheets CSS 3 is available…but know your target browsers

Intro > Examples > Concepts > Demo > Q/A Browsers…. Plan for browser support link:

Intro > Examples > Concepts > Demo > Q/A Should we edit OOTB files?? Never! Don’t edit the existing CSS files, master.pages, images, or page layouts. We can create branding assets in a variety of ways while still being in a supported state

Intro > Examples > Concepts > Demo > Q/A The implementation types Comes in a few forms: –Farm Solution –Sandbox Solution –Custom Branded solutions that accept themes –Themes –SharePoint Designer…

Intro > Examples > Concepts > Demo > Q/A The Farm Solution Contains: –1 Farm Feature Applies branding to the farm (minus CA!) SPFeature.Add(“Site Collection Feature”) Also removes on deactivation –1 Site Collection Feature Applies branding to a site collection Sets SPWeb.CustomMasterURL, SPWeb. MasterUrl, & SPWeb.AlternateCSSUrl values

Intro > Examples > Concepts > Demo > Q/A More on the Farm Solution Contains a lot more… –Multiple event receivers –Branding Assets (Master pages, page layouts) –Mapped Folders for _Layouts & _Images –Feature Stapling –Kitchen sink

Intro > Examples > Concepts > Demo > Q/A Lots of work… but for some good benefits! Automatic application of the proper master.page when the site definition is invoked Global on/off switch No modification of SharePoint files! Clean application, clean removal, we are on auto pilot now

Intro > Examples > Concepts > Demo > Q/A Tools IE Developer Toolbar or Firebug Multiple Browsers Notepad++ and a text comparison tool Fiddler SharePoint Designer PowerShell

Intro > Examples > Concepts > Demo > Q/A Demo

Intro > Examples > Concepts > Demo > Q/A Tips & Tricks Use Starter Master.Pages –Available on CodePlex Use CSS class ‘S4-NotDlg’ to exclude elements from the Modal Popup window Web Parts can have different styles…per Web Part Zone.

Intro > Examples > Concepts > Demo > Q/A More Tips & Tricks Use those developer tools MSDN has some great resources.. Best starting point ever… –Bing: Real World Branding with SharePoint 2010 Publishing Sites

Intro > Examples > Concepts > Demo > Q/A Contact Me – Website – Matthuber.com Twitter