Branding a SharePoint Portal Server 2003 Site: Part 2, How to Apply Your Own Corporate Brand

 

Daniel McPherson
Microsoft Consulting Services

December 2004

Applies to:
    Microsoft Office SharePoint Portal Server 2003

Summary: The second of two companion articles. Through step-by-step examples of the typical tasks involved in branding a Microsoft Office SharePoint Portal Server site, learn to change the standard banner, introduce a custom style sheet, and enhance the user experience of your portal site through interface, navigation, and page layout changes. For the first of this two-part article series, see Branding a SharePoint Portal Server 2003 Site: Part 1, Understanding the Use of a Corporate Brand. (17 printed pages)

Contents

Introduction
Scenario: Branding a Portal Site for Contoso
Applying a Custom Banner
Applying a Style
Modifying Left Area Navigation
Creating a Breadcrumb
Creating New Menu Items
Modifying Page Layouts
Conclusion

Introduction

You can easily transform a Microsoft Office SharePoint Portal Server site into a branded portal site that reflects and reinforces the identity of your organization. In this article, we provide step-by-step examples of the typical tasks you must perform to achieve this branding. We begin with a standard SharePoint Portal Server site and change it into a branded employee portal site for the fictional company Contoso through a series of tasks.

We begin the transformation by performing the most common type of modification, changing the standard banner. In our example, the banner includes not only new graphical elements, but also a modified horizontal navigation model.

Next, we alter the "look and feel" we want to achieve by introducing a custom style sheet; this article provides examples that guide not only the creation of the new style sheet, but the modification and creation of styles.

Finally, we provide samples for a number of other common scenarios, including changing left pane navigation, creating breadcrumbs, adding new menu items, and changing page layout.

Note   The example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, e-mail address, logo, person, places, or events is intended or should be inferred.

Scenario: Branding a Portal Site for Contoso

A standard Microsoft Office SharePoint Portal Server site provides an intelligent portal site for connecting users, teams, and knowledge throughout an organization. Because a portal site provides users with the ideal place to go when they want to start looking for information on their intranet, you should customize it so that it reflects and reinforces the identity of your organization.

Creating such an identity involves customizing the look and feel of the standard portal site. To achieve this, an organization's images, logos, colors, and styles must be incorporated into the product. You need to think about the design to ensure that it fits in with any existing intranet/Internet sites as seamlessly as possible.

We begin with a standard SharePoint Portal Server site, as shown in Figure 1.

Figure 1. Standard SharePoint Portal Server portal site (click picture to see larger image)

Through a series of tasks, we can transform this generic portal site into the Contoso-branded employee portal site shown in Figure 2. Contoso, Ltd. is a fictitious company that we are using for the purpose of this example.

Figure 2. Customized Contoso SharePoint Portal Server portal site (click picture to see larger image)

In this example, we use the following two GIF files—contoso.gif and globe.gif—to customize the banner. You can substitute your own custom GIF files for these files in the instructions. Or you can select the images that follow, right-click them, and save them to your computer.

Figure 3. Contoso logo image

Figure 4. Globe image

Applying a Custom Banner

Implementing a customized "banner," also known as a "brand box" or "header," is the most common branding requirement. The standard SharePoint Portal Server banner is shown in Figure 5.

Figure 5. Standard SharePoint Portal Server banner

We want the Contoso-branded banner to meet the following specific requirements:

  • Provide two logos or graphics, with the company logo placed on the left and a complimentary logo on the right, in this case a globe.
  • Move the My Site, Site Settings, and Help links (also known as Administration links) onto the same bar as the existing horizontal navigation elements.
  • Move the navigation bar to the top of the screen to match existing intranet design guidelines.
  • Change all colors and styles to those defined by the brand.

Figure 6 shows the new Contoso-branded banner.

Figure 6. Customized Contoso banner

The following sections describe how to create the header shown in Figure 6.

Modifying the Menu Bar

