Bamboo Nation

Your SharePoint Community - Powered by Bamboo Solutions


	Sign in \| Join \| Help

The Bamboo Team Blog » SharePoint Branding for the KB Accelerator – Part 1/4

SharePoint Branding for the KB Accelerator – Part 1/4

Overview

This article is the first in a series of five articles that will describe how to customize and brand a SharePoint site using several different methods. We will demonstrate how to customize a site template that hosts Bamboo’s Knowledge Base Solution Accelerator, and in the process review the pros and cons of each approach to customization.

In this first article, we will explain how to customize a SharePoint site, using the Knowledge Base Solution Accelerator as an example. In this article, we will explain:

The makeup a SharePoint site.
How to use SharePoint Designer to customize a site.
How to customize site with a blank Master Page.

The articles in this series will cover:

Part 1 - How to customize a SharePoint site using SPD.
Part 2 - How to install a customized site using SharePoint feature deployment.
Part 3 - How to build a solution deployment package for a custom site.
Part 4 - How to customize a site definition and deploy a solution package using Visual Studio.

Why Customize SharePoint?

In many instances, a SharePoint site is created using one of the default Site Templates such as Team Site or Meeting Workspace. These "canned" templates provide a unique set of Lists, Document Libraries, Web Parts, Navigation and a distinct look and feel. In many situations, you can easily alter the appearance of the site simply by changing the theme, which requires little effort. In other situations, further customization is required to make the site look significantly different than the look and feel provided by the default templates.

One example of such customization would be modifying a site template created with the Bamboo Solutions Knowledge Base Solution Accelerator. Bamboo provides two different classes of products: Web Parts and Solution Accelerators. Web Parts are standard components that you can add to a Web Part zone in a SharePoint site. Solution Accelerators are typically provided with a SharePoint site template that has already been built and populated with Web Parts to get you up and running more quickly. One of the most popular accelerators that we offer is the Knowledge Base Solutions Accelerator, which comes with two default site templates: Team Site and Multi-Page Meeting Workspace, as shown in the figure below.

The advantage of using a standard template is that doing so allows you to quickly install solutions and get the site up and running fast. In many cases, however, your organization might want to customize the site to have a different look and feel which reflects corporate branding.

This article will provide a step-by-step procedure describing how you can customize your KB Site to have a “non-SharePoint” look, as shown here:

SharePoint Branding Overview

As mentioned above, SharePoint comes with several site templates that you can choose from when creating a site. The look and feel of these templates is mainly controlled through a given combination of fonts, images, color choices, navigation and Web Parts. These pre-built templates all share a distinct “SharePoint” look since most of them share the same basic Cascading Style Sheet (CSS) and page layout. Making changes to the basic design requires that you understand the makeup of a typical SharePoint site.

Since SharePoint is based on ASP.NET 2.0 technologies, its page layout also follows the same model, which is based on the concept of Master Page, Page Layout, CSS, and Site Templates. Master Pages are used to define the common elements on the SharePoint site, such as menu, navigation, logo, headers and footers. Master Pages are used to achieve a consistent look across the entire portal. Page Layouts are the schemas that allow you to control how the contents are placed on a page, and how that content is presented to users. Contents on the page are defined through the Content Page, which is just a normal .aspx page that is linked to a particular Master Page.

This diagram demonstrates the relationship between these components, and how a page is rendered in SharePoint:

When a user requests a .aspx page in SharePoint, that page will load the appropriate Master Page, then merge the contents with the placeholders in the Master Page, and only then is the entire content rendered to the end user.

CSS offers the same flexibility in SharePoint as it does in normal Web pages. SharePoint uses CSS extensively to control the formatting and look and feel of the page. You can specify the CSS used in a site by changing a theme, or by defining an alternate, custom CSS file.

SharePoint site templates are the combination of the Master Pages, Page Layout, and CSS that can be grouped together and are re-used in multiple sites. You can easily customize a site, and then export it out as a site template. The customized site template can then be uploaded into your SharePoint gallery and users can create new sites based on that particular site template. Site Template can actually contain other elements that you may wish to customize, such as Lists, Web Parts, Views and Work Flow.

SharePoint Branding Best Practices

SharePoint provides several different ways for users to customize the look and feel of a site. You will mainly have the following choices:

1. Out-of-the-box customization by selecting different themes.

