Real-World Branding with SharePoint Server 2007 Publishing Sites (Part 2 of 2)

  • Article

Summary: Learn the essential concepts needed to create an engaging user interface design in Microsoft Office SharePoint Server 2007 publishing sites. This article is part 2 of 2. (29 printed pages)

Andrew Connell, Critical Path Training, LLC

Randy Drisgill, SharePoint911

July 2009

Applies to: Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007

Contents

  • Creating the Brand in SharePoint Server

  • Packaging and Deploying SharePoint Branding

  • Conclusion

  • Additional Resources

Read part 1:Real World Branding with SharePoint Server 2007 Publishing Sites (Part 1 of 2)

Download the code sample that accompanies this article:MSDN Sample - Real World SharePoint Branding

Creating the Brand in SharePoint Server

Real World Branding with SharePoint Server 2007 Publishing Sites (Part 1 of 2) discussed how to gather the design requirements for a Microsoft Office SharePoint Server 2007 publishing site, and plan for the site's branding. This article focuses on creating a brand in a publishing site. The article begins with master pages, including working with a minimal master page and adding custom HTML and CSS to create a master page that looks as close as possible to the original Adventure Works Travel HTML page. Page layouts are then discussed, with information about creating a page layout for Adventure Works Travel. At the end of this section, you will have the complete the Adventure Works Travel SharePoint branding.

Building a Custom Master Page

When you build a brand for a SharePoint site, all roads lead back to the master page. Every page in SharePoint Server uses a master page for laying out the functionality and content that make up a SharePoint site. The key to creating a heavily branded SharePoint site is creating a good master page. Following the process described earlier, by having created a design in HTML already, you have an easy mechanism for creating a custom master page.

Because SharePoint Server is based on ASP.NET, SharePoint master pages are also very similar to master pages in ASP.NET. This section describes key aspects of SharePoint master pages; for more information about traditional ASP.NET master pages, see ASP.NET Master Pages Overview.

Content Placeholders in SharePoint Server

In addition to referencing and using all of the specific SharePoint controls, SharePoint master pages have a specific set of required content placeholders. If these required content placeholders are deleted from a master page, SharePoint Server displays an error in the browser. Often a particular site design does not use these required content placeholders, and in these cases it is helpful to have a method for hiding required content placeholders. You can remove content placeholders from the rendered page without causing an error by nesting them within a hidden ASP.NET panel control. The following code shows a content placeholder placed in a hidden panel.

<asp:Panel visible="false" >
  <asp:ContentPlaceHolder ID="PlaceHolderNavSpacer"  />
</asp:Panel>

For more information about how content placeholders are used in the SharePoint default master page, see Modify the Default SharePoint Content Placeholders.

Minimal Master Page

Because of the requirement for specific content placeholders, creating a custom SharePoint master page from scratch can be challenging. Although one of the built-in master pages could serve as the starting point for a new custom master page, the built-in master pages contain a significant amount of branding that you would have to delete before beginning. A better solution is to start from a minimal master page, which is a preconfigured master page skeleton that includes only the functionality that is absolutely required to create a functioning SharePoint page. For more information, see How to: Create a Minimal Master Page.

This article includes a well-commented minimal master page that is particularly suited for an Internet-facing publishing site. You can find all the code for the minimal master page in the associated files that are available for download with this article (MSDN Sample - Real World SharePoint Branding).

For the most part, this is a traditional SharePoint minimal master page; however, any functionality that is not appropriate for an Internet-facing Web site has been removed. Each section of the master page has comments that label which functional SharePoint area is represented. There are a few sections near the top of the master page that are worth discussing.

Handling Internet Explorer 8 Compatibility

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The meta tag that was discussed earlier is included in the minimal master page to ensure proper behavior in Internet Explorer 8.

Working with CSS

<SharePoint:CssLink />
<link rel="stylesheet" type="text/css" href="/Style%20Library/
en-us/Custom%20Styles/SiteName/style.css">

One of the key aspects of branding a SharePoint site is the cascading nature of CSS. Generally, if two CSS rules have the same specificity, the CSS rule that is loaded last is the style that is applied to an element. For more information about this concept, see the W3C's Assigning Property Values, Cascading, and Inheritance.

Microsoft has taken full advantage of the cascade and uses it as the primary means of overriding built-in styles with custom styles. The bulk of the CSS style that is loaded by default in SharePoint Server comes from core.css, which is loaded from the [..]\12 folder where most of the SharePoint installation files are installed.

For a list of all of the styles listed in core.css, see Cascading Style Sheets Class Definitions for Windows SharePoint Services.

One of the primary tasks in branding a SharePoint site is overriding core.css with a custom CSS that styles the SharePoint functionality to match the overall Web site branding. Although you might be tempted to use the SharePoint control <SharePoint:CssRegistration> to import custom CSS into a master page, this control always loads core.css last. Because of this, the most reliable method of including custom CSS in a custom master page is by using the standard HTML <link> tag. This tag must be added to the master page AFTER <SharePoint:CssLink> to ensure the custom CSS is loaded after all of the built-in CSS. The <link> tag in the minimal master page is set to look for the custom CSS in the Style Library of the publishing site under the Custom Styles/SiteName subfolder. You should replace the placeholder folder name SiteName in the minimal master page with an actual site's name.

Note

When making references to Web files such as a custom style sheet, SharePoint Server provides the $SPUrl token for making a site collection root–relative URL or a site root–relative URL. The style sheet reference in the minimal master page could be written to use this functionality as follows. <link rel="stylesheet" type="text/css" href="<% $SPUrl:~sitecollection/Style%20Library/ en-us/Custom%20Styles/SiteName/style.css %>">. 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 site collection relative URL ensures that styles are loaded from the site collection's own Style Library and not the site collection's Style Library. The disadvantage to using this method is that the SharePoint Designer Design View has problems displaying the custom CSS when it is referenced in this way. Because of this issue, this article does not use the $SPRUL variable in its URLs.

Handling the Name.dll ActiveX Control

<script type="text/javascript" 
src="/_catalogs/masterpage/custom_activex_override.js"></script>

For Internet-facing publishing sites, one particularly annoying message that is shown at the top of the Internet Explorer 7 browser asks the user to add the "Name" ActiveX control. Figure 15 shows this message at the top of Internet Explorer 7.

Figure 15. Name ActiveX message in Internet Explorer 7

Name ActiveX message in Internet Explorer 7

