http://MattHuber.com

How to make SharePoint 2010 not look like SharePoint

Branding for Developers

By Matt Huber

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

About Me

• SharePoint guy @ Cardinal Solutions• Love all things SharePoint– Branding is my favorite topic

• Video gamer

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Agenda

• Introduction• Goals & Objectives• What is Branding?• Key Concepts• Demo• Q/A

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > 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?

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

In a nutshell, branding is…

• Customization of the look & feel of SharePoint

• Making SharePoint not look like SharePointDesign Elements:

Master PagesCSSImagesPage Layouts

Colors

FontsTaglinesAnimationetc…

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

History – SharePoint Team Services

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

History – WSS 2.0

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

History – WSS 3.0

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Now… – SharePoint 2010

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Concepts again…

Design Elements:

Master PagesCSSImagesPage Layouts

Colors

FontsTaglinesAnimationetc…

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

What is a Page Layout?

• Contains zones for webparts and content.

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Page Layouts

• Most pages have a page layout• Team & Publishing site templates

behave differently• Has multiple <asp:Content> tags

that put content into an associated <asp:ContentPlaceholder> on the master.page

http://MattHuber.comIntro > 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.

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

CSS

• Multiple ways to apply CSS– External, inline, <style> tag

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

• CSS 3 is available…but know your target browsers

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Browsers….

I.E.; 41.56%

Firefox; 28.71%

Chrome; 11.75%

Safari; 9.26%

Other; 8.72%

Plan for browser support link: http://technet.microsoft.com/en-us/library/cc263526.aspx

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > 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…

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Tools

• IE Developer Toolbar or Firebug• Multiple Browsers• Notepad++ and a text comparison

tool• Fiddler• SharePoint Designer• PowerShell

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Demo

http://MattHuber.comIntro > 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.

http://MattHuber.comIntro > 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

http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A

Contact Me

• Email – Huber.Matt@gmail.com

• Website – Matthuber.com

• Twitter – @Huber84