Using theme to customize a SharePoint site is the simplest way, but also is the most limited. You just simply change the site fonts and colors scheme of your site. This can be quickly done using the Site Settings > Site Theme menu. Note that you must have the appropriate permission, such as a member of the Designer group, in order to modify a site theme.

Within the Site Settings, you can also quickly change other design elements such as navigation, icons, title and description.

1. Customize an instance of a site template using SharePoint Designer 2007.

Using SharePoint Designer 2007, you can customize a SharePoint site by directly editing the master page, page layout and style sheet. Since you are editing one instance of the site, the changes will only apply to this site.

Customize SharePoint sites using SPD is a quick and easy with an added benefit of be able to preview changes in WYSIWYG mode.

When you are editing pages using SPD, the pages you are editing are stored in the content database. These pages are called “customized pages”. Since SPD can not be used to edit pages on the file system, there are limitation to what you can do, for example:

You can not create a custom site template that contains Site Content.
You can not customize an Application master page, which is used in the admin page such as Site Settings.
Since SPD modify an instance of a site, it is cumbersome to propagate the changes to other servers and thus do not fit well into a more structured development environment.

2. Customize a site by Site Definitions and Visual Studio 2005/2008.

For organizations that need a formal development methodology and requires a more consistent branding across the entire SharePoint farm, using Visual Studio to modify file system based Site Definitions is a recommended practice.

Site Definitions is the most powerful and the most complex method of customize a SharePoint site. When you create a SharePoint site, the new site will be created based on one of the many out-of-the-box site definitions file, which has a folder on the file system that contain ONET.XML definition file. You can create a customized site definition file by adding a new folder and a new ONET.XML that contains a description of pages, css, images, lists and libraries that make up the site. The key advantage of customize using site definition is to avoid the risk of an upgrade that might overwrite your site templates, as well as the ease of provision a very large SharePoint farm.

The best way to customize a SharePoint site can only be determined by your organization’s requirements, and the level of skill sets available within your organization.

Customize a New KB Site Template

Now that you know what it takes to customize a site template, let’s go through a real use case and create a new site that hosts the KB Web Part. In this example, we will use the following steps to customize our site:

Download and install the KB Accelerator using its default template. The solution can be downloaded from Bamboo’s Web site at this location.
Use SharePoint Designer to modify the Master Page.
Create a new CSS file for your site.
Export and save the new site template.

Notes: Make sure that you try this exercise in a development environment to prevent potential failure of your production system.

Step 1: Edit the Master Page.

Start SharePoint Designer 2007, open the SharePoint site where you installed the KB Accelerator, and open the default.master file in the folder _catalogs/master page folder.

You can change the layout and delete unnecessary code on Master Pages. The basic master file in this example should look like this:

Note that in this example, we will modify the default.master page directly to make our customization. In the event that you want to create a new Master Page, make a copy of the default.master file and follow the instructions at the end of this article.

Go ahead and delete all the content in the main <table> tag in the default.master file.

Your Master Page file should look something like this next image, where the content of the Master Page has been removed:

Step 2: Add the CSS File

Next, you need to create and upload the CSS file that is used in the new template. You can either create a new CSS file and link to the new Master Page, or you can use and modify a default CSS file such as core.css. In this example, we will create a new CSS file, and reference it in the Master Page by adding the following statement to the bottom of the <head> section:

   1: <link rel="stylesheet" type="text/css" href="../../styles/kbclient-001.css" />

Notes: Make sure that the include path where you load the CSS file is correct. In the screen shot, the /_layout directory translates it to where you installed SharePoint, which is typically at [drive]:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\

Step 3: Set the Page Background Color

Add the following code class="bs-client-backgroundbody" into the Body section of your Master Page, then copy the following code and paste it into the CSS file. This code sets the background for the pages.

.bs-client-backgroundbody
{    
     background-color:#004600;
}

Step 4: Create Table Layout

Add the following code into the .master file.

   1: <table cellpadding="0" cellspacing="0" border="0" width="900px" class="bs-client-main" align="center">

Place it after <WebPartPages:SPWebPartManager id="m" runat="Server"/>, and add the following code to the .css file:

.bs-client-main{
    border: 1px solid #CCCCCC;
    background-color:#FFFFFF;
    height:700px;
}

Step 5: Add the Logo and Header

