1 / 30

How to make SharePoint 2010 not look like SharePoint

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

nan
Download Presentation

How to make SharePoint 2010 not look like SharePoint

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. About Me • SharePoint guy @ Cardinal Solutions • Love all things SharePoint • Branding is my favorite topic • Video gamer

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

  4. 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. I have some questions… • Who is using SP2010? Earlier? • Is anyone using the default brand? • Has anyone branded SharePoint before?

  6. 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. History – SharePoint Team Services

  8. History – WSS 2.0

  9. History – WSS 3.0

  10. Now… – SharePoint 2010

  11. Concepts again… • Design Elements: • Master Pages • CSS • Images • Page Layouts • Colors • Fonts • Taglines • Animation • etc…

  12. What is a Master.page? • Acts as a container to each page. • Includes: Navigation, Search, Logos, Site actions controls and more

  13. 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

  14. What is a Page Layout? • Contains zones for webparts and content.

  15. 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

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

  17. 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

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

  19. 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

  20. The implementation types • Comes in a few forms: • Farm Solution • Sandbox Solution • Custom Branded solutions that accept themes • Themes • SharePoint Designer…

  21. 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

  22. 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

  23. 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

  24. Tools • IE Developer Toolbar or Firebug • Multiple Browsers • Notepad++ and a text comparison tool • Fiddler • SharePoint Designer • PowerShell

  25. Demo

  26. 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.

  27. 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

  28. Contact Me • Email – Huber.Matt@gmail.com • Website – Matthuber.com • Twitter –@Huber84

More Related