The menu bar that we move to the top of the screen is composed of two SharePoint server controls, as follows:

  • CategoryNavigationWebPart control

    <SPSWC:CategoryNavigationWebPart  id="HorizontalNavBar"
    DisplayStyle="HorizontalOneLayer" />
    

    In this example, we modify only the CategoryNavigationWebPart control's position.

  • PageHeader control

    <SPSWC:PageHeader id="PageHeaderID" 
    PageContext="SitePage" ShowTitle="false" HelpID="NavBarHelpHome"
    mode="LinksOnly"/>
    

    In this example, we need to modify some parameters so that the PageHeader control can appear on the same menu bar as the CategoryNavigationWebPart control.

    By default, the PageHeader control displays both the SharePoint Portal Server logo (as defined in Site Settings) and the Administration links, taking up the full width of the screen. To prevent it from displaying the SharePoint Portal Server logo and output only the Administration links in plain HTML, set Mode="LinksOnly".

For the Contoso menu we want this behavior because we are adding two logos. To control the look and feel of this element using style sheets, we give each a class ID of "CustomNavBar", which is described later in Applying a Style.

Storing the Images

The requirement for two images, or logos, introduces an important decision about where to store these files for easiest maintenance and best performance. We recommend that you create a new folder under the following SharePoint folder:

<%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES

For example, we can create a folder called contoso at the following location:

<%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES\contoso

If you then place your images in this folder, you can refer to them using a URL in the following format:

/_layouts/images/contoso/[Image Name]

Note   Whenever you create custom folders, make sure that they are included in your standard backup and restore procedures.

Replacing the Standard Banner

To substitute a different banner

  1. Using Notepad or another text editor, open the area default page, for example the portal site in the following location:

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared
        \web server extensions\60\TEMPLATE\1033\SPS\default.aspx
    

    Note   In the preceding path, 1033 is the locale identifier (LocID) representing U.S. English. Depending on your installation, you may have other folders containing area templates, for example, the LocID for Hebrew is 1037.

  2. Locate the following code section.

    <tr> <td colspan="3" width="100%">
    <SPSWC:PageHeader id="PageHeaderID" 
    PageContext="SitePage" ShowTitle="false" />
    <div class="ms-phnav1wrapper ms-navframe">
    <SPSWC:CategoryNavigationWebPart  id="HorizontalNavBar"/>
    </div>
    </td> </tr>
    
  3. Replace this code entirely with the following code.

    <!-- NEW HEADER -->
    <tr>
      <td colspan="3" width="100%">
        <table width="100%" cellpadding=0 cellspacing=0 border=0 >
          <tr>
            <td width="0%" nowrap>
              <div class="ms-phnav1wrapper">
              <SPSWC:CategoryNavigationWebPart 
                id="HorizontalNavBar"
    
              DisplayStyle="HorizontalOneLayer" />
              </div>
            </td>
            <td width="100%" class="CustomNavBar" nowrap align="left"
             valign="top">
              <a href="http://www.contoso.com">Contoso</a>
            </td>
            <td width="0%" class="CustomNavBar" nowrap align="left" 
             valign="top">
              <SPSWC:PageHeader id="PageHeaderID"  
               PageContext="SitePage"
               ShowTitle="false" HelpID="NavBarHelpHome"
               mode="LinksOnly"/>
            </td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="150" height="45">
              <img src="/_layouts/images/contoso/contoso_logo.gif"
               alt="Contoso">
            </td>
            <td width="100%">
            </td>
            <td width="150" align="right">
              <img src="/_layouts/images/contoso/globe.gif" 
               alt="Image:contoso">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- NEW HEADER -->
    
  4. Save the changes, and then view the page in the browser.

Applying a Custom Banner to All Pages on a Site