To display the header as shown below, copy the file “icon_Client.jpg” to the “images” folder in the root site.

And then paste following code into the .master file:

<tr valign="top" height="60px">
  <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server">
  <td><table cellpadding="0" cellspacing="0" border="0" class="bs-client-header-left">
      <tr>
        <td style="display:none"><asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" />
        </td>
        <td class="bs-client-globalTitleArea"></td>
      </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" class="bs-client-header-right">
      <tr valign="middle">
        <td><div class="bs-client-Welcome">
            <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"> </wssuc:Welcome>
          </div></td>
      </tr>
    </table></td>
  </asp:ContentPlaceHolder>
</tr>

And copy the following code into the .css file:

.bs-client-header-left {
    float: left;
}
.bs-client-header-right {
    float: right;
}
.bs-client-Welcome {
    padding-right:15px;
    padding-top:5px;
}
.bs-client-Welcome .ms-SpLinkButtonActive {
    border:#ffffff 1px solid;
    vertical-align:top;
    background-color: transparent;
    background-image: none;
}
.bs-client-Welcome .ms-SpLinkButtonActive {
    padding:1px 1px 1px 3px;
}
.bs-client-Welcome .ms-SpLinkButtonInActive {
    padding:1px 1px 1px 3px;
}
.bs-client-Welcome .ms-SpLinkButtonActive a:hover {
    color:#0064B4;
    text-decoration:none;
}
.bs-client-Welcome .ms-SpLinkButtonActive a {
    color:#0064B4;
    text-decoration:none;
}
.bs-client-Welcome .ms-SPLink {
    font-family: Verdana, "Century Gothic", Arial;
    font-size: 9pt;
    color:#4D4D4D;
}
.bs-client-Welcome .ms-SPLink A:visited {
    color:#4D4D4D;
    text-decoration:none;
}
.bs-client-Welcome .ms-SPLink A:link {
    color:#4D4D4D;
    text-decoration:none;
}
.bs-client-Welcome .ms-SPLink A:hover {
    color:#0064B4;
    text-decoration:none;
}
.bs-client-globalTitleArea {
    background-image: url('../images/icon_Client.jpg');
    background-position: 15px top;
    background-repeat:no-repeat;
    height: 60px;
    width: 400px;
}

Note: You can use an image of your own choosing by replacing “icon_Client.jpg” with another file in the image folder and modifying the class .bs-client-globalTitleArea in .css file (background-image, background-position,height,width …). Now open default.aspx and modify MasterPageFile property to your master page like so:

%@Pagelanguage="C#" MasterPageFile="_catalogs/masterpage/KBClient.master" …… %

Step 6: Add Quick Launch Menu

Next, we will add code to implement the “quick launch menu” as shown in the screen shot below. Paste the following code into the .master file:

<tr valign="top" height="20px">
  <td id="bs-quicklaunchMenu"><Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager" runat="server" QuickLaunchControlId="QuickLaunchMenu" ContainedControl="QuickLaunch" EnableViewState="false">
      <div>
        <SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">
          <Template_Controls>
            <asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server" />
          </Template_Controls>
        </SharePoint:DelegateControl>
        <SharePoint:AspMenu id="QuickLaunchMenu" DataSourceId="QuickLaunchSiteMap" runat="server" Orientation="Horizontal" StaticDisplayLevels="1" ItemWrap="true" MaximumDynamicDisplayLevels="1" StaticSubMenuIndent="0" SkipLinkText="">
          <LevelMenuItemStyles>
            <asp:menuitemstyle CssClass="bs-client-navheader" />
            <asp:menuitemstyle CssClass="bs-client-navitem" />
          </LevelMenuItemStyles>
          <LevelSubMenuStyles>
            <asp:submenustyle CssClass="bs-client-navSubMenu1" />
            <asp:submenustyle CssClass="bs-client-navSubMenu2" />
          </LevelSubMenuStyles>
          </LevelSelectedStyles>
        </SharePoint:AspMenu>
      </div>
    </Sharepoint:SPNavigationManager>
  </td>
</tr>

Note that the tag Property Orientation="Horizontal" will display a horizontal menu, and property StaticDisplayLevels="1" and MaximumDynamicDisplayLevels="1" will display the submenu as dynamic when you hover over the menu.

Paste the following code into the .css file:

table.bs-client-navheader img{
    display:none;
}
.bs-client-navheader{
    font-family: Verdana, "Century Gothic", Arial;
    font-size: 9pt;
    font-weight: normal;
    color: #4D4D4D;
}
.bs-client-navheader a{
    color: #4D4D4D;
    text-decoration:none;
    background-image:url('../images/Triangle_Y_Gray.png');
    background-repeat:no-repeat;
    height:8px;
    margin-left:20px;
    padding-right: 15px;
    background-position:right center;    
    width: 700px;
}
.bs-client-navheader a:hover{
    color: #0064B4;
    background-image:url('../images/Triangle_X_Blue.png');
    background-repeat:no-repeat;        
}
.bs-client-navSubMenu2{
    border: solid 1px #CCCCCC;
}
.bs-client-navitem td{
    height:24px;
}
.bs-client-navitem{
    font-family: Verdana, "Century Gothic", Arial;
    font-size: 9pt;
    font-weight: normal;
}
.bs-client-navitem a:visited{    
    color:#4D4D4D;
    font-weight: normal;
    text-decoration:none;    
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    padding-right:15px;
    width: 700px;
}
.bs-client-navitem a:link{    
    color:#4D4D4D;
    font-weight: normal;
            text-decoration:none;    
            padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    padding-right:15px;
    width: 700px;
}
.bs-client-navitem a{    
    color:#4D4D4D;
    font-weight: normal;
    text-decoration:none;    
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    padding-right:15px;
    width: 700px;
}
.bs-client-navitem td a:hover{
    background-color: #0064B4;
    color:#ffffff;
}
.bs-client-navitem td:hover a{
    background-color: #0064B4;
    color:#ffffff;
}
.bs-client-navitem td:hover{
    background-color: #0064B4;
    color:#ffffff;
}

Note that the .bs-client-navitem td:hover tag is used for the Firefox browser. After making the changes, press File>Save to save the changes, and then refresh the browser to see a new menu like the one shown in following images:

Step 7: Add the Banner

Next we will add the banner to the site template. Add the following code to the Master Page:

<tr valign="top" height="5px">
  <td class="bs-client-site-margin"><table cellpadding="0" cellspacing="0" border="0" width="700px">
      <tr>
        <td class="bs-client-line-left"></td>
        <td class="bs-client-line-center"></td>
        <td class="bs-client-line-right"></td>
      </tr>
    </table></td>
</tr>

And add to the .css file:

.bs-client-site-margin{
    padding-left: 5px;
    padding-right:5px;
}
.bs-client-line-left{
    background-color:#0064B4;
    width:25%;
    height:5px;
}
.bs-client-line-center{
    width:1%;
}
.bs-client-line-right{
    background-color: #CCCCCC;
    width:74%;
    height:5px;
}

Copy the files “background.jpg” and “banner-copy.jpg” to the images folder of the root site, and paste this code into the .master file:

<tr valign="top" height="94px">
  <td class="bs-client-banner"><div class="bs-client-right-banner"></div></td>
</tr>
<tr valign="top" height="3px">
  <td class="bs-site-margin"><table cellpadding="0" cellspacing="0" border="0" width="700px">
      <tr>
        <td class="bs-client-line-left-1"></td>
        <td class="bs-client-line-center-1"></td>
        <td class="bs-client-line-right-1"></td>
      </tr>
    </table></td>
</tr>

And paste into the css file:

.bs-client-banner{
    background-image:url('../images/background.jpg');
    background-position:left top;
    background-repeat: repeat-x;
    height:120px;
    margin-left:5px; 
    margin-right:5px;
}
.bs-client-right-banner{
    float:right;
    background-image:url('../images/banner-copy.jpg');
    background-repeat:no-repeat;
    background-position:right top;
    height: 120px;
    width:360px;    
}
.bs-client-line-left-1{
    background-color: #CCCCCC;
    width:74%;
    height:3px;
}
.bs-client-line-center-1{
    width:1%;
}
.bs-client-line-right-1{
    background-color:#0064B4;
    width:25%;
    height:3px;
}

Press Save and refresh the browser. You should see a new menu like the one shown here:

Step 8: Add the Action Menu

Next we will add the action menus to the site template. Add the following code to the .master file:

<tr valign="top" align="right" height="20px" >
  <td align="right"><table border="0" cellpadding="0" cellspacing="0" align="right" class="bs-client-site-action-margin bs-client-siteaction">
      <tr>
        <td class="bs-client-siteactionsmenu" id="siteactiontd"><SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"  PrefixHtml="&lt;div&gt;&lt;div&gt;"  SuffixHtml="&lt;/div&gt;&lt;/div&gt;" MenuNotVisibleHtml="&amp;nbsp;" MenuAlignment="Default">
            <CustomTemplate>
              <SharePoint:FeatureMenuTemplate runat="server" FeatureScope="Site" Location="Microsoft.SharePoint.StandardMenu" GroupId="SiteActions" UseShortId="true">
                <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create" Text="<%$Resources:wss,viewlsts_pagetitle_create%>" Description="<%$Resources:wss,siteactions_createdescription%>" ImageUrl="/_layouts/images/Actionscreate.gif" MenuGroupId="100" Sequence="100" UseShortId="true" ClientOnClickNavigateUrl="~site/_layouts/create.aspx" PermissionsString="ManageLists, ManageSubwebs" PermissionMode="Any" />
                <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage" Text="<%$Resources:wss,siteactions_editpage%>" Description="<%$Resources:wss,siteactions_editpagedescription%>" ImageUrl="/_layouts/images/ActionsEditPage.gif" MenuGroupId="100" Sequence="200" ClientOnClickNavigateUrl="BLOCKED SCRIPTMSOLayout_ChangeLayoutMode(false);" />
                <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings" Text="<%$Resources:wss,settings_pagetitle%>" Description="<%$Resources:wss,siteactions_sitesettingsdescription%>" ImageUrl="/_layouts/images/ActionsSettings.gif" MenuGroupId="100" Sequence="300" UseShortId="true" ClientOnClickNavigateUrl="~site/_layouts/settings.aspx" PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData" PermissionMode="Any" />
              </SharePoint:FeatureMenuTemplate>
            </CustomTemplate>
          </SharePoint:SiteActions>
        </td>
      </tr>
    </table></td>
</tr>

Add the following code to the .css file:

.bs-client-site-action-margin{
margin-right:10px;
}
.bs-client-siteaction a{
font-family: Verdana, "Century Gothic", Arial;
font-size: 9pt;
color:#4D4D4D;
text-decoration:none;
}
.bs-client-siteaction{
font-family: Verdana, "Century Gothic", Arial;
font-size: 9pt;
color:#4D4D4D;
text-decoration:none;
}
table.bs-client-siteaction td.bs-client-siteaction{
border-right: none;
}
table.bs-client-siteaction td.bs-client-siteaction div{
padding:3px 8px 3px 8px;
border-right: none;
}
.bs-client-siteactionsmenu{
white-space:nowrap;
font-family: Verdana, "Century Gothic", Arial;
font-size: 9pt;
padding:0;
border:none;
cursor:pointer;
}
.bs-client-siteactionsmenu div div div{
background-image: none;
border-top: none;
border-left: none;
border-right: none;
background-color: transparent;
padding:1px 4px 3px 10px;
}
.bs-client-siteactionsmenu div div div a{
color: #4D4D4D;
font-weight: normal;
}
.bs-client-siteactionsmenu div div div.bs-client-siteactionsmenuhover{
background-image: none;
border-top: none;
border-left: none;
border-right: none;
background-color:transparent;
}

Press Save and refresh the browser. You should see a new menu like the one shown here:

To test the action menu, click “Edit Page” from Site Actions. You should be able to see the page shift into edit mode as shown in the next figure. If there is an error, make sure that you have SharePoint objects tags in the .master page file.

Add this code to the .master file:

<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
  <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
  <SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" PrefixHtml="&lt;tr&gt;&lt;td colspan=&quot;4&quot; id=&quot;mpdmconsole&quot; " SuffixHtml="&lt;/td&gt;&lt;/tr&gt;"> </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>

Step 9: Body and Footer Area

Next, we will add Body and Footer areas to the .master file:

<tr valign="top">
  <td class="bs-client-bodyarea">
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> </asp:ContentPlaceHolder>
  </td>
</tr>
<tr height="20px">
  <td></td>
</tr>
<tr valign="top" height="20px" align="right" >
  <td><div class="bs-client-footer">Copyright Bamboo Solutions &copy; 2002 - 2008. All right reserved.</div></td>