Typically, this control is not used by anonymous SharePoint users and the request to load this control can be disturbing to users who are not familiar with SharePoint Server. You can handle the problem by including a small amount of ECMAScript (JavaScript) code that overrides the call to this ActiveX control. The JavaScript code is stored with the custom master page in the Master Page Gallery. For more information, see Configuring and Deploying Anonymous Publishing Sites for SharePoint Server 2007; specifically, see the section "Managing the Name ActiveX Control."

Creating a Master Page with SharePoint Designer

Having the code for a minimal master page is only part of the work; the next step is adding the master page to SharePoint Server. Because of the ease of working with SharePoint sites, SharePoint Designer is particularly well suited for this task. The following steps describe the process of adding the minimal master page to SharePoint Server with SharePoint Designer, renaming the page for use as the Adventure Works Travel master page, and then checking in, publishing, and approving the master page.

  1. Open a publishing site in SharePoint Designer.

  2. In the Folder List panel on the left side, expand _catalogs, and then masterpage (Master Page Gallery). This is the Master Page Gallery, where all master pages and page layouts are created.

  3. Drag Minimal_Internet.master from the local file system to the master page (Master Page Gallery) in the Folder List pane of SharePoint Designer.

  4. Rename the file AdventureWorks.master.

  5. Right-click AdventureWorks.master, and then click Check In. On the Check In menu, click Publish a major version, and then click OK.

  6. Because there is an approval workflow applied to the Master Page Gallery, a message appears that says "This document requires content approval. Do you want to view or modify its approval status"; click Yes.

  7. The SharePoint Web interface opens in a browser. Log on with your user name and password if you are challenged to authenticate.

  8. The Master Page Gallery opens with a view grouped by Approval Status. Click to the right of AdventureWorks.master, and then select Approve/reject on the menu.

  9. For Approval Status, click Approved, and then click OK.

    Note

    Master pages must be checked in as a major version, published, and approved before users other than the user who has the file checked out can 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 can see updates only if the changes have been checked in as a major version, published, and approved.

When working with SharePoint files in SharePoint Designer, understand that SharePoint Server puts them into an uncustomized state. This can affect 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, as opposed to working on final versions of files on a production server running SharePoint Server. For more information about creating uncustomized files in SharePoint Server, see Understanding and Creating Customized and Uncustomized Files in Windows SharePoint Services 3.0.

Applying a Master Page

Now that you have the master page checked in and approved, the next step is to apply the master page to the SharePoint site.

To apply the master page to the site

  1. Click Site Actions, click Site Settings, and then click Modify All Site Settings.

  2. Click Master page.

  3. For Site Master Page, select AdventureWorks.master, and then click Reset all subsites to inherit the Site Master Page setting. Leave System Master Page as it is, and ensure Alternate CSS URL is set to Use Windows SharePoint Services default styles. Click OK.

By not applying the master page to the System Master Page, all nonapplication pages will have the master page applied, except for the forms and views pages. One disadvantage of applying a very stylized master page such as Adventure Works Travel as the System Master Page is that long SharePoint list menus can be so wide that they break out of the fixed-width design. Whether to apply a custom master page to the System Master Page is purely a business decision.

With the minimal master page applied, the site is ready to have a brand applied to it. The minimal master page is certainly not very attractive, but that is addressed in the following sections.

Figure 16. Minimal master page applied to a publishing site

Minimal master page applied to a publishing site

Adding the Other Branding Files to SharePoint Server

The branding for Adventure Works Travel requires a few other files so that it can work properly. All of them are included with the downloadable code associated with this article (MSDN Sample - Real World SharePoint Branding). Now add the following to SharePoint Server by using SharePoint Designer:

  • custom_activex_override.js Add this JavaScript file that corrects the ActiveX problem to the Master Page Gallery. You must check it in, publish it as a major version, and approve it.

  • CSS and images Add the original CSS file and all of the images that were used in the HTML version of the site to Style Library/en-us/Custom Styles/AdventureWorks (you will need to create the latter two subdirectories first). Select all of the images and style.css, then check in and publish a major version. Because the Style Library does not have an approval workflow applied to it, approving the files is not necessary. For more information about other places to store branding assets in SharePoint Server, see "Deployment Options for Branding Files" in Implementing a Brand in a SharePoint Server 2007 Publishing Site.

Building the Master Page with HTML

After you add all of the branding files to the SharePoint site, the next step in creating the custom master page is to start adding in code from the HTML design to the minimal master page. Along with adding the HTML, this is also a good time to start moving areas of the minimal master page around in the overall layout and make any other site-specific changes.

For the Adventure Works Travel site, this process begins with the <head> section of the minimal master page. Two areas of the <head> section have text for "Site Name" that can be changed to Adventure Works, as follows.

<title ><asp:ContentPlaceHolder id="PlaceHolderPageTitle" 
>Adventure Works - Home</asp:ContentPlaceHolder></title>
<link rel="stylesheet" type="text/css" href="/Style%20Library/
en-us/Custom%20Styles/AdventureWorks/style.css">

At this time, you will not be applying SharePoint themes for the Adventure Works Travel site. So you can remove the <SharePoint:Theme> control.

Next, everything from the original HTML design between the <form> tag and the </form> tag is copied into the master page after the <WebPartPages:SPWebPartManager /> control. The following sections describe which areas of SharePoint functionality are moved from the lower parts of the minimal master page up into the pasted HTML code.

  1. The Site Actions menu and the Welcome or Login menu are both moved into corresponding <DIV> tags in the HTML. The static text that was used to mock up the functionality is removed from the HTML.

    <div class="customSiteActions">
  <PublishingSiteAction:SiteActionMenu /></div> 
<div class="customWelcome">
  <wssuc:Welcome id="explitLogout" /></div>
</div>

  2. The static link back to home, <a class="customLogo"href="#"></a>, is replaced with an <asp:Hyperlink> link. If needed, this could use a $SPUrl variable, as discussed earlier in the article.

                                            <asp:HyperLink  id="HyperLink1" href="/" 
