Embed Size (px)
DESCRIPTION
Technical Class: Tuesday, March 5 2:00 PM - 3:15 PM
Citation preview
Popping the Hood: How to Create Custom SharePoint Branding
Randy Drisgill & John RossSharePoint MVPsRackspace Hosting
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
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
The SharePoint Design Process
Vision and Goals
Requirements Design
Build HTML and CSSSharePointify
Create dynamic elements
Test Deploy Flip the switch
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 Includes helped with reuse
• With ASP.net 2.0 Master Pages were introduced• Page design separate from both
content and code
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
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" %>
Simple ASP.NET Content Page
<%@ Page Language="C#" MasterPageFile="demo.master" %>
<asp:Content ContentPlaceHolderID="MainBody" Runat="Server" >
Hello World
</asp:content>
<asp:Content ContentPlaceHolderID="Footer" Runat="Server" >
Override the Footer
</asp:content>
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>
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>
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
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
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=neutral, 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" />
Master Pages in SharePoint
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
Custom SharePoint Master Pages
Adventure Works MSDN Article: http://bit.ly/Real-World-Branding
<%@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=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %><%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %><%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ 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">var _fV4UI = true;</script>
<!-- This control is necessary to register the EcmaScript for many default controls to
work. --><SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" />
<!-- This control is used to retrieve and render the CustomJsUrl property from the SPWeb object. --> <SharePoint:CustomJSUrl runat="server" />
Creating SharePoint Branding
Beauty isn’t skin deepCreating a fully branded SharePoint site can involve several steps• Planning• Creative Design / User Experience (UX)• Master Pages, CSS, Page Layouts• Web parts• Testing• Content entry• Custom Development
Where do you start?• Create your vision and goals
• What do we hope to accomplish?• How will we know when we get there?
• Gather design specific requirements• Audience? Goals?• Type of site? • Major types of content• Corporate Style Guidelines?• Navigation needs? Searching? Web Parts?
Fun with requirements• “Just do what you normally do.”
• “We called a meeting of 20 people and here’s a consolidated list of their feedback.”
• "How much effort would it take for our public SharePoint site to do that responsive design thing?”
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
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
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
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
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"/>
Arrange HTML• Move the HTML around the various SharePoint
elements
HTML Mockup: Starter Master Page:
Branded HTML and Starter Master Page are combined…Into a new Master Page with HTML added
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>
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
Master Page Demo
Page Layouts
What is a Page Layout• Introduced in SharePoint Server 2007
• Must have SharePoint Server / Publishing enabled to use
• Think of them as templates for page content and layout• Many pages can be based on one page layout
• Like content pages they use the .ASPX extension
• Based on a Content Type
• Created with SharePoint Designer or the SP Web Interface
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>
Examples of how page layouts are used• Landing page for sites
• General content entry
• Custom Content Scenarios• 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
Deploying your brand
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
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
Customized vs. Uncustomized Files• Uncustomized files
• Source of file lives on the server file system• Many documents point to single file• Ex. OOTB page layouts
• Customized files• Source of the file lives in the content database• Ex. Files modified through SharePoint UI and SharePoint
Designer
• Uncustomized files are much easier to maintain at scale!
Steps to deploy brandingStep 1
Create a Visual Studio Solution and Project
Step 2Add files to modules which mirror SharePoint structure
Step 3Configure Element.xml for each module to deploy files
Step 4Use feature receiver to switch master page and event
receiver to automatically set master page for newly created sites.
Step 5Deploy this as a SharePoint Solution (.WSP) to your
SharePoint farm
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
Creating a WSP Using Visual Studio 2010 and CKS:Dev
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/pa
ckaging-master-pages-and-page-layouts-with-visual-studio-2010.aspx
Contact Information
• 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
Stop by the Rackspace booth if you have any questions!
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 THE UNITED STATES AND OTHER COUNTRIES. | WWW.RACKSPACE.COM