The preceding steps replace the banner on only the portal site home page. To make these changes on all the pages on your site, you must also change the following pages:

  • In each area template, the default.aspx file needs to be modified, for example, <%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\[Loc ID]\SPSNEWS\default.aspx.

    Note   Each folder in this [Loc ID] directory that is prefixed with SPS represents an SPS area template.

  • In the "Home" area (<%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\[Loc ID]\SPS), you must modify the following files:

    • TXTLSTVW.ASPX
    • SEARCH.ASPX
    • MOREINFO.ASPX
    • DMFramesetTopFrame.aspx
  • In the "Sites" area (<%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\[Loc ID]\SPSSITES\LISTS\SITESLST\) you must modify the SUMMARY.ASPX file.

  • The Microsoft Windows SharePoint Services sites hosted inside a portal area have a system property that ensures these pages render with a portal header rather than with the standard Windows SharePoint Services header. This is called the AlternateHeader property, and by default it is set to PortalHeader.aspx. To ensure consistency, update <%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\[Loc ID]\PortalHeader.aspx.

Applying a Style

We next describe all changes you make to style sheets to create a banner that reflects the branding requirements of the Contoso organization, which includes changing the color and appearance of the Menu bar, the horizontal navigation bar, the title area frame, and the search box.

Creating a Custom Style Sheet

You largely define the portal look and feel by a set of style sheets. You can find these in the following path:

<%SystemDrive%>\Program Files\Common Files\Microsoft Shared
    \web server extensions\60\TEMPLATE\LAYOUTS\[Loc ID]\STYLES

You should perform customizations to SharePoint Portal Server styles by using a new style sheet that overrides default styles. This approach isolates your changes from the standard product styles, making them simpler to maintain.

Note   For more information about styles used by Microsoft Windows SharePoint Services and Microsoft Office SharePoint Portal Server, see Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3.

To configure your portal to support a custom style sheet

  1. Create a new style sheet (a blank text file with a .css extension), and then place it in the same location as the standard style sheets, as follows.

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared
        \web server extensions\60\TEMPLATE\LAYOUTS\[Loc ID]\STYLES
    
  2. Browse to the portal instance with an account that has administrator privileges.

  3. Click Site Settings, and then click Change portal site properties and SharePoint site creation settings.

  4. Update the Location of cascading style sheet file property with the following value:

    /_layouts/[Loc ID]/styles/<custom stylesheet name.css>
    

The portal site now renders HTML elements based on the following order of cascading style sheets:

  1. OWS.CSS (Windows SharePoint Services style sheet)
  2. SPS.CSS (SharePoint Portal Server style sheet)
  3. <custom stylesheet>.CSS

As we described in Modifying the Menu Bar, a custom class of "CustomNavBar" is wrapped around the links output by the Page Header control so that its style can be easily managed using style sheets. Before a style is applied, the links appear as shown in Figure 7.

Figure 7. Administration links before new style application

To reflect the corporate "Green" color defined in the branding guidelines, you must add the following section to the custom style sheet created in the previous section.

.CustomNavBar
{
   border-top: 1px #4D917C solid;
   background-color: #4D917C;
   padding-left: 10px ;
   padding-top: 3px;
}
.CustomNavBar a
{
   background-color: #4D917C;
   font-family: Tahoma; 
   font-size: 70%; 
   font-weight: bold;
   color: white;
   text-decoration: none;
}
.CustomNavBar a:hover
{
   text-decoration: underline ;
}

After making the changes, save them, and then refresh the browser to observe a new menu like the one shown in Figure 8.

Figure 8. Styles applied to Administration links

For additional information about working with SharePoint styles, see Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3.

Horizontal Navigation Bar

Next, you modify the style of the standard SharePoint Portal Server HTML classes that are output by the CategoryNavigationWebPart control. You do this by adding in the differences between the styles as defined in the standard CSS files and the style needed to satisfy Contoso requirements.

Add the following style definitions to the custom style sheet.

.ms-phnav1wrapper {
   background-image: none;
   border-top: 1px #4D917C solid;
   background-color: #4D917C;
   BACKGROUND-REPEAT: no-repeat;
}
.ms-phnavmidc1sel, .ms-phnavmidc0sel
{
   BORDER-top: black 1px solid;
   BORDER-left: black 1px solid;
   BORDER-right: black 1px solid;
   BORDER-bottom: black 1px solid;
}
.ms-phnavmidc1sel a,.ms-phnavmidc0sel a
{
   color: green; 
}

