How to make SharePoint 2010 not look like SharePoint

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


Agenda

• Introduction• Goals & Objectives• What is Branding?• Key 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


I have some questions…

• Who is using SP2010? Earlier?

• Is anyone using the default brand?

• Has anyone branded SharePoint before?


In a nutshell, branding is…

• Customization of the look & feel of SharePoint

• Making SharePoint not look like SharePointDesign Elements:

Master PagesCSSImagesPage Layouts

Colors

FontsTaglinesAnimationetc…


History – SharePoint Team Services


History – WSS 2.0


History – WSS 3.0


Now… – SharePoint 2010


Concepts again…

Design Elements:

Master PagesCSSImagesPage Layouts

Colors

FontsTaglinesAnimationetc…


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

• 5-6 different master.pages• Publishing, Teams, MySite, Search,

Meeting Workspace • Each contain different controls and

custom actions related to that Site Definition


What is a Page Layout?

• Contains zones for webparts and content.


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


What is CSS?

• Cascading Style Sheets – is a simple way to add fonts, colors, spacing and more to web pages.


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


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://technet.microsoft.com/en-us/library/cc263526.aspx

http://technet.microsoft.com/en-us/library/cc263526.aspx

http://internet-browser-review.toptenreviews.com/mozilla-firefox-review.html

http://internet-browser-review.toptenreviews.com/internet-explorer-review.html

http://internet-browser-review.toptenreviews.com/safari-review.html

http://internet-browser-review.toptenreviews.com/google-chrome-review.html


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



The implementation types

• Comes in a few forms:– Farm Solution– Sandbox Solution– Custom Branded solutions that accept

themes– Themes– SharePoint Designer…



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



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



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



Tools

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

tool• Fiddler• SharePoint Designer• PowerShell



Demo


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.


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


Contact Me

• Email – [email protected]• Website – Matthuber.com• Twitter – @Huber84

How to make SharePoint 2010 not look like SharePoint

Documents

Transcript of How to make SharePoint 2010 not look like SharePoint