how to make sharepoint 2010 not look like sharepoint
DESCRIPTION
How to make SharePoint 2010 not look like SharePoint. Branding for Developers By Matt Huber. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/1.jpg)
http://MattHuber.com
How to make SharePoint 2010 not look like SharePoint
Branding for Developers
By Matt Huber
![Page 2: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/2.jpg)
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
![Page 3: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/3.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
Agenda
• Introduction• Goals & Objectives• What is Branding?• Key Concepts• Demo• Q/A
![Page 4: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/4.jpg)
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
![Page 5: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/5.jpg)
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?
![Page 6: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/6.jpg)
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…
![Page 7: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/7.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
History – SharePoint Team Services
![Page 8: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/8.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
History – WSS 2.0
![Page 9: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/9.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
History – WSS 3.0
![Page 10: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/10.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
Now… – SharePoint 2010
![Page 11: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/11.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
![Page 12: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/12.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
![Page 13: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/13.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
Concepts again…
Design Elements:
Master PagesCSSImagesPage Layouts
Colors
FontsTaglinesAnimationetc…
![Page 14: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/14.jpg)
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
![Page 15: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/15.jpg)
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
![Page 16: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/16.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
What is a Page Layout?
• Contains zones for webparts and content.
![Page 17: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/17.jpg)
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
![Page 18: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/18.jpg)
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.
![Page 19: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/19.jpg)
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
![Page 20: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/20.jpg)
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
![Page 21: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/21.jpg)
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
![Page 22: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/22.jpg)
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…
![Page 23: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/23.jpg)
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
![Page 24: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/24.jpg)
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
![Page 25: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/25.jpg)
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
![Page 26: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/26.jpg)
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
![Page 27: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/27.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
Demo
![Page 28: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/28.jpg)
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.
![Page 29: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/29.jpg)
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
![Page 30: How to make SharePoint 2010 not look like SharePoint](https://reader030.vdocuments.mx/reader030/viewer/2022033023/56815d8a550346895dcb94ef/html5/thumbnails/30.jpg)
http://MattHuber.comIntro > Examples > Concepts > Demo > Q/A
Contact Me
• Email – [email protected]• Website – Matthuber.com• Twitter – @Huber84