CssClass="customLogo" ToolTip="Back to Home"></asp:HyperLink>

  3. The static navigation is replaced with the SharePoint Global Navigation control and the corresponding data source.

    <div class="customTopNavHolder">
    <SharePoint:AspMenu ID="GlobalNav" Runat="server" DataSourceID="SiteMapDataSource1"
     Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"
     StaticSubMenuIndent="0" DynamicHorizontalOffset="0" DynamicVerticalOffset="0"
     StaticEnableDefaultPopOutImage="false" ItemWrap="false" 
       SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>" 
     CssClass="customNavItemContainer">
      <StaticMenuItemStyle CssClass="customTopNavItem" ItemSpacing="0"/>
      <StaticSelectedStyle CssClass="customTopNavSelected" ItemSpacing="0"/>
      <StaticHoverStyle CssClass="customTopNavHover"/>
      <DynamicMenuStyle CssClass="customTopNavFlyOut" />
      <DynamicMenuItemStyle CssClass="customTopNavFlyOutItem" />
      <DynamicHoverStyle CssClass="customTopNavFlyOutHover"/>
    </SharePoint:AspMenu>
   <PublishingNavigation:PortalSiteMapDataSource ID="siteMapDataSource1" Runat="server"
    SiteMapProvider="CombinedNavSiteMapProvider" EnableViewState="true"
     StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false"
     TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading"/>
</div>

  4. The Windows SharePoint Services 3.0 design console and the Publishing Page Editor Toolbar are both added to the customMain``<DIV>. This enables both types of editing bars to be shown inside the main content <DIV>.

      <div class="customMain">
   <wssuc:DesignModeConsole id="IdDesignModeConsole" />
   <PublishingConsole:Console />

  5. The left HTML column has several areas of functionality that will be added to it. First the PlaceHolderLeftNavBar content placeholder, then the static "Related Links" text, and then the SharePoint Current Navigation control (left navigation), and then finally the PlaceHolderLeftActions content placeholder. The first placeholder is used by some of the built-in pages for showing some navigation controls. The second placeholder will be used later in the Adventure Works Travel page layout for adding a Web Part zone below the left navigation.

    Notice that the StaticDisplayLevels is set to 1 and the MaximumDynamicDisplayLevels is set to 0. The first setting refers to the number of levels of navigation to show by default on the screen; the second setting refers to the number of levels of fly-out subnavigation that will appear when the user hovers the mouse over a menu item.

       <div class="customMainLeft">
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" >
     <div class="customTicketTitle">
         <h1>RELATED LINKS</h1>
        </div>
     <div class="customLeftNavHolder">
      <SharePoint:AspMenu ID="CurrentNav"  
      datasourceID="SiteMapDS" orientation="Vertical"
       StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0"        StaticSubMenuIndent="1" ItemWrap="true" AccessKey="3"
       CssClass="customLeftNavContainer"        SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>">      
        <LevelMenuItemStyles>
         <asp:MenuItemStyle CssClass="customLeftNavItem" />
         <asp:MenuItemStyle CssClass="customLeftNavLevel2" />
         <asp:MenuItemStyle CssClass="customLeftNavLevel3" />
        </LevelMenuItemStyles>
        <StaticHoverStyle CssClass="customLeftNavHover"/>
        <StaticSelectedStyle CssClass="customLeftNavSelected"/>
        <DynamicMenuStyle CssClass="customLeftNavFlyOut" />
        <DynamicMenuItemStyle CssClass="customLeftNavFlyOutItem"/>
        <DynamicHoverStyle CssClass="customLeftNavFlyOutHover"/>
      </SharePoint:AspMenu>
      <PublishingNavigation:PortalSiteMapDataSource       ID="SiteMapDS" Runat="server"
       SiteMapProvider="CurrentNavSiteMapProvider" EnableViewState="true"
       StartFromCurrentNode="true" StartingNodeOffset="0"        ShowStartingNode="false"
       TrimNonCurrentTypes="Heading"/>
     </div>   
    </asp:ContentPlaceHolder>   
    <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
   </div>

  6. The larger right column will hold most of the major page elements and some specific SharePoint functionality. First the PlaceHolderMiniConsole is added inside of the table. This content placeholder sometimes implements a page-level menu, specifically in Wiki pages. You must place it in a table to aid with its display. Next, the PlaceHolderTitleBreadcrumb content placeholder is added to the page and the <asp:SiteMapPath> control is included to show the page breadcrumb. Then, the PlaceHolderPageTitleInTitleArea content placeholder is added. It shows the Page Title from page layouts. Lastly, the PlaceHolderMain content placeholder is added. This is the main placeholder and will contain the actual content of the page. The mocked-up page content should be removed. This section is populated from the page layout also.

       <div class="customMainRight">

    <table style="float: right;">    
    <tr>
     <td>
      <asp:ContentPlaceHolder id="PlaceHolderMiniConsole" />
     </td>
    </tr>
    </table>

    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" >
     <div class="customBreadcrumbs">     
      <asp:SiteMapPath ID="siteMapPath" Runat="server"       SiteMapProvider="CurrentNavSiteMapProviderNoEncode"        RenderCurrentNodeAsLink="false"/>
     </div>
    </asp:ContentPlaceHolder>

    <div class="customMainContent">
     <h1 class="customPageTitle">
       <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea"  /></h1>
     <asp:ContentPlaceHolder id="PlaceHolderMain" />     
    </div>         
   </div>

   <div class="customClear"></div>
  </div>

At this point, the Adventure Works Travel master page is complete. You should check it in, publish it as a major version, and approve it so that end users can see the changes. Despite having the master page finished, the site still does not look like the final design. It needs more custom CSS added to the style.css file before the look is complete.

Building Out the CSS

When all of the CSS and images were added to the Style Library, the files included the style.css from the HTML design. This included all of the styles that created the look and feel of the HTML design, but several changes must be made to this CSS so that it works with the additional SharePoint functionality. This section begins with areas of the HTML design's CSS that must be updated, and then concludes with a large chunk of CSS that will be used to style the SharePoint functional elements.

Note

Working with CSS in SharePoint Server can be very challenging because of the sheer volume of CSS rules that are applied. With over 5,000 lines of CSS in use at any one time, designers and developers often turn to tools to help them work with CSS in SharePoint Server. Two such tools are the Internet Explorer Developer Toolbar and the Firebug Firefox plug-in. Both of these tools can be used to inspect and manipulate CSS that is being applied to a Web page (including SharePoint pages). One key feature that is common to both is the ability to point to areas of the page to get a better understanding of all the CSS that is applied and which rules are being overridden by the CSS cascade.

