Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber."— Presentation transcript:

1 http://MattHuber.com How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber

2 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A About Me SharePoint guy @ Cardinal Solutions Love all things SharePoint –Branding is my favorite topic Video gamer

3 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A Agenda Introduction Goals & Objectives What is Branding? Key Concepts Demo Q/A

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

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

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

7 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A History – SharePoint Team Services

8 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A History – WSS 2.0

9 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A History – WSS 3.0

10 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A Now… – SharePoint 2010

11 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A

12 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A

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

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

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

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

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

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

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

20 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A Browsers…. Plan for browser support link: http://technet.microsoft.com/en-us/library/cc263526.aspxhttp://technet.microsoft.com/en-us/library/cc263526.aspx

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

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

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

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

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

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

27 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A Demo

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

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

30 http://MattHuber.com Intro > Examples > Concepts > Demo > Q/A Contact Me Email – Huber.Matt@gmail.com Website – Matthuber.com Twitter – @Huber84


Download ppt "How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber."

Similar presentations


Ads by Google