Professional Documents
Culture Documents
Published: November 2010 Summary: Learn essential concepts to help you create engaging user interface designs in Microsoft SharePoint Server 2010 publishing sites. Applies to: Microsoft SharePoint Server 2010 Provided by: Andrew Connell, Critical Path Training LLC (SharePoint MVP) | Randy Drisgill, SharePoint911(SharePoint MVP) Contents y Introduction to Real World Branding with SharePoint 2010 Publishing Sites y Gathering Design Requirements for a SharePoint Publishing Site y Planning for SharePoint Branding Tasks y Creating Realistic Design Comps for SharePoint Site Designs y Creating the Adventure Works Travel HTML y Creating .css files for Adventure Works Travel y Testing SharePoint Webpage Design in Multiple Browsers y Creating the Brand in SharePoint y Adding .css and Image Files to SharePoint y Building the Master Page with HTML y Building Out .css Rules for the SharePoint Site Design y Creating a Custom Page Layout y Editing a Page Layout with SharePoint Designer y Packaging and Deploying SharePoint Branding y Conclusion y Additional Resources
Download code
When you are ready to create a great design for a SharePoint site, you first need to take time to plan the site well. Use a planning phase to gather design requirements for site elements such as master pages and page layouts. By properly understanding what the business objectives are before starting to code, you can avoid difficult and time-consuming rewrites later in the project lifecycle. Gathering design requirements begins by holding a formal requirements gathering session. Whether the site you are designing will be used by 10 users or 100,000 users, some requirements must be met before the project is considered a success. Depending on how complex the site will be, adjust the level of detail to the requirements that you will gather. For example, large sites (either with many pages or many users) might require more time to gather requirements than a small and simple site would. Involve key business, marketing, and IT stakeholders in requirements gathering to ensure that their ideas are considered and to ensure that all key stakeholders completely approve the project. Requirements gathering can often be difficult for a branding project and sometimes it is delegated to the marketing department or even outsourced to external consultants. Although involving key stakeholders is important, also consider whether involving more people in the decision-making process will increase the time needed to gather requirements and whether it will magnify the overall complexity of the project. For this reason, carefully consider who will provide the most relevant input when considering which stakeholders to include. The following sections describe some of the more important concepts to understand before starting any SharePoint branding project.
SharePoint Server 2010 Publishing Sites vs. SharePoint Foundation 2010 Sites
After requirements gathering is complete, first decide whether to base the website on Microsoft SharePoint Foundation 2010, or on a server running Microsoft SharePoint Server 2010 with the Publishing Features enabled. Publishing sites are built on SharePoint Foundation, and there are many advantages to building engaging Internet-facing websites with publishing sites. Some of the benefits of creating a brand with SharePoint Server publishing sites and SharePoint Foundation sites include the following:
Enables content authors to create webpages with a more robust rich-text editing experience than SharePoint Foundation sites offer. Includes master pages that target publishing sites and that use specific code assemblies that take advantage of publishing Features. Easier control of web navigation from the web UI, and more options are available to the designer. Uses the Web UI to easily change a master page and to apply master pages to all subsites below the current site. Uses page layouts to create templates at the page level. Uses text layouts to accomplish a form of simple page layout. Text layouts are not configurable. Use the $SPUrl token to target HTML assets with URLs that are relative to either the site collection ($SPUrl;~sitecollection/) or site root($SPUrl:~site/)
y y y
y
Note:
For the purposes of this article, a publishing site is a SharePoint Server 2010 web application with a site collection in the top-level (root) directory that has the Publishing Features enabled. For simplicity, Publishing Features are already enabled for the default Publishing templates (Enterprise Wiki and Publishing Portal). This article uses the Enterprise Wiki template for the Adventure Works Travel example. To learn more about setting up web applications and site collections, see Prescriptive Guidance for SharePoint Server 2007 Web Content Management Sites.
One good way to choose a level of browser and operating system support is to consult industry websites that study and provide web traffic analysis. Net Applications Market Share lists the top 10 web browsers by total market share for June 2010 as shown in Table 1.
Microsoft designates browsers by the level of support in SharePoint. The levels include:
y y
Supported A supported web browser is one that works with SharePoint Server 2010, and all features and functionality work as expected. Supported with known limitations A supported web browser with known limitations is one that works with SharePoint Server 2010, although there are some known limitations. Most features and functionality work, but if there is a feature or functionality that does not work or is disabled by design, documentation on how to resolve these issues is readily available. Not tested A Web browser that is not tested means that its compatibility with SharePoint Server 2010 is untested, and there may be issues with using the particular web browser.
For more information about the levels of browser support in SharePoint, see Plan Browser Support (Office SharePoint Server) . Note: Internet Explorer 6.0 is not supported by SharePoint 2010. Although you can create a master page that would display web content properly in Internet Explorer 6.0, it would not be compatible with the authoring experience for SharePoint 2010, which requires a browser that is based on modern standards.
The Adventure Works Travel example for this article focuses on an end user browsing experience that is as accurate as possible in Internet Explorer 7, Internet Explorer 8, and Firefox 3, and which ensures that several other modern browsers (including Google Chrome and Apple Safari) also render very well.
D E F
Ribbon contextual Tabs present menus that are specific to the functions of the SharePoint site. What is displayed changes tabs based on what the user is interacting with on the page. Some of the items will not be used on every site. Welcomemenu This menu shows the welcome message and enables the user to view their profile, to sign out, and to sign in as a different user. If other language packs are installed, the functionality to change the user's language is also available here. When the user is not logged on, theWelcome menu also shows the Sign In link.
Developer The button that opens the Developer Dashboard that typically appears at the bottom of the screen. The Dashboard button Developer Dashboard contains statistics about the page rendering and queries. This icon is shown when the Developer Dashboard's display level is set to OnDemand(other options include On and Off). Administrators can set the Developer Dashboard display level by using Windows PowerShell or by using the SharePoint API. Title logo Breadcrumb Sometimes referred to as site icon. It typically shows the SharePoint site icon, but can display a userdefined logo instead. This is a breadcrumb-like control that is specific to the v4.master master page. It includes the Site Title and 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. Used for marking items as liked and for adding tags and notes to content.
H I
Social buttons
K L M N O P Q R
Global navigation Search area Help button Quick Launch Tree View Recycle Bin All Site Content Body area
Sometimes referred to as the Top Link Bar or Top Navigation Bar, it is the primary horizontal navigation mechanism for the site. The search box is used to enter terms for performing searches on the site. The help button links to the SharePoint 2010 help documents. Provides current navigation. Sometimes referred to as the Left Navigation. It is the secondary or vertical navigation mechanism of the pages related to the current location. Provides a Windows Explorer style representation of the site. Because of its appearance, the tree view is often better suited for intranet sites. Provides a link to the Recycle Bin for the site, which is the area where items are stored when deleted. Typically, this is better suited for intranet sites. A link to the All Site Content page. This was the View All Site Content link in Office SharePoint Server 2007. Typically, this is better suited for intranet sites. Represents the main content placeholder that includes all of the content that is specific to the page. Required for rendering the content of the page.
When creating wireframes for a SharePoint site, be sure to consider the several types of pages that SharePoint could support. Some examples of the types of pages that can exist in a SharePoint site include the home page, landing pages, search results pages, articles, and wiki pages. Figure 3 shows the Microsoft Visio 2010 wireframe for the Adventure Works Travel website.
You can see from the wireframe page that the Adventure Works Travel site supports some SharePoint functionality but not all of it. For example, some elements such as the Help button, Tree View, and Recycle Bin will be omitted from the UI. By making these decisions at the wireframe stage, developers do not have to build unnecessary functionality.
Although you can create design comps with any graphics application (or even with a pencil and paper), applications such as Adobe Photoshop or Microsoft Expression Design can make the task much easier. Use these applications to create an easily maintained and reusable design comp for SharePoint sites.
Note: Although this article does not refer to specific features of Adobe Photoshop or Microsoft Expression Design, general concepts and processes are described and similar features may be available in these and similar design applications.
The following sections describe capabilities that are common to applications that are used to create design comps.
As you create the design comp, decide how to replicate the concepts in SharePoint. Figure 5 shows the same design comp with labels applied that highlight each functional area. Table 3 describes the functional areas.
Description Includes all of the standard ribbon elements such as the Site Actions menu and Welcome menu.
E F G H I J
Current navigation Breadcrumbs Field control Field control Web Part Web Part Uses the SiteMapPath control.
y y y
Support for HTML and cascading style sheet code completion WYSIWIG (What You See Is What You Get) design views Tools that help with the creation of cross browser webpages
y y y y
HTML 4.01 Strict Allows all HTML elements but does not allow deprecated elements such as the tag. HTML 4.01 Transitional Allows all HTML elements, including the deprecated elements. XHTML 1.0 Strict Similar to HTML 4.01 Strict, but all tags must be well-formed XML (for example, tags must be closed properly). Any deprecated elements are ignored. XHTML 1.0 Transitional Similar to HTML 4.01 Transitional, but all tags must be well-formed XML. Deprecated elements are allowed (but must also be well-formed XML).
Because SharePoint 2010 uses the XHMTL 1.0 Strict DOCTYPE declaration in its default master pages, use the XHTML 1.0 Strict DOCTYPE when creating HTML that is intended for use in SharePoint 2010. Note: By default, SharePoint 2010 sites will probably not be 100% valid XHTML 1.0 Strict through any World Wide Web Consortium (W3C) validation checker. Some of the legacy controls are still used in SharePoint 2010. Although the pages will not completely validate, the design experience will be more reliable if XHTML 1.0 Strict is used to code SharePoint HTML. The examples in this article use the XHTML 1.0 Strict DOCTYPE.
To create an XHTML 1.0 Strict document in an HTML editor tool, ensure that you create a new blank HTML document that specifies DOCTYPE as XHTML 1.0 Strict. (For more information about the XHTML 1.0 Strict DOCTYPE, see the W3C XHTML 1.0 Strict Specification.) The blank HTML page that the tool creates will open with the following markup.
This HTML was checked by using the W3C Markup Validation Service and is XHTML 1.0 Strict compliant.
Before converting an HTML design into a functional SharePoint site, test the design in as many browsers as possible. In addition to Internet Explorer, by installing Mozilla Firefox, Google Chrome, and Apple's Safari for Windows, you can test a web design for many different browsing scenarios. Another option for testing in multiple browsers is to use Expression Web Super Preview. This application is available in Expression Web 3 and is also available as a free download that tests only Internet Explorer versions. The full version can test browsers that are not created by Microsoft, such as Firefox. Both versions can display pages side-by-side by using different rendering engines, and both can enable very intricate inspection of even the smallest differences.
11
branded website with SharePoint is creating a good master page. Because you already created a design comp and authored the design in HTML, you can use it to create a custom master page.
Placeholders on Default.Master in a Windows SharePoint Services 3.0 Site. The SharePoint Starter Master Page
Because SharePoint requires many specific content placeholders, creating a custom master page from scratch can be challenging. Although any of the default master pages can serve as the starting point for a new custom master page, they contain a lot of branding code that must be deleted before starting. A better approach is to begin with a starter master page, a preconfigured master page skeleton that includes only the functionality that is absolutely required to create a functioning page in SharePoint. For a list of the content placeholders used in a SharePoint Server 2010 master page, see Upgrading an Existing Master Page to the SharePoint Foundation Master Page. The downloads for this article include a well-commented starter master page designed for use with an Internet-facing publishing site. For the most part, this is a traditional starter master page for SharePoint, but it uses a few publishing-specific elements, most notably the navigation controls. The starter master page should work with most of the default SharePoint 2010 pages including Application pages (such as Site Settings), lists, and documents. Each section of the starter master page has comments that label which functional area of SharePoint is represented. The following sections describe some of the key aspects of working with master pages in SharePoint 2010, specifically as they relate to the starter master.
fixed width (often centered in the middle of the page) must have a special .css class named s4-nosetwidth applied to the Workspace element. The starter master page is set to use this instance of the s4-nosetwidth class; it should be removed for designs that must take up the full width of the browser.
Foundation.
A primary branding task is to override the default styles with custom .css that will restyle the SharePoint functionality to match the overall website branding. In SharePoint 2010, Microsoft added the After property to allow custom .css to always come after specific .css files such as the default CoreV4.css file. The following code shows the After property being used to load a custom cascading style sheet.
The CssRegistration in the starter master page is set to look for the custom .css in the Style Library of the publishing site under the SiteName subfolder. You should replace the SiteName folder referenced in the starter master page with the name of an actual site. Note: When making references to web files such as a custom style sheet, SharePoint Server 2010 provides the $SPUrl token for making site collection root-relative URLs or site root relative-URLs. The style sheet reference in the starter master page could be written to use this functionality, as follows:<SharePoint:CssRegistration name <% $SPUrl:-sitecollection/Style Library/sitename/style.css %> After= corev4.css runat= server /> The benefit of using this method can be seen when branding is deployed to a site collection that is not located at the web application root. Using a URL that is relative to the site collection ensures that styles are loaded from the site collection's own Style Library and not from the root site collection's Style Library. The disadvantage of using this method is that Design View cannot display some assets when referenced this way. For simplicity, this article does not use the $SPURLvariable in its URLs.
13
<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>
The starter master page uses the WarnOnUnsupportedBrowsers control near the bottom of the code; to turn off the alert, remove that control from the master page.
To add the starter master page to SharePoint by using SharePoint Designer 2010
1. 2. 3. Open a SharePoint Server 2010 publishing site in Microsoft SharePoint Designer 2010. In the Site Objects panel, click Master Pages. This is the master page gallery where all master pages and page layouts are created. On the ribbon, click Blank Master Page, and then name it AdventureWorks.master.
14
Click the file named AdventureWorks.master, and on the ribbon, click Edit File. SharePoint opens the new master page with its default content. 5. Select all of the content, and then press Delete to remove it. Next, copy the contents of StarterPublishing.master (available with the article downloads) and paste it into AdventureWorks.master. 6. To save the changes, click Save in SharePoint Designer 2010. 7. On the Site Objects menu, click Master Pages, right-click AdventureWorks.master, and then click Check In. On the Check In menu, select Publish a major version, and then click OK. 8. Because there is an approval workflow applied to the master page gallery, a warning appears that says "This document requires content approval. Do you want to view or modify its approval status". Click Yes. 9. The SharePoint web interface opens in a browser. If you are challenged to authenticate, log on with your user name and password. 10. The Master Page Gallery opens with a view grouped by Approval Status. Click to the right of AdventureWorks.master, and then click Approve/Reject. 11. For Approval Status, select Approved, and then click OK. 4. Note: To add master pages to SharePoint, check them in as major versions, and publish and approve them before users other than the one who has the file checked out in order to enable users to access a site that has had the master page applied to it. The same is true for any changes to the master page: other users will see updates only if the changes are checked-in as a major version, published, and approved.
When working with SharePoint files in SharePoint Designer 2010, be aware that SharePoint puts them in a customized state, which can impact site maintenance. The final section of this article describes the process for deploying branding files to SharePoint in an uncustomized state. Because of customization, it is best to work on branding files in SharePoint Designer only in a development environment, instead of working on final versions of files on a production server running SharePoint. For more information about creating uncustomized files in SharePoint, see Understanding and Creating Customized and Uncustomized Files in Windows SharePoint Services 3.0. Although this article addresses the previous version of SharePoint, all the concepts and code still apply to SharePoint 2010.
By applying the master page to both the Site Master Page and the System Master Page, all publishing pages and the application pages will be styled with the custom branding. This is a new feature in SharePoint 2010; by default, in Office SharePoint Server 2007 custom master pages did not apply to Application pages such as the Site Settings menus. One potential disadvantage to applying a highly stylized master page such as Adventure Works Travel as the System Master Page is that more testing is required to ensure that all settings pages and lists render the correct custom branding. The decision to apply a custom master page to the System Master Page is purely a business decision. Note: Custom master pages that are applied to application pages sometimes have specific user interface needs. For example, in Site Settings, the Users andPermissions menus must have the PlaceHolderLeftNavBar content placeholder visible in the custom master page to show people and groups. Also, sometimes if elements such as required content placeholders are missing, the Application pages do not display an error. Instead, they revert back to displaying the standard v4.master page.
With the starter master page applied, the site's look and feel is blank and ready to have a brand applied to it. The starter master page is certainly not very attractive, but that will be addressed in the following sections.
15
runat="server">Adventure Works</asp:ContentPlaceHolder></title> <SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/AdventureWorks/favicon.ico"/> <SharePoint:CssRegistration name="/Style Library/AdventureWorks/style.css" After="corev4.css" runat="server"/>
Adventure Works has its own custom style sheet, so the inline .css code that is included in the section of the starter master page can be moved to the path Style Library/AdventureWorks/style.css. Note: You can ignore the entire ribbon section of the code. Unless there are unique circumstances, most master pages can use the default ribbon code.
16
Next, copy and paste everything from the original HTML design between the <form> and </form> tags into the master page after the <div id="MSO_ContentDiv" runat="server"> tag. The next sections describe which areas of SharePoint functionality will be moved up from the lower parts of the starter master page into the pasted HTML code. Note: Some of information below may be tricky to follow, so it may be helpful to open the final version of the Adventure Works master page, which is available with the article downloads, and follow along.
<div class="customTopLeft"> <asp:LoginView id="LoginView1" runat="server"> <AnonymousTemplate> <div class="customLogin"<a href="/_layouts/authenticate.aspx">User Login</a></div> <style type="text/css" body #s4-ribbonrow { display: none; } </style> </AnonymousTemplate> <LoggedInTemplate> <style type="text/css"> .customLogin { display: none; } </style> </LoggedInTemplate> <asp:LoginView> </div>
2.
Because the customTop <DIV> tag should not show in the dialog boxes in SharePoint Server 2010, the s4notdlg .css class must be added. <div class="customTop s4-notdlg"> The static search HTML is replaced with the PlaceHolderSearchArea placeholder and the SmallSearchInputBox delegate control.
3.
<div class="customSearch"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/> </asp:ContentPlaceHolder> </div>
4. 5.
The customHeader <DIV> tag should not show in the dialog boxes in SharePoint 2010, so the s4-notdlg .css class must be added. The static link back to home (<a class="customLogo" href="#"><img src="logo.png" alt="Back to Home" title="Back to Home" /></a>), is replaced with a custom logo (<div class="customLogo">) tag and the SharePoint link button <SharePoint:SPLinkButton> and<SharePoint:SiteLogoImage> tag from the starter master page are moved into it. Also, the LogoImageUrl tag is changed from sitename toAdventureWorks. These changes are shown in the following markup.
<div class="customLogo"> <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/"> <SharePoint:SiteLogoImage LogoImageUrl="/Style Library/AdventureWorks/logo.png" AlternateText="Back to Home" ToolTip="Back to Home" runat="server"/>
17
</SharePoint:SPLinkButton> </div>
6.
The static navigation is replaced with the SharePoint Global Navigation control and the corresponding data source. You can also remove the .css classes for menu and horizontal orientation from <div class="menu horizontal customTopNavHolder"> because SharePoint will now handle this .css code.
<div class="customTopNavHolder"> <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <SharePoint:AspMenu ID="TopNavigationMenuV4" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="s4-tn"> </SharePoint:AspMenu> </div>
7.
The default SharePoint 2010 status bar <DIV> tags are added between the customHeader closing </DIV> tag and the customMain <DIV> tag. This is shown in the following markup.
</div> <div class="s4-notdlg"> <div id="s4-statusbarcontainer"> <div id="pageStatusBar" class="s4-status-s1"></div> </div> </div> <div class="customMain">
8.
Next, the left navigation will be added. But because the Adventure Works branding has uniquely styled navigation, it is a good idea to show only the branded navigation when an Adventure Works publishing page is created, not on all of the application pages or anywhere else. Use only the content placeholder forPlaceHolderLeftNavBar and remove any of its usual contents, such as the AspMenu and data source placeholders. Removing these placeholders enables the Adventure Works page layout to override the content placeholder with branded navigation, and any other page that needs left navigation can also override it with its own navigation. For pages that do not include left navigation, set up the placeholder to hide the left panel entirely so that there is no empty space on the left side of the interface. Also, notice that the containing <DIV> ID tag and the Class get combined with the customMainLeft class from the HTML mockup. This combination allows the default SharePoint .css files to apply to the left navigation and any custom branding for Adventure Works.
#s4-leftpanel { display: none; } .customMainRight { width: inherit; padding-left: 10px; } </style> </asp:ContentPlaceHolder> </div>
9.
In the HTML for the mockup, there is a Trip Planner that appears below the left navigation. In SharePoint 2010, this is a good place for a Web Part zone. You add Web Part zones from page layouts, not from master pages. So to add a Web Part zone, add the PlaceHolderLeftActions content placeholder below the PlaceHolderLeftNavBar content placeholder. The Adventure Works page layout will override the PlaceHolderLeftActions content placeholder, and any page that does not override this placeholder will not display anything in this area of the master page.
10. The customMainRight <DIV> tag is where much of the page content is. Add the s4-ca class so that SharePoint can control the area with its own cascading style sheet.
<div class="customMainContent"> <div class="s4-notdlg"> <div class="customBreadcrumbs"> <asp:SiteMapPath runat="server"/> </div> <h1 class="customPageTitle"><asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" /></h1> <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" /> </div>
12. The remaining content from the HTML mockup that is in the customMainContent section is handled by the PlaceHolderMain content placeholder and is ultimately supplied by the page layout. This code includes the subtitle, the page content, and the Top Activities (which will be a Web Part). Simply remove all of this section and replace it with the placeholder, as shown in the following example.
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" /> </div> <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/> </div> </div>
13. Because the customFooter <DIV> section should not appear in dialog boxes in SharePoint 2010, add the s4notdlg .css class. <div class="customFooter s4-notdlg">. 14. Move up the Developer Dashboard code from the starter master page code and place it right after the customFooter closing </DIV> tag.
</div>
19
15. Remove any of the remaining starter master page code that is located after the Developer Dashboard closing </DIV> tag and before the three closing</DIV> tags and the PlaceholderFormDigest placeholder. At this point, the Adventure Works Travel master page is complete. You should check in the master page, publish it as a major version, and approve it so that users can see the changes. Although the master page is finished at this point, the site still does not look like the final design. The site requires the addition of much more custom .css code to the style.css file before the look is complete.
2.
Add automatic scrolling ( overflow:auto) to the main content area. Note: The branding elements will be used throughout SharePoint including in application pages and in lists so it can be helpful to add automatic scrolling to the main content area. Adding automatic scrolling enables very wide pages to scroll inside of the branding instead displaying outside of the branding and showing up over the background.
3. .customMain { 4. width: 100%; 5. background-color: white; 6. min-height: 400px; 7. padding:8px 20px; 8. width:937px; 9. overflow:auto; 10. } 11.
12. Adjust the width of the .customMainRight class. The width for .customMainRight is 760 pixels by default. If left navigation is hidden, the master page or page layout will adjust the width to expand to fill the entire middle area.
13. Remove several existing styles from the HTML mockup for areas that will have specific SharePoint styles added later, including styles for the search, navigation, top navigation, and left navigation. You can remove each of the following classes and all corresponding .css code.
.menu ul .menu ul, .menu li .horizontal li .customSearch input .customSearchGo .customSearchGo:hover .customTopNavHolder li .customTopNavHolder li:hover .customTopNavHolder li a .customLeftNavHolder li
14. Add several styles to brand the search area, including hiding the default search button, adding a branded button with a hover, and adding styles for the search box.
/* search button hider */ .customSearch .ms-sbgo img { display: none; } /* fancy search button */ .customSearch .ms-sbgo a { display: block; height:17px; width:32px; background:transparent url('but_go.gif') no-repeat scroll left top; margin: 0px; padding: 0px; position: relative; top: 0px; } /* search button hover */ .customSearch .ms-sbgo a:hover { background-image: url('but_go_on.gif'); } /* search box style */ .customSearch input.ms-sbplain { font-size:1em; height:15px; margin-right: 5px; background-image: none; color: #999999; }
15. Add several styles to handle the various top navigation elements, including hiding the default arrows, the item style and hover state, the dynamic flyout holder, and the flyout item and hover state.
/* arrow for flyouts */ .menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background { padding-right:0px; background-image:none; } /* item style */
21
.s4-tn li.static > .menu-item { white-space:nowrap; border:0px none transparent; padding:12px 10px 5px; display:inline-block; vertical-align:middle; color:white; font-family:arial,helvetica,sans-serif; font-size: 105%; font-weight: bold; background-image:url('dottedline.gif'); background-position:right top; background-repeat:no-repeat; background-color:transparent; } /* item style hover */ .s4-tn li.static > a:hover { color: white; text-decoration: none; background-image:url('nav_hover.gif'); background-position:right top; background-repeat: repeat-x; } /* flyout holder */ .s4-tn ul.dynamic { background-color:#1e4b68; border:0px none; } /* flyout item */ .s4-tn li.dynamic > .menu-item { display:block; white-space:nowrap; font-weight:normal; background-color: #1E4B68; background-repeat: repeat-x; padding:4px 8px 4px 10px; font-family:arial,helvetica,sans-serif; border-top: 0px; color: #ffffff; } /* flyout item hover */ .s4-tn li.dynamic > a:hover { font-weight:normal; text-decoration:none; background-color: #b5d8ee; color: #222222; }
16. The left navigation has style applied to only the items in the navigation, not the design. Because the left navigation in Adventure Works Travel will not show flyouts, there are no styles added for those states.
/* left nav item style */ .customLeftNavHolder li > .menu-item { background-image:url('arrow.gif'); background-position:left center; background-repeat:no-repeat; border-bottom:1px solid #ECF0EF; padding:4px 0 4px 14px;
22
17. The Web Parts in the left column need special styling so that their titles include the branding elements, and to reduce some white space and padding.
/* Web Part title for left column */ .customLeftWPHolder .ms-WPTitle { color:inherit; padding:0px; font-family: Arial,sans-serif; font-weight: bold; font-size: 1.2em; margin-bottom: 0; text-transform: uppercase; background-image:url('ticket_bg.gif'); background-position:left top; background-repeat:no-repeat; height:30px; line-height:34px; padding-left:4px; } /* Web Part padding for left column */ .customLeftWPHolder .ms-wpContentDivSpace { padding: 0px; } /* Remove some white space from Web Parts in left column */ .customLeftWPHolder .ms-WPHeader .ms-wpTdSpace { display:none; } /* remove border from bottom of Web Parts in left column */ .customLeftWPHolder .ms-WPHeader td { border-bottom: none; }
18. After all of the HTML design styles, several SharePoint-specific .css styles are added. Each of the style rules in this section begins with comments that describe its specific usage. The first few were the styles that were included inline in the starter master page.
/* hide body scrolling (SharePoint will handle) */ body { height:100%; overflow:hidden; width:100%; } /* Pop-out breadcrumb menu needs background color for Firefox */ .s4-breadcrumb-menu { background:#F2F2F2; } /* If you want to change the left navigation width, change this and the margin-left in .s4-ca */ body #s4-leftpanel { padding-right:20px; } /* body area */ .s4-ca { margin-left:auto; }
23
/* Fix scrolling on list pages */ #s4-bodyContainer { position: relative; } /* Fix the font on some built-in menus */ .propertysheet, .ms-authoringcontrols { font-family: Verdana,Arial,sans-serif;; line-height: normal; } /* Nicer border between top bar and page */ .ms-cui-topBar2 { border-bottom: 1px solid #666666; } /* Hide the hover state for the ribbon links */ #s4-ribbonrow a:hover { text-decoration: none; } /* Fix ribbon line height */ #s4-ribbonrow { line-height: normal; } /* Make site settings links look normal */ .ms-linksection-level1 ul li a { font-weight:normal; } /* Hide the left margin when dialog is up */ .ms-dialog .customCentered, .ms-dialog .customMain, .ms-dialog .customMainRight { margin-left:0 !important; margin-right:0 !important; min-height:0 !important; min-width:0 !important; width:auto !important; height:auto !important; background-color: white !important; background-image: none !important; padding: 0px !important; overflow:inherit; } /* Dialog bg */ .ms-dialog body { background-color: white; background-image: none; } /* Fix dialog padding */ .ms-dialog .s4-wpcell-plain { padding: 4px; }
After the last style rules are added to style.css, the .css code for the Adventure Works Travel branding is complete. Check in and publish the style.css file as a major version so that end users can see the changes. Figure 9 shows the much improved SharePoint branding.
24
Note: The content part of the page still does not look like the design mockup. This area will be branded with a custom page layout.
4.
SharePoint Designer opens the new page layout with the PlaceHolderPageTitle and PlaceHolderMain content placeholders already created. <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
25
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
</asp:Content>
Note: Page layouts must be edited using Advanced Mode in SharePoint Designer 2010. If you attempt to edit a page layout in Normal Mode, all of the content will be highlighted in yellow to indicate that it is not editable. New page layouts are opened automatically in Advanced Mode; when opening existing page layouts, on the ribbon, point to Edit File, and then click Edit File in Advanced Mode.
Field Controls
Use the Toolbox pane in SharePoint Designer to add field controls to a page layout. Simply drag the field controls you want to use from the Toolbox pane to the content control that will contain them.
<asp:Content ContentPlaceholderID="PlaceHolderLeftActions" runat="server"> <div class="customLeftWPHolder"> <WebPartPages:WebPartZone id="LeftZone" runat="server" title="Left Zone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div> </asp:Content>
2.
Add the PlaceHolderPageTitle content control to the page layout and add the text Adventure Works - before the PageTitle field control. These actions insert the text before the page title and place all of it into the HTML page title.
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> Adventure Works - <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/> </asp:Content>
3. Add the PlaceHolderPageTitleInTitleArea content control with the TitleField field control inside of it. These controls add the page title before the page content.
<asp:Content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server"> <div class="customTicketTitle"> <h1>RELATED LINKS</h1> </div> <PublishingNavigation:PortalSiteMapDataSource ID="SiteMapDS" runat="server" EnableViewState="false" SiteMapProvider="CurrentNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <SharePointWebControls:AspMenu ID="CurrentNav" runat="server" EnableViewState="false" DataSourceID="SiteMapDS" UseSeparateCSS="false" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0" CssClass="customLeftNavHolder" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/> </asp:Content>
5.
The PlaceHolderMain content placeholder starts with the <WebPartPages:SPProxyWebPartManager /> control, which is added automatically by SharePoint Designer when Web Part zones are being used in a page layout. Next, the Comments field control is added to enable content authors to edit the subtitle of the page. Then, the PublishingPageContent field control is added. This control contains the main publishing HTML content of the page.
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"> <WebPartPages:SPProxyWebPartManager runat="server" id="ProxyWebPartManager"></WebPartPages:SPProxyWebPartManager> <div class="customSubTitle"> <SharePointWebControls:NoteField FieldName="Comments" InputFieldLabel="SubTitle" DisplaySize="50" runat="server"></SharePointWebControls:NoteField> </div> <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" runat="server"/> </asp:Content>
This is all of the code that is needed to create the Adventure Works Travel page layout. Before content authors can create pages based on this page layout, the page layout must be checked in, published as a major version, and approved.
Note: The site template that is used to create the publishing site determines which page layouts are available to select. Depending on which page layout you used to create your publishing site, you may need to change the available page layouts before your new page layout will be available to select. To change the available page layouts, click Site Actions, point to Site Settings, point to Look and Feel, and click Page layouts and site templates. This settings page has an option for Page Layouts from which the available page layouts can be selected. The easiest way to try out a several page layouts, including the new custom page layout, is to select Pages in this site can use any layout, and then click OK.
2. 3.
On the ribbon, click Page, and the click Page Layout. In the drop-down list under the Welcome Page group, select Adventure Works Page. The page refreshes and the new page layout is applied to the page, as shown in Figure 10.
From here, the page can be edited to include any content, including the subtitle, page content, and any Web Parts. In SharePoint Server 2010, Web Parts do not have to be added to Web Part zones; they can also be added to rich HTML content areas in publishing pages and wiki pages. Figure 11 shows the final page with all of the content from the HTML mockup added.
Figure 11. Adventure Works Travel home page with all content added in edit mode
After all of the changes are finalized, just click the small Save icon at the top left of the ribbon or click Page, and then click Save & Close. If the publishing workflow is activated for the pages library, the page must be published and approved before end users will be able to see the new content.
To deploy custom branding files, the first option is to simply use the site collection backup and restore. This option is not ideal in an Internet-facing scenario because all of the files will remain as customized files. For more information about the differences and implications of customized and uncustomized files in SharePoint, see Understanding and Creating Customized and Uncustomized Files in Windows SharePoint Services 3.0. When branding files are deployed and managed as customized files, site rebranding campaigns can get complicated. Therefore, an uncustomized branding and management process is preferred, especially for highly trafficked sites and those filled with a significant amount of content. When deploying uncustomized branding files, publishing site implementers can pick from among a few different options when deciding where to deploy the files. The following are the three most popular and common options:
y y y
Deploy branding files to the site's top-level folder. Deploy branding files to the sites _layouts directory. Deploy branding files to the site collection's content database.
Each of these options has distinct advantages and disadvantages, all addressed in the MSDN article Implementing a Brand in a SharePoint Server 2007 Publishing Site. The remainder of this article assumes that the last option, deploying branding files to the site collection's content database, will be used. Deploying branding files to the site collection's content database makes the maintenance and potential future rebranding campaigns much easier to carry out. All the files will be deployed to the site collection's master page gallery and Style Library, both found in the root site of all SharePoint publishing site collections. To deploy branding files to the site collection's content database, you must provision files into the site collection's content database--specifically to the Master Page Gallery and Style Library, by using the SharePoint Feature framework. The Feature framework contains a way to create customized and uncustomized instances of files in the SharePoint content database. The source files, including images, .css files, ECMAScript libraries, master pages, and page layouts, are deployed as part of the Feature and stay on the file system. When the Feature is activated, it provisions an uncustomized instance of source files to the specified location. Deploying branding files to the site collection's content database is usually handled by developers and administrators as it involves putting files on the file system and creating Features and SharePoint solution packages (.wsp files).
y y
Create the brand with SharePoint in mind by taking into account considerations such as the Welcome menu and Site Actions controls. Implement the brand in SharePoint by using master pages and page layouts, by overriding the SharePoint default .css code, and by adding certain ECMAScript code to work around some issues that are unique to Internet-facing sites.
These two components are the responsibility of the person who has the role of site and branding designer. The third component is usually served by the role of the site developer who creates the SharePoint Feature and WSP that is used to deploy and provision the files to the site collection. The designer needs to turn the branded publishing site over to the developer for packaging. The site developer pulls the files out of the site collection and adds them to a new Feature, then includes that Feature in a solution package (.wsp file), deploys the .wsp file, and tests the branding files by activating the Feature. If the site designer and developer work in different environments, as is the case when the branding is outsourced, the easiest approach is for the designer to back up the site collection by using Windows PowerShell, send the backup file to the developer, and ask the developer to restore the site collection into a new SharePoint web application.
Note: The remainder of this article assumes that the reader has created two web applications: http://test.adventureworks.com and http://test1.adventure-works.com. The http://test.adventure-works.com web application should be empty, containing no site collections. The http://test1.adventure-works.com web application should contain a single site collection at the root that is based on the Publishing Portal template.
If both the designer and developer work in the same shared environment, there is no need to back up to transfer the site collection from one environment to another. However, if the branding work was outsourced to an outside vendor such as an agency, the developers need an easy way to get a copy of the implemented brand. This is quite easy. The designers of the site can back up the site collection and send the backup file to the developers. The backup can even be sent through email because it is likely that the site collection is not very big and does not contain any content. Back up the site with Windows PowerShell, as shown in the following example.
PS C:\> $siteCollection = Get-SPSite | Where-Object {$_.Url -eq [URL USED WHEN CREATING AND TESTING THE BRAND]} PS C:\> Backup-SPSite -Identity $siteCollection -Path "C:\AdventureWorksBranded.dat"
Deliver the c:\AdventureWorksBranded.dat file to the developers. The developers can restore the site into their environment. Microsoft recommends restoring backed-up site collections to the root of a new SharePoint web application that has no other site collections. Restoring backups in this way ensures that there are no possible files in other sites that may be accidentally referenced. To restore the site collection into the http://test.adventure-works.com site, use Windows PowerShell again, as shown in the following code.
Windows PowerShell prompts you to confirm that you want to restore the site. When using the backup/restore method to move a site collection from one environment to another, there is one more step that most developers will want to apply. Because the two environments are likely from different domains, the primary site collection administrator is no longer a valid account in the restored environment. Quickly change this in Central Administration by selecting the Site Collection Administrators link on the Application Management page. Select the site collection to which the backed-up site was restored, and change the primary site collection administrator to the account that will be used to log on to and extract files from the site. Developers now have a local copy of the branded publishing site.
Creating a Visual Studio Project to Hold and Package the Branding File Feature
Now that developers have a local copy of the branded publishing site, the next step is to create the Visual Studio 2010 project that will contain the Feature and that will be used to create the solution package. In Microsoft Visual Studio 2010, Microsoft introduced robust SharePoint development tools to make this task straightforward and easy. The SharePoint development tools in Visual Studio 2010 are included in the Visual Studio 2010 installation.
To extract branding files from the branded sample publishing site collection and add them to the Visual Studio project
1. 2. 3. 4. 5. 6. 7. Create a new SharePoint 2010 project in Visual Studio 2010 by using the Empty SharePoint Project template, making sure you select the .NET Framework 3.5 as the target framework version. When prompted by Visual Studio 2010 in the SharePoint Customization Wizard, pass in the site collection URL ( http://test1.adventure-works.com) to test the project against, and specify it as a Farm solution. Add the containers for the files to the Visual Studio project. Copy the files from the publishing site to the Visual Studio project. Modify the project file to include all of the added files. Add the Style Library files. Add the files in the Master Page Gallery.
30
Now, each file that will be provisioned into the Style Library must be added to the Module element as a child File element. Each entry should specify the name of the file and the Type of file to be provisioned. The two Type options are Ghostable and GhostableInLibrary. Both provision an uncustomized instance into the site collection, but because these files must be registered as content within the Style Library, set the type to GhostableInLibrary. In addition, the Url attribute of eachFile element must be updated so that the files are placed in the location specified by the Module element. To update the Url attribute, remove the subfolder specified in the Url attribute by updating the Module element to the following markup. <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="StyleLibraryModule" Url="Style Library/AdventureWorks" RootWebOnly="TRUE"> <File Path="StyleLibraryModule\bg.gif" Url="bg.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\but_go.gif" Url="but_go.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\but_go_on.gif" Url="but_go_on.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\dottedline.gif" Url="dottedline.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\favicon.ico" Url="favicon.ico" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\footer_bg.png" Url="footer_bg.png" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\glory.jpg" Url="glory.jpg" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\logo.png" Url="logo.png" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\microsoft_logo.gif" Url="microsoft_logo.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\nav_hover.gif" Url="nav_hover.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\style.css" Url="style.css" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\ticket_bg.gif" Url="ticket_bg.gif" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\wp_topactivities.jpg" Url="wp_topactivities.jpg" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\wp_tripplanner.jpg" Url="wp_tripplanner.jpg" Type="GhostableInLibrary" /> <File Path="StyleLibraryModule\arrow.gif" Url="arrow.gif" Type="GhostableInLibrary" /> </Module> </Elements>
y y
AdventureWorks.master, which is the custom master page that is used to implement the brand. AW_layout.aspx, which is the page layout that is based on the default Welcome Page content type used for the site
home page.
To add files from the SharePoint Master Page Gallery to Visual Studio
1. 2. 3. Set up the Visual Studio project container, or module, for the files in the Style Library. Right-click the project name, click Add, then choose New Item. In the Add New Item dialog box, select Module from the SharePoint/2010 category, and then name it MasterPageGalleryModule. In Solution Explorer, delete the sample.txt file from the MasterPageGalleryModule, because it is simply a placeholder file.
Now files can be retrieved from the site collection and added to the Visual Studio project.
<?xml version="1.0" encoding="utf-8"?> <Elements Id="94022f3a-580a-4745-9d9c-42c21f79fdfe" xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="MasterPageGalleryModule" Url="_catalogs/masterpage" RootWebOnly="TRUE"> </Module> </Elements>
6.
Add the following markup after the opening <Module> tag to provision the master page. Note: Provisioning master pages requires the module to specify additional fields, such as which content type to associate with the master page file when it is provisioned.
7. <File Url="AdventureWorks.master" 8. Path="MasterPageGalleryModule\AdventureWorks.master" Type="GhostableInLibrary"> <Property Name="ContentType" 9. 10. Value="$Resources:cmscore,contenttype_masterpage_name;" /> 11. <Property Name="Title" Value="Adventure Works Travel Custom Branding" /> 12. 13. </File>
14.
15. Add the page layout. As with the master page, you must set additional properties. However, the page layout uses a different content type than the master page and also needs to specify the content type that the page layout is associated with by using the PublishingAssociatedContentType attribute. 16. Add the following markup after the master page's <File /> tag.
<File Url="AW_layout.aspx" Path="MasterPageGalleryModule\AW_layout.aspx" Type="GhostableInLibrary"> <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" /> <Property Name="PublishingAssociatedContentType" Value=";#Welcome Page;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF390064DEA0 F50FC8C147B0B6EA0636C4A7D4;#" /> <Property Name="Title" Value="Adventure Works Travel Branded Welcome Page" /> </File>
32
At this point, the Visual Studio project is complete and contains all of the files that should be provisioned to the Master Page Gallery and Style Library.
Conclusion
This article explains the entire process of branding a Microsoft SharePoint Server 2010 publishing site with a custom design. First, the article steps the site designer through the process for developing a brand for a new SharePoint publishing site, including examining issues that are unique to publishing sites and the SharePoint-specific controls. Next, the article describes how to convert the design comps from prototypes into a real implementation of a branded publishing site that uses master pages, page layouts, CSS, and images. Finally, the article describes how to take the branded publishing site and convert it to a Feature that makes the brand easier to maintain in the future. This is done by using the SharePoint development tools in Visual Studio 2010 and creating a new project that provisions all of the files involved in a custom brand.
Additional Resources
For more information, see the following resources:
y y y y y y y y y y y
MSDN Sample - Real World SharePoint Branding Microsoft Office Online: SharePoint Designer 2007 Help and How-to: Modify the Default Master Page Understanding and Creating Customized and Uncustomized Files in Windows SharePoint Services 3.0 Approaches to Creating Master Pages and Page Layouts in SharePoint Server 2007 Implementing a Brand in a SharePoint 2007 Publishing Site Understanding Field Controls and Web Parts in SharePoint Server 2007 Publishing Sites Adding Code-Behind Files to Master Pages and Page Layouts in SharePoint Server 2007 WROX: Professional SharePoint 2010 Branding and User Interface Design WROX: Professional SharePoint 2007 Web Content Management Development Enterprise Content Management Resource Center | SharePoint 2010 SharePoint Developer Center
33
small typo?
Missing dash in "Building the Master Page with HTML section" - step 10: Corrected version: <div class="s4-ca customMainRight">
34