To build out the CSS

  1. The CSS changes begin with the Site Actions menu and the Welcome or Login menu. Site Actions will have most of its style removed (it will show up again later being applied to the specific SharePoint CSS classes). The Welcome or Login menu needs a line height and some margin applied.

    .customSiteActions {
 float:left; width:auto;
}
.customWelcome {
 float:left;
 line-height:15px; margin-left:5px;
 width:auto;
}

  2. Several styles need to be added to handle the various top navigation elements including the links, hover state, selected state, fly-out holder, and items.

    a.customTopNavItem {
 background-image:url(dottedline.gif);
 background-position:right top;
 background-repeat:no-repeat;
 float:left;
 padding:12px 10px 5px;
 width:auto;
}

.customTopNavItem a {
 color:white;
 font-family:arial,helvetica,sans-serif;
 font-size: 105% !important;
 font-weight: bold;
}

.customTopNavItem a:hover {
 text-decoration:none;
}

a.customTopNavHover {
 background-image:url(nav_hover.gif);
 background-position:right top;
 background-repeat: repeat-x;
 background-color:#287194;
 float:left;
 padding:12px 10px 5px;
 width:auto;
}

.customTopNavHover a {
 color:white;
 font-family:arial,helvetica,sans-serif;
 font-size: 105% !important;
}

.customTopNavHover a:hover {
 text-decoration: none;
}

.customTopNavFlyOut {
 margin:0px 0px;
}

.customTopNavFlyOutItem {
 background-color: #1e4b68;
}

.customTopNavFlyOut a {
 display:block;
 *width:100px;
 min-width:100px;
 color: #ffffff;
 padding:4px 8px 4px 10px;
 font-family:arial,helvetica,sans-serif;
}

.customTopNavFlyOutHover {
 background-color: #b5d8ee;
}

.customTopNavFlyOutHover a {
 color: #222222;
 text-decoration:none;
 font-family:arial,helvetica,sans-serif;
}

  3. The left navigation will also have style applied for just the container and the items. Because the left navigation in Adventure Works Travel will not show fly-outs there are no styles added for those states.

    .customLeftNavContainer {
 width: 100%;
}

table.customLeftNavItem {
 background-image:url(arrow.gif);
 background-position:left center;
 background-repeat:no-repeat;
 border-bottom:1px solid #ECF0EF;
 padding:4px 0 4px 14px;
 width: 100%;
}

  4. After all of the HTML design styles, many more CSS styles that are specific to SharePoint are added. Each of the style rules in this section begins with comments that describe its specific usage.

    /* site action arrow */
.ms-siteactionsmenu div div div img {
 display: none;
}

/* site action bg and button */
.ms-siteactionsmenu div div div {
 background-image:url(but_siteactions.gif);
 background-repeat:no-repeat;
 background-color: transparent;
 color:#007CB7;
 font-size:95%;
 height:17px;
 line-height:16px;
 padding-right:10px;
 text-align:center;
 width:80px;
 border: 0px;
 padding: 0px;
}

/* site action fonts */
.ms-siteaction, .ms-siteaction a {
 font-family: inherit;
 line-height:16px;
}

/* site actions font weight */
.ms-siteactionsmenu div div div a, .ms-siteactionsmenu div div 
  div a:link, .ms-siteactionsmenu div div div a:visited, .ms-siteactionsmenu
  div div div a:active {
 font-weight: normal;
 color:#007CB7;
}

/* site action link hover */
.ms-siteactionsmenu div div div a:hover, .ms-siteactionsmenu div div 
 div.ms-siteactionsmenuhover a:hover,  .ms-siteactionsmenu div div 
 div.ms-siteactionsmenuhover a,
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover a:link,  
  .ms-siteactionsmenu div div div.ms-siteactionsmenuhover a:visited, 
  .ms-siteactionsmenu div div div.ms-siteactionsmenuhover a:active {
 text-decoration: none;
 color: #007CB7;
}

/* site action hover button */
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover {
 background-image:url(but_siteactions_on.gif);
 background-repeat:no-repeat;
 background-color: transparent;
 color:#007CB7;
 font-size:95%;
 height:17px;
 line-height:16px;
 padding-right:10px;
 text-align:center;
 width:80px;
 border: 0px;
 padding: 0px;
}

/* welcome bar link hover */
.ms-SpLinkButtonInActive, .ms-SpLinkButtonActive {
 border: 1px none transparent;
 margin: 0px;
 background: transparent;
}

/* welcome bar text */
.ms-SPLink a:hover {
 text-decoration: underline;
}

/* welcome bar text */
.ms-SPLink {
 font-family: Tahoma,Geneva,Verdana,sans-serif;
}

/* remove margins is used by the default page breadcrumbs */
.removeMargins {
 margin: 0px;
}

/* page breadcrumbs */
.ms-pagebreadcrumb, .ms-pagebreadcrumb a {
 background-color: transparent;
 border: 0px transparent none;
 padding: 0px;
 color:black;
}

/* page breadcrumbs */
.ms-pagebreadcrumb a {
 color: #0077B4;
}

/* padding below the editor bar */
.ms-consoleframe {
 margin-bottom:10px;
}

/* Web Part title */
.ms-WPHeader td {
 border-bottom: none;
}

/* add a right float to the built-in search */
.customTopRight #SRSB {
 float: right;
}

/* fix the built-in search area 100% widths to instead just size correctly */
.customTopRight .ms-sbLastcell, .customTopRight .ms-rightbodysectionsearchbox {
 width: auto;
}

/* fix the built-in search text box size */
.customTopRight .ms-sbtable-ex {
 width: auto;
}

/* fix the built-in search drop-down list text size */
.ms-sbplain, select.ms-sbscopes {
 font-size: 11px !important;
}

/* fix the form font size when percents are used */
.ms-formlabel, .ms-formbody, .ms-ptabcn, .ms-sctabcn, .ms-sctabcf,
  .ms-sctabcnhover, .ms-sctabcfhover {
 font-size: 1em;
}

/* need to hide breadcrumbs inside of main content because 
   some of the built-in page layouts would make them appear twice */
.customMainContent div.ms-pagebreadcrumb, .mainContent td.ms-pagebreadcrumb {
 display:none;
}

After those last style rules are added to style.css, the CSS for the Adventure Works Travel branding is complete. You must check in the style.css file and publish it as a major version so that end users can see the changes. Figure 17 shows the much improved SharePoint branding. Notice that the content part of the page is still not looking like the design mockup. This area will be branded with a custom page layout.

Figure 17. Almost completed SharePoint branding

Almost completed SharePoint branding

