Popping the Hood:How to Create Custom SharePointBrandingRandy Drisgill & John RossSharePoint MVPsRackspace Hosting
Randy Drisgill• MVP SharePoint Server• SP Branding & Design Lead – Rackspace Hosting• Author • Coming Soon- SharePoint 2...
John Ross• MVP SharePoint Server• Custom Solutions Lead – Rackspace• Author • Coming Soon- SharePoint 2013 Branding & UI...
The SharePoint Design Process Vision and Requirements Design Goals Create ...
Master Pages History LessonMaster Pages 101
Before Master Pages• Remember back to the bad old days of web design • Every page had 100% of the HTML included• ASP ...
Master Pages Basics• They can be thought of as the outer shell of a site design• The glue that holds the page together ...
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...
Simple ASP.NET Content Page demo.master MainBody Hello World ...
Simple ASP.NET Master Page<%@ Master Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"... ><html xm...
HTML Page Result<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"... ><html xmlns="http://www.w3.org/1999/xhtml"><h...
Content Placeholders• Content placeholders listed in ASPX pages MUST have a matching placeholder on the applied master p...
Controls• Self contained built-in or custom functionality that can be loaded on pages and master pages • Examples: Sear...
Using Controls• Registered at the top of the page <%@ Register TagPrefix="Custom" TagName="Search" src="searchbox.ascx...
Master Pages in SharePoint
Master Pages in SharePoint• Like ASP.NET master pages… but with more “stuff”• Coded in C#• They have required Content Plac...
Custom SharePoint Master PagesAdventure Works MSDN Article:http://bit.ly/Real-World-Branding
<%@Master language="C#"%><%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Mic...
Creating SharePoint Branding
Beauty isn’t skin deep • Planning • Creative Design / User Experience (UX) • Master Pages, CSS, Page Layouts • Web...
Where do you start? • What do we hope to accomplish? • How will we know when we get there? • Audience? Goals? • Type o...
Fun with requirements
Wireframes and Creative Comps• Useful for getting approval before spending effort making in SharePoint• Wireframes – Show...
HTML Version of the Site• Good for complex designs• Allows you to build out the design and test without dealing with Shar...
Starting a New Master Page• Start from an existing master page • One option is to copy one of the OOTB master pages •...
Using a Starter Master Page• Add the starter master page to the master page gallery• Rename it• As changes are made, check...
Adding the HTML Assets• Add the images and CSS to the Style Library• Make sure your CSS is applied after CoreV4.css<ShareP...
Arrange HTML• Move the HTML around the various SharePoint elements
Handling Required CPH’s• Referenced by various pages in SharePoint• Deleting them will cause an error• Instead hide them i...
Adjust CSS and HTML• Use IE Developer Tools (built in to IE8/9) and Firebug to debug CSS issues • http://getfirebug.com...
Master Page Demo
Page Layouts
What is a Page Layout • Many pages can be based on one page layout
Simple SharePoint Page Layout<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage…<%@ R...
Examples of how page layouts are used • Allowing content authors to enter organized information • Adding Fields that a Web...
Deploying your brand
What is deployment?• The process of putting your design and related assets onto a server – eventually production • Where...
Method of deployment• SharePoint Designer or upload through the UI • Fine for dev and very small implementations• Sandbox...
Customized vs. Uncustomized Files • Source of file lives on the server file system • Many documents point to single file •...
Steps to deploy brandingStep 1 Create a Visual Studio Solution and ProjectStep 2 Add files to modules which mirror Share...
Creating SharePoint Solutions• What you’ll need • Visual Studio 2010 • CKS:Dev (optional but very helpful!) • http:/...
Creating a WSPUsing Visual Studio 2010 and CKS:Dev
Helpful resources• Deploying Branding Solutions for SharePoint 2010 Sites Using Sandboxed Solutions • http://msdn.micros...
Contact InformationStop by the Rackspace booth if you have any questions!• Our Book: • http://bit.ly/SP2013Branding • ht...
Questions
RACKSPACE® HOSTING | 5000 WALZEM ROAD | SAN ANTONIO, TX 78218 ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill and John Ross - SPTechCon
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill and John Ross - SPTechCon
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill and John Ross - SPTechCon
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill and John Ross - SPTechCon
of 50

Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill and John Ross - SPTechCon

Technical Class: Tuesday, March 5 2:00 PM - 3:15 PM
Published on: Mar 4, 2016
Source: www.slideshare.net


Transcripts - Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill and John Ross - SPTechCon

  • 1. Popping the Hood:How to Create Custom SharePointBrandingRandy Drisgill & John RossSharePoint MVPsRackspace 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 LessonMaster 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 arent!• 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 PagesAdventure 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">
  • 19. Creating SharePoint Branding
  • 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?
  • 22. Fun with requirements
  • 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
  • 29. 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>
  • 30. 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
  • 31. Master Page Demo
  • 32. Page Layouts
  • 33. What is a Page Layout • Many pages can be based on one page layout
  • 34. 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>
  • 35. 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
  • 36. Deploying your brand
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. Steps to deploy brandingStep 1 Create a Visual Studio Solution and ProjectStep 2 Add files to modules which mirror SharePoint structureStep 3 Configure Element.xml for each module to deploy filesStep 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
  • 41. 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
  • 42. Creating a WSPUsing Visual Studio 2010 and CKS:Dev
  • 43. 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
  • 44. Contact InformationStop 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
  • 45. Questions
  • 46. RACKSPACE® HOSTING | 5000 WALZEM ROAD | SAN ANTONIO, TX 78218 US SALES: 1-800-961-2888 | US SUPPORT: 1-800-961-4454 | WWW.RACKSPACE.COMRACKSPACE® 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

Related Documents