</tr>

And the style tags in the .css file:

.bs-client-bodyarea{
    padding-left: 10px;
    padding-right: 10px;
}
.bs-client-footer{
    padding-right: 5px;
    font-family: Verdana, "Century Gothic", Arial;
    font-size: 9pt;
    font-weight: normal;
}

Lastly, we will add the <asp:ContentPlaceHolder> to the .master page file, even though these placeholders will not be used in our example:

<asp:Panel runat="server" ID="PanelMain" Visible="false">
    <asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server" visible="false"/>
    <asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
    <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" visible="false" />
    <asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server" visible="false"/>
    <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server" visible="false"/>
    <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server" visible="false"/>
</asp:Panel>
  

Save the .master and .css files, then refresh the browser. You should see the finished page display like so:

How to create a blank Master Page

The instructions in this article show you how to modify the default.master page directly. If you plan to use this KB Accelerator in a SharePoint site that has other master pages, you might want to change the name of the master page file by create a blank Master Page. To create a blank master page file, follow these steps:

1. Open SharePoint Designer, Select File > New, choose Master Page and then click OK

2. Your new Master page should look like:

3. Save your Master Page, answer Yes when you are prompted with these two dialog windows:

4. Your new Master page should now look like:

5. Insert following code to specify SharePoint import namespace and register used user control (Welcome.ascx and DesignModeConsole.ascx) in the top of master page.

<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>

6. Next, modify the property of HTML tag, add the Title code, and insert SharePoint control after it:

<HTML dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">
  
<asp:ContentPlaceHolder id= PlaceHolderAdditionalPageHead runat="server"/>
  
<SharePoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
<SharePoint:CustomJSUrl runat="server"/>
<SharePoint:SoapDiscoveryLink runat="server"/>
<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>

7. Add the link to the CSS file, for example:

8. Edit the body tag with the following properties:

   1: <BODY scroll="yes" onload="BLOCKED SCRIPTif (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="bs-client-backgroundbody">
   2: <form id="Form1" runat="server" onsubmit="return _spFormOnSubmitWrapper();">

9. Replace id="ContentPlaceHolder1" of the <asp:ContentPlaceHolder> tag in form by id=”PlaceHolderFormDigest” and insert following code to master page. Placed after by <asp:ContentPlaceHolder> tag:

   1: <input type="text" name="__spDummyText1" style="display:none;" size=1/>
   2: <input type="text" name="__spDummyText2" style="display:none;" size=1/>

You minimum master page should now looks like:

With the new blank master page, you should now be able to add the page layout as described in previous section.

Summary

This article demonstrates one method that allows you to customize a SharePoint site template by using SharePoint Designer and working directly with the Master Page and CSS files. In Part II, we will show you how to deploy the customized pages as a feature in SharePoint.

This method of customizing a SharePoint site is pretty simple, and since you are making changes to a unique Master Page and CSS, this method offers the following advantages:

You are not touching or modifying any other site that is based on the original Master Page, unless that is your intention.
Any future SharePoint upgrade will not break this site, since you are not modifying a default site template, Master Page or CSS.

But this method also has the following disadvantage:

Since you are modifying the Master Page directly, you cannot just export the site template and load it into another SharePoint Site Gallery. The .master and .css files must also be manually upload into the new site.

References

Some excellent resources on SharePoint branding are available here:

http://heathersolomon.com/blog/articles/sp2007.aspx
Understanding Web Content Management and the Default Features
Customizing the Look and Feel of Microsoft Office SharePoint Server (MOSS) 2007 - Custom Chrome / Branding
How to: Create a Minimal Master Page
Branding a SharePoint Portal Server 2003 Site: Part 1, Understanding the Use of a Corporate Brand. This is for SPS 2003, but some concepts are still valid for SP 2007.

Note: Click here to download a PDF version of this article. Click here to get a copy of the master page, images, style sheet, and a pre-built SPT site template that are used in this example.

Posted Sep 05 2008, 01:55 PM by Chau Vo

Add a Comment

Please sign into Bamboo Nation to leave a comment.

About Chau Vo

Chau is the Team Lead for the SharePoint Customization group. Her team are responsibled for the design, develop and customization of SharePoint sites, both internal and external projects. She works at Bamboo's Vietnam office in HCM City.