Creating a Custom Page Layout

Page layouts are used as a type of page template in publishing sites to give designers and developers a way to create different types of page designs that live inside of the master page design. In addition to overriding the content placeholders from the master page, page layouts also define all of the editable content areas of the page with field controls, Web Parts, and Web Part zones. To learn more about the differences between field controls and Web Parts see Understanding Field Controls and Web Parts in SharePoint Server 2007 Publishing Sites.

Every SharePoint page layout is created from one specific SharePoint content type. Content types define all of the site columns that can be used to store data for the page. These site columns make up the available field controls that can be used in the page layout. For simplicity, the Adventure Works Travel page layout uses the existing built-in Welcome Page content type. This content type has enough site columns to create an Adventure Works Travel page, and because it is the same content type as the precreated SharePoint home page, it can be easily changed out for the new page layout. For more information about working with SharePoint content types and page layouts, see the SharePoint Designer 2007 Help and How-to section for Page Layouts and Publishing Sites.

To create a custom page layout

  1. On the File menu, click New, and then click SharePoint Content.

  2. On the menu, select SharePoint Publishing and Page Layout.

  3. Do the following:

    • For Content Type Group, select Page Layout Content Types.

    • For Content Type Name, select Welcome Page.

    • For URL Name, type lay_AdventureWorks.

    • For Title, type Adventure Works.

  4. Click OK.

SharePoint Designer opens the new page layout with the PlaceHolderPageTitle and PlaceHolderMain content placeholders already created.

<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" >
  <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" />
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" >
</asp:Content>

Editing a Page Layout

This section describes the content controls, field controls, and Web Part zones to add to the Adventure Works Travel page layout. You add these from specific task panes in SharePoint Designer.

Field Controls

You add field controls to a page layout in SharePoint Designer by using the Toolbox pane. Simply drag the field controls you want from the Toolbox pane to the content control that will contain them. Figure 18 shows the Toolbox pane in SharePoint Designer.

Figure 18. Toolbox Pane in SharePoint Designer

Toolbox pane in SharePoint Designer

Web Part Zones

To add a Web Part zone to a content control, select the content control in SharePoint Designer and then click the New Web Part Zone button at the bottom of the Web Parts pane. This creates an empty Web Part zone, which you can then give a more useful title to help content authors identify it in the Web user interface. Figure 19 shows the Web Parts pane in SharePoint Designer.

Figure 19. Web Parts pane in SharePoint Designer

Web Parts pane in SharePoint Designer

Use the following steps to finish the page layout for Adventure Works Travel.

To finish the page layout for Adventure Works Travel

  1. The PlaceHolderLeftActions content control is added and a Web Part zone is created inside of it. This enables Web Parts to be added under the left navigation on pages.

    <asp:Content ContentPlaceholderID="PlaceHolderLeftActions" >
  <WebPartPages:WebPartZone id="LeftZone"  
   title="Left Zone"><ZoneTemplate></ZoneTemplate>
  </WebPartPages:WebPartZone>
</asp:Content>

  2. The PlaceHolderPageTitle content control will have the text Adventure Works - added before the PageTitle field control. This adds the text before the page title and places all of this text into the HTML page title.

    <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" >
  Adventure Works - <SharePointWebControls:FieldValue 
  id="PageTitle" FieldName="Title" />
</asp:Content>

  3. The PlaceHolderPageTitleInTitleArea content control is added with the TitleField field control inside of it. This adds the page title before the page content.

    <asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" >
 <SharePointWebControls:TextField  id="TitleField" FieldName="Title"/>
</asp:Content>

  4. The PlaceHolderMain content placeholder will start with the <WebPartPages:SPProxyWebPartManager /> control (added automatically by SharePoint Designer when Web Parts are being used in a page layout). Next, the Comments field control is added to enable content authors to edit the subtitle for the page. Then, the PublishingPageContent field control is added; it will hold the main rich-HTML content of the page. Finally, another Web Part zone is added to enable content authors to add more Web Parts below the page content.

    <asp:Content ContentPlaceholderID="PlaceHolderMain" >
  <WebPartPages:SPProxyWebPartManager  
    id="ProxyWebPartManager"></WebPartPages:SPProxyWebPartManager>

  <div class="customSubTitle">
    <SharePointWebControls:NoteField FieldName="Comments" 
      ></SharePointWebControls:NoteField>
  </div>

  <PublishingWebControls:RichHtmlField id="Content" 
    FieldName="PublishingPageContent" />

  <WebPartPages:WebPartZone id="BottomZone"  title="Bottom 
    Zone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</asp:Content>

This is all of the code you need to create the Adventure Works Travel page layout. Before content authors can create pages based on this page layout, you must check it in, publish it as a major version, and approve it.

Changing the Page Layout of a Page

Now that you have the completed custom page layout, you can create new pages that are based on it. This is certainly useful for filling the site with new content, but there is still one remaining step in making the home page look like the initial design comp. Because the home page is using a built-in Welcome page layout, you need to change it to use the custom Adventure Works Travel page layout.

  1. From the home page in a browser, click Site Actions, and then click Edit Page.

  2. From the Page Editor Toolbar, click Page, and then click Page Settings and Schedule.

  3. From this menu, change Page Layout to (Welcome Page) Adventure Works.

  4. Click OK.

The Adventure Works page layout is applied when the browser reloads the page. Figure 20 shows the field controls and Web Part zones when the page is in edit mode.

Figure 20. Adventure Works Travel home page in edit mode

Adventure Works Travel home page in edit mode

Packaging and Deploying SharePoint Branding

At this point, you have created and applied the Adventure Works Travel site branding on an existing SharePoint publishing site. Although this works great for testing and demonstration purposes, the next step in the process is to package the branding files—including images, CSS, JavaScript, and markup—in the master pages and page layouts in a way that the branding files can be added to other environments. This enables the site designer to easily distribute the branding files. There is more than one way to do this.

The first way is to simply use the site collection backup and restore method. This option is not ideal in an Internet-facing scenario because all the files remain customized. For more information about the differences in and implications of SharePoint customized and uncustomized files, 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 become challenging. Therefore, an uncustomized branding and management process is preferred, especially for highly trafficked sites and those filled with a significant amount of content.

Branding Deployment Options

When deploying uncustomized branding files, publishing site implementers are presented with a few different options as to where to deploy the files. The three most popular and common options are:

  • Deploy branding files to the site's top-level folder.

  • Deploy branding files to the site's _layouts directory.

  • Deploy branding files to the site collection's content database.

