http://matthuber.com how to make sharepoint 2010 not look like sharepoint branding for developers by...
Post on 19-Dec-2015
220 views
TRANSCRIPT
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
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
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 – [email protected]
• Website – Matthuber.com
• Twitter – @Huber84