Note   The preceding definitions are not the complete definitions; they are only the differences needed to achieve the required look and feel. After making the changes, save them, and then refresh the browser to observe a new menu like the one shown in Figure 9.

Figure 9. Customized horizontal navigation bar

The final element of the banner customization is the search box and title area frame. You perform this customization in two steps:

  1. Change a style.
  2. Modify an image.

Figure 10 shows the search box and title area frame on a standard portal site.

Figure 10. Standard title area frame and search box

Add the following styles definitions to the custom style sheet.

Div.ms-titleareaframe
{
    border-top: 3px solid #4D917C;
}
.ms-sbtable 
{ 
    background-color: #4D917C;
}
.ms-sblbcorner 
{  
    background-image: url(/_layouts/images/contoso/cornerbl.gif); 
}
.ms-sbtopcorner 
{  
    background-image: url(/_layouts/images/contoso/cornertop.gif); 
}

The final two styles refer to images, which are joined together to create the rounded left edge seen around the search box. These images are based on the standard versions.

To create the Contoso brand

  1. Copy both the cornertop.gif and cornerbl.gif images from the following folder.

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES
    
  2. Paste the images into the custom image folder created in Storing the Images.

  3. Open the images in a paint tool and change the color of the image to reflect the color specified by the brand.

  4. Ensure the URL specified in the preceding style definitions matches the location of the created files.

Modifying Left Area Navigation

The left area navigation required by Contoso specified that we display the child areas of not only the standard Topics hierarchy, but also that of the Communities hierarchy.

Figure 11. New left area navigation including Topics and Communities

You can achieve this by using the standard SharePoint Portal Server CategoryNavigationWebPart control with a vertical DisplayStyle attribute, as described in the following sections.

Discovering an Area Category ID

The CategoryNavigationWebPart control requires the Category ID of the parent area whose children are to be displayed. Your first step is to modify left area navigation to identify this property in both the Topics and Communities areas.

To modify left area navigation to identify the Category ID

  1. Browse to the portal site in Microsoft Internet Explorer.
  2. To navigate to Topics, click the Topics link.
  3. On the Actions menu, click Manage Security.
  4. In the Address bar in Internet Explorer, note the value following "CatID="; this is the unique Category ID for the area.
  5. Repeat this process for Communities.

Replacing the Standard Navigation

Now that you have identified the two unique Category IDs for Topics and Communities, you need to replace the standard navigation on all SharePoint Portal Server pages listed in Replacing the Standard Banner.

To replace standard navigation

  1. Using Notepad or another text editor, open the area default page, for example the portal site home page in the following location:

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared
        \web server extensions\60\TEMPLATE\[Loc ID]\SPS\default.aspx
    
  2. Locate the following code section in the page.

    <SPSWC:CategoryNavigationWebPart  
        id="VerticalNavBar" DisplayStyle="VerticalOneLayer" />
    

    Replace the code with the following.

    <table width="100%" border="0" cellspacing="0" cellpadding="0"
    class="ms-location">
       <tr>
          <td class="ms-locationhead">Topics</td>
       </tr>
       <tr>
    </table>
    <SPSWC:CategoryNavigationWebPart  id="TopicsVerticalNavBar" DisplayStyle="VerticalOneLayer"
    CurrentCategoryID="[Topics CatID]"/>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ms-location">
       <tr>
          <td class="ms-locationhead">Communities</td>
       </tr>
       <tr>
    </table>
    <SPSWC:CategoryNavigationWebPart 
    id="CommunitiesVerticalNavBar" DisplayStyle="VerticalOneLayer"
    CurrentCategoryID="[Communities CatID]"/>
    
  3. Save the changes, and then view the page in the browser.

Creating a Breadcrumb