Each option has distinct advantages and disadvantages, all addressed in Implementing a Brand in a SharePoint Server 2007 Publishing Site. The rest of this article assumes that you are using the last option, deploying branding files to the site collection's content database. This approach makes the maintenance and potential future rebranding campaigns much easier to carry out. All the files are deployed to the site collection's Master Page Gallery and Style Library with this approach, which are two special libraries found in the top-level site of all SharePoint publishing site collections.

So what is involved in deploying branding files to the site collection's content database? Provisioning files into the site collection's content database, specifically the Master Page Gallery and Style Library, involves using Features. The SharePoint Feature framework provides a way for creating customized and uncustomized instances of files in the SharePoint content database. The source files, including images, CSS, JavaScript 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 the file into the specified location.

This process is usually handled by developers and administrators, because it involves putting files on the file system and creating Features and SharePoint solution packages (.wsp files).

SharePoint Brand Packaging and Deployment Process Overview

The packaging and deployment approach selected and demonstrated in the remainder of this article follows the principle of enabling each individual responsible for their own area of expertise to focus only on that area. This makes for a much cleaner and smoother process of implementing and deploying a new brand for a publishing site. For example, up to this point this article has addressed two of the three components in building a custom SharePoint brand:

  • Create the brand with SharePoint Server in mind, taking into account things such as the Welcome menu and Site Actions controls.

  • Implement that brand in SharePoint by using master pages and page layouts, overriding the built-in SharePoint CSS and adding certain JavaScript code to work around specific Internet-facing site issues.

The person who has the role of site and branding designer is responsible for these two components. The third component is usually served by the role of the site developer, who will create the SharePoint Feature and SharePoint solution package that will be used to deploy and provision the files to the site collection. The designer needs to take the branded publishing site and turn it over to the developer for packaging. The site developer pulls the files out of the site collection and adds them to a new Feature, and then takes that Feature, includes it in a .wsp file, deploys the SharePoint solution package, and tests the branding files by activating the Feature. If the site designer and developer work in different environments, for example, if the branding is outsourced to a vendor, the easiest approach is for the designer to back up the site collection by using the STSADM.exe utility and then send the backup file to the developer, who can restore the site collection into a new SharePoint Web application.

Transfer the Branded Site Collection from Designer to Developer

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, for example to a vendor agency, the developers need a simple 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 file can even be sent via e-mail message, because the site collection does not contain any content and so is not very large in size. Back up the site by using the STSADM.exe utility, as follows.

STSADM.EXE -o backup -url [URL USED WHEN CREATING AND TESTING THE BRAND] -filename c:\AdventureWorksBranded.dat

Now, you take the c:\AdventureWorksBranded.dat file and deliver it to the developers. The developers can then restore the site into their environment. It is best to restore backed-up site collections into the root of a new SharePoint Web application that has no other site collections, to ensure that there are no possible files in other sites that might be accidentally referenced. Restore the site collection into the http://test.adventure-works.com site, by using STSADM.exe again.

STSADM.EXE -o restore -url http://test.adventure-works.com -filename c:\AdventureWorksBranded.dat

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 take. Because the two environments are likely not part of the same domain, the primary site collection administrator is no longer a valid account in the restored environment. This can be changed quickly in Central Administration by selecting the Site Collection Administrators link on the Application Management page. Select the site collection the backed up site was restored to, and change the primary site collection administrator to the account that will be used to logon to the site and to extract the files.

At this point, the developers now have a local copy of the branded publishing site.

Create a Visual Studio Project to Hold and Package the Branding File Feature

The next step is to create the Microsoft Visual Studio project that holds the Feature and is used for the creation of the .wsp file. Although Microsoft Visual Studio 2008 does not include any built-in SharePoint development tools, Microsoft has made an add-on available that makes developing for SharePoint easier: the Visual Studio extensions for Windows SharePoint Services 3.0 (VSeWSS). The VSeWSS is a free download for Visual Studio 2008. Microsoft is continuously making updates to the VSeWSS and therefore the version and download page changes with each update. The easiest way to stay up to date and get the latest VSeWSS is to search for VSeWSS on the SharePoint Team Blog or just use a search query such as https://www.bing.com/search?q=site%3Ablogs.msdn.com%2Fsharepoint+vsewss to find all the VSeWSS-related posts on the blog. To help you get up to speed on VSeWSS, Microsoft has provided Windows SharePoint Services 3.0 Tools: Visual Studio 2005 Extensions User Guide, Version 1.1, a downloadable user guide. The guide targets the VSeWSS 1.1 release, however, the concepts and steps apply to even the most current release.

Create a new project in Visual Studio 2008 by using the Empty project template that is added by the VSeWSS installation, as shown in Figure 21.

Figure 21. Create Empty project by using VSeWSS in Visual Studio 2008

Create an empty project using VSeWSS

When prompted for the trust level (either Full Trust or Partial Trust) by Visual Studio, you can pick either one. For the purposes of this article, no code will be compiled and thus, no assembly is needed. So the option selected is irrelevant to the topic of deploying custom branding files.

At this point, the Visual Studio project is created and there is a working sample branded publishing site to work from. The next step is to pull the files from the branded publishing site and add them to the Visual Studio project, creating a Feature.

Note

VSeWSS are not required to create a Feature that will deploy branding files into a SharePoint publishing site collection. They are simply used for demonstration purposes in this article.

Extract Branding Files from SharePoint and Add to Visual Studio Project

Moving files from the branded sample publishing site collection created from the restored backup file is a three-step process:

  1. Add the containers for the files in the Visual Studio project.

  2. Copy the files from the publishing site into the Visual Studio project.

  3. Modify the project files to include all the added files.

You will first add the Style Library files, followed by the files in the Master Page Gallery.

Style Library Files

The first group of files to pull from the SharePoint site collection are those in the Style Library. To do this, first set up the Visual Studio project container for the files:

  1. Create a new module: Right-click the project name, click Add, and then click New Item.

  2. In the Add New Item dialog box, select Module from the SharePoint category and name it StyleLibraryModule. In the Solution Explorer tool window, delete the sample.txt file from the StyleLibraryModule, because it is a placeholder file created by the VSeWSS.

