Custom SharePoint Branding Guide
•Transferir como PPTX, PDF•
1 gostou•6,739 visualizações
This document provides an overview of how to create custom branding for SharePoint. It discusses the design process, using master pages and page layouts, and deploying branding solutions. The presenters are SharePoint MVPs who provide information on their backgrounds and expertise. They outline the SharePoint design process and discuss elements like vision, requirements, design, development, testing and deployment. Details are provided on master page history and functionality in ASP.NET and SharePoint. The use of controls, content placeholders and CSS are explained. Methods for creating and customizing SharePoint master pages are described. Finally, deployment options like sandboxed and farm solutions are covered.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Custom SharePoint Branding Guide
Semelhante a Custom SharePoint Branding Guide (20)
Mais de SPTechCon
Mais de SPTechCon (20)
Custom SharePoint Branding Guide
- 1. Popping the Hood: How to Create Custom SharePoint Branding Randy Drisgill & John Ross SharePoint MVPs Rackspace Hosting
- 2. Randy Drisgill • MVP SharePoint Server • SP Branding & Design Lead – Rackspace Hosting • Author • Coming Soon- SharePoint 2013 Branding & UI Design • http://bit.ly/SP2013Branding • Professional SharePoint 2010 Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://blog.drisgill.com • Twitter: • http://twitter.com/Drisgill • Orlando, FL
- 3. John Ross • MVP SharePoint Server • Custom Solutions Lead – Rackspace • Author • Coming Soon- SharePoint 2013 Branding & UI Design • http://bit.ly/SP2013Branding • Professional SharePoint 2010 Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://johnrossjr.wordpress.com • Twitter: • http://twitter.com/johnrossjr • Orlando, FL
- 4. The SharePoint Design Process Vision and Requirements Design Goals Create Build HTML dynamic SharePointify and CSS elements Test Deploy Flip the switch
- 5. Master Pages History Lesson Master Pages 101
- 6. Before Master Pages • Remember back to the bad old days of web design • Every page had 100% of the HTML included • ASP Includes helped with reuse • With ASP.net 2.0 Master Pages were introduced • Page design separate from both content and code
- 7. Master Pages Basics • They can be thought of as the outer shell of a site design • The glue that holds the page together • HTML • JavaScript • CSS • Content Placeholders • Controls • ASP.net code
- 8. Master Pages in ASP.NET • Can be created in C# or VB.net • For SharePoint they are created in C# • ASPX Pages refer to MP’s by the @ Page directive • <%@ Page Language="C#" MasterPageFile="demo.master" %>
- 9. Simple ASP.NET Content Page demo.master MainBody Hello World Footer Override the Footer
- 10. Simple ASP.NET Master Page <%@ Master Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"... > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo Title</title> </head> <body> <form runat="server"> <div> <asp:ContentPlaceHolder ID="MainBody" runat="server"/> </div> <div> <asp:ContentPlaceHolder id="Footer" runat="server"> Copyright 2012 - Randy Drisgill </asp:ContentPlaceHolder> </div> </form> </body> </html>
- 11. HTML Page Result <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"... > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo Title</title> </head> <body> <form name="aspnetForm" method="post" action="teched.aspx" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="..." /> </div> <div> Hello World </div> <div> Override the Footer </div> </form> </body> </html>
- 12. Content Placeholders • Content placeholders listed in ASPX pages MUST have a matching placeholder on the applied master page • Pages will error if they aren't! • Content placeholders listed in a master page DO NOT need to be used in a ASPX page • This is an important concept in SharePoint because Microsoft uses a lot of Content Placeholders
- 13. Controls • Self contained built-in or custom functionality that can be loaded on pages and master pages • Examples: Search box control, Login control, Navigation control, etc. • User Controls • Usually simple functionality • .ASCX file • Server controls • Compiled code • DLL loaded on the server
- 14. Using Controls • Registered at the top of the page <%@ Register TagPrefix="Custom" TagName="Search" src="searchbox.ascx" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neu tral, PublicKeyToken=71e9bce111e9429c" %> • Use in the page <Custom:Search ID="mySearchControl" runat="server" /> • Pass in property values <Custom:Search ID="mySearchControl" ButtonImage="go.png" runat="server" />
- 15. Master Pages in SharePoint
- 16. Master Pages in SharePoint • Like ASP.NET master pages… but with more “stuff” • Coded in C# • They have required Content Placeholders • The OOTB v4.master page is about 665 lines of code • How many comments? • Approximately 1/3 is code that builds the Ribbon
- 17. Custom SharePoint Master Pages Adventure Works MSDN Article: http://bit.ly/Real-World-Branding
- 18. <%@Master language="C#"%> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e94 29c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e942 9c" %> <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e94 29c" %> <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="<% $Resources:wss,language_value%>" dir="<!$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas- microsoft-com:office:office"> <head runat="server"> <meta http-equiv="X-UA-Compatible" content="IE=8"/> <meta name="GENERATOR" content="Microsoft SharePoint"/> <meta name="progid" content="SharePoint.WebPartPage.Document"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Expires" content="0"> <SharePoint:RobotsMetaTag runat="server"/> <!-- This placeholder contains the title of the page. --> <title id="onetidTitle"><asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/></title> <SharePoint:CssLink runat="server" Version="4"/> <SharePoint:Theme runat="server"/> <SharePoint:ULSClientConfig runat="server"/> <!-- This script is used to tell other EcmaScript (JavaScript, JScript) elements that you are using a v4 master page. --> <script type="text/javascript">
- 20. Beauty isn’t skin deep • Planning • Creative Design / User Experience (UX) • Master Pages, CSS, Page Layouts • Web parts • Testing • Content entry • Custom Development
- 21. Where do you start? • What do we hope to accomplish? • How will we know when we get there? • Audience? Goals? • Type of site? • Major types of content • Corporate Style Guidelines? • Navigation needs? Searching? Web Parts?
- 23. Wireframes and Creative Comps • Useful for getting approval before spending effort making in SharePoint • Wireframes – Show basic concepts in black and white • Creative comps – Realistic mockup of the site
- 24. HTML Version of the Site • Good for complex designs • Allows you to build out the design and test without dealing with SharePoint issues • Many of the assets can be re-used in SharePoint • Be sure to start with XHTML 1.0 Strict for SP2010
- 25. Starting a New Master Page • Start from an existing master page • One option is to copy one of the OOTB master pages • V4.master • NightAndDay.master • Good for when you only need to make minor changes • Use a starter master page • startermasterpages.codeplex.com
- 26. Using a Starter Master Page • Add the starter master page to the master page gallery • Rename it • As changes are made, check-in major version and approve
- 27. Adding the HTML Assets • Add the images and CSS to the Style Library • Make sure your CSS is applied after CoreV4.css <SharePoint:CssRegistration name="/Style Library/customstyle.css" After="corev4.css" runat="server"/>
- 28. Arrange HTML • Move the HTML around the various SharePoint elements
- 31. Handling Required CPH’s • Referenced by various pages in SharePoint • Deleting them will cause an error • Instead hide them in an <asp:Panel> <asp:Panel visible="false" runat="server"> <asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/> <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server"/> </asp:Panel>
- 32. Adjust CSS and HTML • Use IE Developer Tools (built in to IE8/9) and Firebug to debug CSS issues • http://getfirebug.com/ • Highlight elements in the browser and see… • What style is being applied to the HTML element • How CSS classes are overriding each other • Immediately see impact of CSS changes
- 33. Master Page Demo
- 35. Page Layouts
- 36. What is a Page Layout • Many pages can be based on one page layout
- 37. Simple SharePoint Page Layout <%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage… <%@ Register Tagprefix="SharePointWebControls"… <%@ Register Tagprefix="WebPartPages"… <%@ Register Tagprefix="PublishingWebControls"… <%@ Register Tagprefix="PublishingNavigation"… <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/> </asp:Content> <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"> </asp:Content>
- 38. Examples of how page layouts are used • Allowing content authors to enter organized information • Adding Fields that a Web Part can rollup • Embedding a web part that filters based on URL parameters
- 41. What is deployment? • The process of putting your design and related assets onto a server – eventually production • Where do you put the files and how do you get them there? • Final piece of the branding process • Options • Upload files through the SP UI • SPD • Use Visual Studio 2010 • Sandboxed Solution • Farm Solution
- 42. Method of deployment • SharePoint Designer or upload through the UI • Fine for dev and very small implementations • Sandboxed Solutions • Option of choice for Office 365 • Deploys files to the site collection only, limited functionality, low risk • Farm Solutions • Requires a farm admin to deploy • Files can be used by all site collections, greater flexibility, more risk
- 43. Customized vs. Uncustomized Files • Source of file lives on the server file system • Many documents point to single file • Ex. OOTB page layouts • Source of the file lives in the content database • Ex. Files modified through SharePoint UI and SharePoint Designer
- 44. Steps to deploy branding Step 1 Create a Visual Studio Solution and Project Step 2 Add files to modules which mirror SharePoint structure Step 3 Configure Element.xml for each module to deploy files Step 4 Use feature receiver to switch master page and event receiver to automatically set master page for newly created sites. Step 5 Deploy this as a SharePoint Solution (.WSP) to your SharePoint farm
- 45. Creating SharePoint Solutions • What you’ll need • Visual Studio 2010 • CKS:Dev (optional but very helpful!) • http://cksdev.codeplex.com/ • Download from Extension Manager in VS2010 • Time and patience
- 46. Creating a WSP Using Visual Studio 2010 and CKS:Dev
- 47. Helpful resources • Deploying Branding Solutions for SharePoint 2010 Sites Using Sandboxed Solutions • http://msdn.microsoft.com/en-us/library/gg447066.aspx • Packaging master pages and page layouts • http://blogs.msdn.com/b/bobgerman/archive/2011/01/31/packagin g-master-pages-and-page-layouts-with-visual-studio-2010.aspx
- 48. Contact Information Stop by the Rackspace booth if you have any questions! • Our Book: • http://bit.ly/SP2013Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://blog.drisgill.com • http://johnrossjr.wordpress.com • Twitter: • http://twitter.com/drisgill • http://twitter.com/johnrossjr
- 49. Questions
- 50. RACKSPACE® HOSTING | 5000 WALZEM ROAD | SAN ANTONIO, TX 78218 US SALES: 1-800-961-2888 | US SUPPORT: 1-800-961-4454 | WWW.RACKSPACE.COM RACKSPACE® HOSTING | © RACKSPACE US, INC. | RACKSPACE® AND FANATICAL SUPPORT® ARE SERVICE MARKS OF RACKSPACE US, INC. REGISTERED IN TH E UNITED STATES AND OTHER COUNTRIES. | WWW.RACKSPACE.COM 5
Notas do Editor
- John
- Randy
- John
- You have to walk before you runASP.NET master pages are easier to understand then SP master pagesLot less code
- What is a master page?
- In SP, Microsoft created the pages so you will need to make sure you have matching CPH
- Apply one to sharepoint
- John:Story:Not just 12 pages
- John:Identify stakeholdersBe careful beware of design by committeeHow do we know when we are finished?
- John:Avoid general non specific requirements – actionableAvoid design by committee - A Camel is a horse that was designed by committee
- Show v4 and night and day
- Show v4 and night and day
- A The Ribbon - The entire top portion of the UI is actually part of the ribbon. It shows and hides depending on the user’s current context.B Site Actions - Used primarily by content authors and administrators. It is the main menu for interacting with SharePoint.C Global Breadcrumbs Pop-out - This is a new implementation of the global breadcrumbs from SharePoint 2007. When the user clicks the icon a dynamic HTML pop-out shows a hierarchical view of the site which can be used for navigating up from the current location.D Page State Action Button -This icon is used for controlling the page state; it typically shows a shortcut to edit / save the current page.E Ribbon Contextual Tabs - This section changes constantly based on what the user is interacting with on the page. The purpose is to bring up menus specific to the various functions of the SharePoint site.F Welcome Menu - This control shows the welcome message as well as allowing the user to view their profile, sign out, and sign in as another user. If other language packs are installed, the ability to change the user’s language is also available here. When the user is not logged in, this shows the Sign In link as well.G Developer Dashboard Launcher - This button launches the Developer Dashboard which is typically shown at the bottom of the screen. The Developer Dashboard contains statistics about the page rendering and queries. It is typically hidden, and can be activated via an STSADM command.H Title Logo - Sometimes referred to as Site Icon. Typically shows the SharePoint site icon, but can also show a user-defined logo.I Breadcrumb - This is a pseudo breadcrumb that is specific to the v4.master master page. It is comprised of the Site Title plus the placeholder for “Title in Title Area” which typically contains the Page Title. The Site Title is linked to the top level of the site.J Social Buttons - These buttons are used for marking things as liked and for adding tags and notes to content.K Global Navigation - Sometimes referred to as the Top Link Bar or Top Navigation Bar. This is the primary horizontal navigation for the site.L Search Area - The search box is used to enter terms for performing searches on the site.M Help Icon - The help icon links to the SharePoint 2010 help documentsN Current Navigation - Sometimes referred to as the Quick Launch or Left Navigation. It is used for secondary vertical navigation of the pages related to the current location.O Tree View - Provides a Windows Explorer–style representation of the site. Because of its appearance, the Tree View is often better suited for intranet sites.P Recycle Bin - A link to the Recycle Bin for the site. A collection of items that were deleted from the site. Typically better suited for intranet sites.Q All Site Content - A link to the All Site Content page of the SharePoint site. In SharePoint 2007 this was called the View All Site Content link. Typically better suited for intranet sites.R Body Area - The main content placeholder that will contain all of the page specific content. Required for rendering the actual content of the page.
- Randy:Once you have a starter master page, creating a branded master page for SP is just a matter of merging your HTML design with the starter master pageYou take the functional areas of the starter and wrap your HTML layout around themI tried to make a crude animation to explain the process, I’m not sure how affective it is, but hopefully it gives you an idea of what we do
- Randy:You can see with the finished result you have your HTML laying out the functionality that SharePoint uses
- Copy _starter_publishing.master > demowaffles.masterCheck it outCopy in main div from html under mso_content divPaste areasDo css and logo
- Be sure to check everything in /publish and approve
- Practical Example
- J