The ability to display a "breadcrumb" trail on pages is a common requirement, and one expressed by our fictional company, Contoso. SharePoint Portal Server includes a standard control to do this. In the following figure, you can see this control below the area name (Human Resources).

Figure 12. Page with breadcrumb

You need to apply this modification to all pages requiring a breadcrumb.

To apply the breadcrumb modification

  1. Using Notepad or another text editor, open the area default page, for example the "Topic Area" home page in the following location:

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared
        \web server extensions\60\TEMPLATE\[Loc ID]\SPSTOPIC\default.aspx
    
  2. Locate the following code section in the page:

    <tr>
       <td ID="onetidPageTitle" class="ms-pagetitle">
          <SPSWC:CategoryProperty  Property="Name" />
       </td>
    </tr>
    
  3. Immediately after this, insert the following:

    <tr>
       <td>
          <SPSWC:BreadCrumbTrail  id="NewBreadCrumbTrail"
          LeadInText="" 
          VerticalMode="false" FrameType="None" />
       </td>
    </tr>
    
  4. Save the changes, and then view the page in the browser.

Creating New Menu Items

We added a menu item titled Submit An Idea! to the Actions list. In this example, it provides a link to a custom area called New Idea.

Figure 13. Action menu with Submit An Idea! link

We need to replicate this modification on all SharePoint Portal Server pages listed in the section titled Replacing the Standard Banner.

To make the modification on a page

  1. Using Notepad or another text editor, open the area default page, for example the portal site home page in the following location:

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared
        \web server extensions\60\TEMPLATE\[Loc ID]\SPS\default.aspx
    
  2. Locate the following code section in the page.

    <SPSWC:ToolBar  id="ActionBar" 
        RenderIfEmpty="false" Orientation="Vertical" 
        TitleLocId="CategoryManagement_ActionBar_Title_Text">
    
  3. Immediately after this, insert the following:

    <SPSWC:ToolBarButton  id="NewIdea" 
        navigateurl="/NewIdea/default.aspx" text="Submit An Idea!" 
        tooltip="Submit a new idea" editmodevisibility="Both"/>
    
  4. Save the changes, and then view the page in the browser.

Modifying Page Layouts

You can modify the page layout by using standard HTML tables. In this example the top zone is removed from the layout, as shown in Figures 14 and 15.

Figure 14. Portal site page before top zone is removed

Figure 15. Portal site page after top zone is removed

You need to replicate this on all SharePoint Portal Server pages listed in Replacing the Standard Banner.

To modify page layout using standard HTML tables

  1. Using Notepad or another text editor, open the area default page, for example the portal site home page in the following location:

    <%SystemDrive%>\Program Files\Common Files\Microsoft Shared
        \web server extensions\60\TEMPLATE\[Loc ID]\SPS\default.aspx
    
  2. Locate the following code section in the page and delete it.

    <tr> <td valign="top" ID="TopCell" width="100%" colspan="2" 
    class="ms-tztop"> <WebPartPages:WebPartZone  
    AllowPersonalization="false" FrameType="TitleBarOnly" ID="TopZone" 
    Title="Top Zone" Orientation="Vertical"/>  </td> </tr>
    
  3. Save the changes, and then view the page in the browser.

Conclusion

SharePoint Portal Server 2003 is a very flexible product and offers a variety of branding techniques. We have highlighted some of those techniques and demonstrated how easily you can change the face of your SharePoint Portal Server site.

Remember also that branding is like any other development project—it requires planning, development, management, and testing. The combination of good project management, along with the flexibility of SharePoint Portal Server, enables you to provide whatever customization your organization requires.

For overview information about branding a SharePoint portal site, along with information about the many different techniques and considerations of branding a SharePoint portal site, see Branding a SharePoint Portal Server 2003 Site: Part 1, Understanding the Use of a Corporate Brand.

Additional Resources

Microsoft SharePoint Products and Technologies 2003 SDK
Branding a SharePoint Portal Server 2003 Site: Part 1, Understanding the Use of a Corporate Brand
Daniel McPherson's blog