Next, copy the files from the publishing site's Style Library into the project. One way to do this is to open the Style Library in the browser, switch the list to Explorer view, and then copy the files into Visual Studio.

  1. In the browser, open http://test.adventure-works.com.

  2. On the Site Actions menu, click Manage Site Content and Structure.

  3. In the left folder view, hover over the Style Library and use the ECB (Edit Control Block) menu to select Open link in new window.

  4. Expand the folder Style Library/en-us/Custom Styles/AdventureWorks, click Actions, and then click Open in Windows Explorer.

  5. Copy all the files in Windows Explorer and paste them into the StyleLibraryModule in the Visual Studio project, as shown in Figure 22.

    Figure 22. Style Library files in the Visual Studio project

    Style Library files in the Visual Studio project

With the files now in the project, the next step is to modify the module markup in the Feature so that all the files are provisioned into the correct location in the site collection when the Feature is activated. First you must modify the <Module> element in the Module.xml file to indicate where the files are going to be provisioned to in the publishing site collection. Change the <Module> element to provision the files into the Style Library, specifically into the /en-us/Custom Styles/AdventureWorks subfolder, and to allow files to be provisioned only into the root site in the site collection.

<Module Name="StyleLibraryModule"
      Url="/Style Library/en-us/Custom Styles/AdventureWorks"
      RootWebOnly="TRUE">

Now, each file that is to 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 a library (specifically the Style Library), the type should be GhostableInLibrary. Update the <Module> element to the following.

<?xml version="1.0" encoding="utf-8"?>
<Elements Id="6f0cda70-1e44-40b2-8f2c-747300b075ce" 
  xmlns="https://schemas.microsoft.com/sharepoint/">
  <Module Name="StyleLibraryModule"
          Url="Style Library/en-us/Custom Styles/AdventureWorks"
          RootWebOnly="TRUE">
    <File Url="arrow.gif" Path="arrow.gif" Type="GhostableInLibrary" />
    <File Url="bg.gif" Path="bg.gif" Type="GhostableInLibrary" />
    <File Url="but_go.gif" Path="but_go.gif" Type="GhostableInLibrary" />
    <File Url="but_go_on.gif" Path="but_go_on.gif" 
      Type="GhostableInLibrary" />
    <File Url="but_siteactions.gif" Path="but_siteactions.gif" 
      Type="GhostableInLibrary" />
    <File Url="but_siteactions_on.gif" Path="but_siteactions_on.gif" 
      Type="GhostableInLibrary" />
    <File Url="dottedline.gif" Path="dottedline.gif" Type="GhostableInLibrary" />
    <File Url="footer_bg.gif" Path="footer_bg.gif" 
      Type="GhostableInLibrary" />
    <File Url="glory.jpg" Path="glory.jpg" Type="GhostableInLibrary" />
    <File Url="logo.gif" Path="logo.gif" Type="GhostableInLibrary" />
    <File Url="microsoft_logo.gif" Path="microsoft_logo.gif" 
      Type="GhostableInLibrary" />
    <File Url="nav_hover.gif" Path="nav_hover.gif" 
      Type="GhostableInLibrary" />
    <File Url="poweredby_livesearch.gif" Path="poweredby_livesearch.gif" Type="GhostableInLibrary" />
    <File Url="style.css" Path="style.css" Type="GhostableInLibrary" />
    <File Url="ticket_bg.gif" Path="ticket_bg.gif" 
      Type="GhostableInLibrary" />
    <File Url="wp_topactivities.jpg" Path="wp_topactivities.jpg" 
      Type="GhostableInLibrary" />
    <File Url="wp_tripplanner.jpg" Path="wp_tripplanner.jpg" 
      Type="GhostableInLibrary" />
  </Module>
</Elements>

To verify that the changes are included in the deployed Feature, switch to the WSP View tool window (or on the View menu, click Other Windows, and then click WSP View). Click the refresh button at the top of the tool window and give Visual Studio a second or two to update the SharePoint solution package with the added files, as shown in Figure 23.

Figure 23. WSP View tool window with added Style Library files

WSP View tool window with added Style Library file

Now that you have taken care of the Style Library files, you can address the files in the Master Page Gallery.

Master Page Gallery Files

The other files required for deploying the Adventure Works Travel custom brand are in the Master Page Gallery. You must move three files in this gallery:

  • AdventureWorks.master The custom master page that is used to implement the brand.

  • custom_activex_override.js The JavaScript library that is used to suppress the name.dll ActiveX control from loading on page requests.

  • lay_AdventureWorksMain.aspx The page layout that is based on the built-in Welcome Page content type used for the site home page.

First, you create a new container for these files in the Visual Studio project:

  1. Create a new module by right-clicking the project name, clicking Add, and then clicking New Item.

  2. In the Add New Item dialog box, select Module from the SharePoint category and name it MasterPageGalleryModule. In the Solution Explorer tool window, delete the sample.txt file from the MasterPageGalleryModule, because it is a placeholder file created by the VSeWSS.

Now files can be retrieved from the site collection and added to the Visual Studio project. Two of these files, the JavaScript library and page layout, can be retrieved and copied in the Visual Studio project in the same way the Style Library files were added, by opening the library via Windows Explorer, as shown in Figure 24.

Figure 24. Solution Explorer with two Master Page Gallery files

Solution Explorer with Master Page Gallery files

The master page is a bit more difficult. When copying files, Windows Explorer uses WebDAV to access the files. However, WebDAV will not allow a file named *.master to be downloaded. You can work around this issue by creating a new template in the module in the Visual Studio project:

  1. Right-click the project name, click Add, and then click New Item.

  2. In the Add New Item dialog box, select Template from the SharePoint category and name it AdventureWorks.master. The new file is added to a Templates subfolder in the project.

  3. Drag the AdventureWorks.master file into the MasterPageGalleryModule.

  4. With the file added to the project in the correct location, the next step is to add the master page's markup to the page. Do this by opening the AdventureWorks.master file in SharePoint Designer 2007, copying the contents of the entire file, and pasting into the new AdventureWorks.master file added to the MasterPageGalleryModule.

Now, the MasterPageGalleryModule\Module.xml file needs to be modified to provision the three files into the Master Page Gallery:

  1. Replace the contents of the module.xml file with the following to provision all three files to the Master Page Gallery and to provision the JavaScript library.

    <?xml version="1.0" encoding="utf-8"?>
<Elements Id="94022f3a-580a-4745-9d9c-42c21f79fdfe" xmlns="https://schemas.microsoft.com/sharepoint/">
  <Module Name="MasterPageGalleryModule"
          Url="_catalogs/masterpage" RootWebOnly="TRUE">
    <File Url="custom_activex_override.js" 
          Path="custom_activex_override.js" 
          Type="GhostableInLibrary" />
  </Module>
</Elements>

  2. Next, add the following markup just after the JavaScript library <File /> element to provision the master page. Provisioning master pages requires the module to specify some additional fields, such as which content type the master page file should be associated with when provisioned.

    <File Url="AdventureWorks.master"
      Path="AdventureWorks.master" Type="GhostableInLibrary">
  <Property Name="ContentType"
            Value="$Resources:cmscore,contenttype_masterpage_name;" />
  <Property Name="Title" 
            Value="Adventure Works Travel Custom Branding" />
</File>

  3. Finally, you must add the page layout. Like the master page, it has additional properties to set. However, unlike the master page, it uses a different content type and also needs to set the content type that the page layout is associated with by using the PublishingAssociatedContentType attribute.

    Add the following markup after the master page's <file /> element.

    <File Url="lay_AdventureWorksMain.aspx"
      Path="lay_AdventureWorksMain.aspx" Type="GhostableInLibrary">
  <Property Name="ContentType"
            Value="$Resources:cmscore,contenttype_pagelayout_name;" />
  <Property Name="PublishingAssociatedContentType"
            Value=";#Welcome Page;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3
            DB064584E219954237AF390064DEA0F50FC8C147B0B6EA0636C4A7D4;#" />
  <Property Name="Title" Value="Adventure Works Travel Branded 
    Welcome Page" />
</File>

  4. Verify the changes will be included in the deployed Feature. Switch to the WSP View tool window (or click View, click Other Windows, and then click WSP View). Click the refresh button at the top of the tool window and give Visual Studio a second or two to update the SharePoint solution package with the added files (see Figure 25).

    Figure 25. WSP View tool window with added Master Page Gallery files

    WSP View tool with Master Page Gallery file

At this point the Visual Studio project is complete and it contains all the files that should be provisioned to the Master Page Gallery and Style Library.

Update Features and Solution Manifest in Visual Studio Project

Before testing the Visual Studio project on an existing SharePoint publishing site, there are a few final changes to make. Each time the VSeWSS added a new module, it put it in a new Feature. This is not the way to deploy branding files to the server and into the site collection because it requires the site owner to activate two Features. Further, the Features are currently scoped at the SharePoint site level when they should be scoped to the site collection.

  1. Rename one of the Features and treat it as the main Feature that will be used to provision all the branding files into the site collection.

  2. In the WSP View, select the StyleLibraryModule, press F2 to rename it, and then name it AdventureWorksTravelBranding.

  3. Move the master page files into this Feature by dragging the contents (but not the Feature itself) of the MasterPageGalleryModule into the AdventureWorksTravelBranding Feature so that the WSP View now looks like Figure 26.

    Figure 26. Reorganized WSP View of the RealWorldSharePointBranding Visual Studio project

    WSP View of RealWorldSharePointBranding

  4. Now, you must modify the main Feature so that it has a more appropriate name and the proper scope. From the WSP View, open the feature.xml file in the AdventureWorksTravelBranding Feature and change the <Feature> element's Title and Scope attributes, as follows.

    <Feature Title="Adventure Works Travel Branding" Scope="Site" . . . >

  5. Open the manifest.xml file from the WSP View and remove the <FeatureManifest Location="MasterPageGalleryModule\feature.xml" /> element because there is no longer a need to deploy this Feature.

Package, Deploy, and Test Branding Feature

With the Visual Studio project complete, it is now time to package, deploy, and test the new branding Feature. The best way to test the branding Feature is with a clean Publishing Portal site collection at the root of a new Web application. The reason for a new Web application and Publishing Portal site collection is to ensure that none of the files are referencing some of the files in the restored site collection, such as images or CSS. For the following test, a new Web application http://test1.adventure-works.com was created with a new site collection named Test1. Test1 was created at the root of the Web application by using the Publishing Portal template.

The VSeWSS add the capability to package and deploy the solution, followed by activating the Feature from within Visual Studio. However to do this, you must configure the correct test URL for the project:

  1. Right-click the RealWorldSharePointBranding project in the Solution Explorer tool window, and then click Properties.

  2. On the Debug tab, change the Start browser with URL: field to http://test1.adventure-works.com.

  3. Right-click the RealWorldSharePointBranding project in the Solution Explorer tool window, and then select Deploy. Visual Studio builds the project, packages the files into a SharePoint solution package (.wsp file), add the solution to the SharePoint farm's Solution Store, deploy the solution, and activate the AdventureWorksTravelBranding Feature on the http://test1.adventure-works.com site collection.

  4. Verify the branding files were deployed. Navigate to http://test1.adventure-works.com, and on the Site Actions menu, click Site Settings, and then click Modify All Site Settings. Switch the master page by selecting Master page under the Look and Feel group and set the Site Master Page to AdventureWorks.master. Go back to the home page of the site and ensure that the new branding is used. Just like before, the page will look a bit strange because it is not using the page layout that the branding Feature deployed. To fix this, click Site Actions, and then click Edit Page. On the Page Editing Toolbar, click Page, and then click Page Settings and Schedule. Change the page layout used to (Welcome Page) Adventure Works Travel Branding Welcome Page. Now when previewing the rendered page, it should look identical to the home page of the restored site collection.

To deploy the branding in other environments, look in the bin\debug folder of the Visual Studio project for the *.wsp file. This is the SharePoint solution package that contained the Feature that provisioned all the branding files into the publishing site collection.

Conclusion

This two-part article series addresses the entire process of branding a Microsoft Office SharePoint Server 2007 publishing site with a custom brand (see Real World Branding with SharePoint Server 2007 Publishing Sites (Part 1 of 2)). First, the site designer is taken through the process of what to consider when developing the brand for a new SharePoint publishing site, including examining issues that are unique to publishing sites and the SharePoint-specific controls such as Site Actions and Welcome. Next, the article describes the process of converting the branding comps to a real implementation in a publishing site by using master pages, page layouts, CSS, JavaScript, and images. Finally, the article describes the process of taking the branded publishing site and converting it to a Feature that will make the brand easier to maintain in the future. This is done by using the VSeWSS and creating a new project that provisions all the files involved in a custom brand.

Additional Resources

For more information, see the following resources: