You are on page 1of 77

Creating Site Definitions for Windows SharePoint Services

Patrick Tisseghem
U2U
March 2006
Applies to:
Microsoft Windows SharePoint Services (version 2)
Summary: Learn how to create a custom site definition for Microsoft Windows SharePoint
Services sites. This article provides an understanding of how Windows SharePoint Services V2
site definitions work internally and how the Collaborative Application Markup Language
(CAML) defines the structure of lists and views. (18 printed pages)
Contents
Introduction to Creating Site Definitions
Creating the Seminar Site Definition
Creating the List Definition
Summary
Additional Resources
About the Author
Introduction to Creating Site Definitions
This article discusses how to create a custom site definition for Microsoft Windows SharePoint
Services (version 2) team sites. The goal is to provide you with a good understanding of how
Windows SharePoint Services V2 site definitions work internally and how the Collaborative
Application Markup Language (CAML) defines the structure of lists and views.
You can follow along with this article as I walk you through a step-by-step example of creating a
simple custom site definition for storing and delivering information associated with a training
seminar. My goal is to keep the instructions simple but educative so that you can relate
everything I discuss to your own types of team sites.
Creating the Seminar Site Definition
Several MSDN white papers (listed at the end of this article) discuss how to create your own
custom site definition by making a copy of an existing default site definition supplied by
Microsoft. A good one to use is the SharePoint team site definition, physically represented by the
STS folder found at drive:\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\1033 on the server that is running Windows SharePoint Services.
Your copy of that site definition has the same functionality and look and feel as the default
SharePoint team site. You can modify this site definition to customize it. Before your custom site
definition becomes active, you must create a copy of the Webtemp.xml file and modify its
content. After you perform an iisreset command, your site definition becomes visible in the
template picker page. Find more information and step-by-step guides in the additional resources
listed at the end of this article.
The site definition I show you how to create is very simple and has limited features. The goal of
the article is to give you insight into how the different components that compose a site definition
interact with each other and what CAML elements you need to understand to create more-
complex site definitions. A copy of the complete STS default site definition is too much to
accomplish in the space allowed for this article. I therefore create the necessary site definition
infrastructure manually. I do copy some files, though, just to simplify the work.
The Minimal Site Definition Infrastructure
Site definitions are collections of physical files located in drive:\Program Files\Common
Files\Microsoft Shared\web server extensions\60\TEMPLATE and in language-specific folders
(such as 1033 for English-US) under it. You perform the initial work for the custom site
definition in this folder.
Follow these steps to create the initial minimal site definition infrastructure. I expand the various
components step-by-step later in the article.
1. Create a new subfolder named SEMINAR under drive:\Program Files\Common
Files\Microsoft Shared\web server extensions\60\TEMPLATE\1033. The name of the
folder must use all uppercase letters.
2. Every team site has a home page typically represented by a physical file named
default.aspx. The default.aspx page from the STS folder is a good candidate to start with.
You customize it later for this project. So copy this default.aspx into your own
SEMINAR folder.
3. Also copy the XML subfolder from the STS folder. In it are three important XML files
that Windows SharePoint Services uses to get your site up and running.
1. Onet.xml provides Windows SharePoint Services with information about the
navigation, lists, and document libraries that users can create; the templates for
the document libraries; the base list types, and the possible site configurations.
2. Stdview.xml is the configuration file containing the definition of the standard
views upon which you can base your own custom views.
3. Vwstyles.xml defines the various styles for creating new views.
4. To conclude, create a second subfolder named LISTS and copy the subfolders
CUSTLIST and WPLIB from the LISTS folder in the STS site definition folder.
Figure 1 shows the initial framework of the site definition.
Figure 1. Initial site definition framework
Modifying the Onet.xml file
The first file to examine in closer detail is Onet.xml. It is an extremely important file within your
site definition. Figure 2 summarizes the six major sections within Onet.xml. The Project element
encapsulates all of them; I simply modify the Title attribute of this element to store the title of
the custom site definition.
<Project Title="Seminar SharePoint Site" ListDir="Lists"
xmlns:ows="Microsoft SharePoint">
Figure 2. Components of the Onet.xml file
Let's look at each section more closely.
• The NavBars element defines the navigation infrastructure on the pages that compose the
team site. The seminar site requires minimal navigation: a link to the home page, the
agenda of the sessions, the speakers page, and the document library where the
presentations and samples for download will be stored.
The Quick Launch navigation elements are not used for this example. So you can remove
the definition of it in the Onet.xml file. The only navigation bar we need (represented by
the NavBar element) is the horizontal one at the top of the page.
• Three NavBarLink elements define the hyperlinks. You provide the NavBarLink
element with a name and the URL for the page to display.
• <NavBars>
• <NavBar Name="SharePoint Top Navbar"
• Separator="&amp;nbsp;&amp;nbsp;&amp;nbsp;"
• Body="&lt;a ID='onettopnavbar#LABEL_ID#'
• href='#URL#' accesskey='J'&gt;#LABEL#&lt;/a&gt;" ID="1002">
• <NavBarLink Name="Agenda Sessions"
• Url="Lists/Sessions/Agenda.aspx">
• </NavBarLink>
• <NavBarLink Name="Speakers"
• Url="Lists/Speakers/AllItems.aspx">
• </NavBarLink>
• <NavBarLink Name="Downloads"
• Url="Lists/Downloads/AllItems.aspx">
• </NavBarLink>
• </NavBar>
</NavBars>
• The next block, the ListTemplates, defines all the lists and libraries you make available
for your site definition. In the example, you create two custom lists (one to store session
information and one for the speaker information) and one custom document library (to
store the downloadable files). For now, remove all except the custom list, the document
library, and the internal lists (the galleries for the Web Parts and templates) necessary for
a top-level team site.
• <ListTemplates>
• <ListTemplate Name="custlist" DisplayName="Custom List" ...
• <ListTemplate Name="doclib" DisplayName="Document Library" ...
• <ListTemplate Name="webtemp" DisplayName="Site Template Gallery" ...
• <ListTemplate Name="wplib" DisplayName="Web Part Gallery" ...
• <ListTemplate Name="datasrcs" DisplayName="DataSources" ...
• <ListTemplate Name="listtemp" DisplayName="List Template Gallery" ...
</ListTemplates>
• The DocumentTemplates, as you might expect, define the templates for the document
libraries. For this example, delete everything except the minimum that the site requires.
Keep only the definition for the document library that uses no templates.
• <DocumentTemplates>
• <DocumentTemplate Name="" DisplayName="None" Type="100"
• Default="FALSE"
• Description="This document library will not use templates.">
• </DocumentTemplate>
</DocumentTemplates>
• The BaseTypes block defines the five different types of lists with which users can work
on team sites. Do not change anything in this block; simply leave it as it is. Every
BaseType definition includes the various field types and the ways they are rendered in
the various modes (edit, new, and view mode).
• <BaseTypes>
• <BaseType Title="Generic List"
• Image="_layouts/images/itgen.gif" Type="0">
• ...
• </BaseType>
• <BaseType Title="Document Library"
• Image="_layouts/images/itdl.gif" Type="1">
</BaseType>
• A site definition can have multiple configurations, each represented by the
Configuration element. Examine the default STS site definition. You can see that the
blank team site and the default team site already contain some instances of lists and Web
Parts added to the home page. The seminar site definition has only one configuration. The
internal lists will be created, and on the home page you will have an empty Content
Editor Web Part that can be used by the administrator to provide a description of the
seminar. An image Web Part shows a default image. In the configuration section, you
point to the module where the Web Parts to be added will be defined.
• <Configurations>
• <Configuration ID="0" Name="Default">
• <Lists>
• <List Title="Site Template Gallery" Type="111"
• Url="_catalogs/wt" RootWebOnly="TRUE" />
• <List Title="Web Part Gallery" Type="113"
• Url="_catalogs/wp" RootWebOnly="TRUE" />
• <List Title="List Template Gallery" Type="114"
• Url="_catalogs/lt" RootWebOnly="TRUE" />
• </Lists>
• <Modules>
• <Module Name="Default"/>
• <Module Name="WebPartPopulation"/>
• </Modules>
• </Configuration>
</Configurations>
• The Modules section is the last one to consider. Within the Configuration element, I
defined a link to two modules: Default and WebPartPopulation. The first one defines
what needs to be dropped at the start on the home page and the second one fills the
internal Web Part gallery with the two Web Parts users can drop on the Web Part Pages.
The Web Parts placed on default.aspx are defined by the AllUsersWebPart element.
• <Modules>
• <Module Name="Default" Url="" Path="">
• <File Url="default.aspx" NavBarHome="True">
• <AllUsersWebPart WebPartZoneID="Left" WebPartOrder="1">
• <![CDATA[
• <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">
• <Assembly>Microsoft.SharePoint, Version=11.0.0.0,
• Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
• <TypeName>Microsoft.SharePoint.WebPartPages.
• ContentEditorWebPart</TypeName>
• <Title>Welcome to the conference site</Title>
• </WebPart>
• ]]>
• </AllUsersWebPart>
• <AllUsersWebPart WebPartZoneID="Right" WebPartOrder="1">
• <![CDATA[
• <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2"
• xmlns:iwp="http://schemas.microsoft.com/WebPart/v2/Image">
• <Assembly>Microsoft.SharePoint, Version=11.0.0.0,
• Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
• <TypeName>Microsoft.SharePoint.WebPartPages.
• ImageWebPart</TypeName>
• <FrameType>None</FrameType>
• <Title>Site Image</Title>
• <iwp:ImageLink>/_layouts/images/homepage.gif
• </iwp:ImageLink>
• </WebPart>
• ]]>
• </AllUsersWebPart>
• <NavBarPage Name="Home" ID="1002" Position="Start">
• </NavBarPage>
• </File>
• </Module>
• <Module Name="WebPartPopulation" List="113" Url="_catalogs/wp"
• Path="lists\wplib\dwp" RootWebOnly="TRUE">
• <File Url="MSContentEditor.dwp" Type="GhostableInLibrary"/>
• <File Url="MSImage.dwp" Type="GhostableInLibrary"/>
• </Module>
</Modules>
For now, that is everything you change in Onet.xml. Later we return to it to define the custom
speaker list.
Making Changes to the Home Page
The home page (physically represented by default.aspx in your site definition folder) is a normal
ASP.NET page filled with controls that are specific to Windows SharePoint Services and
Microsoft FrontPage components. Figure 3 depicts the elements that compose the home page.

Figure 3. The typical components of a SharePoint home page


• The two navigation bars (the horizontal navigation bar and the Quick Launch) are defined
within Onet.xml and rendered by a combination of a FrontPage component and a
navigation server control specific to Windows SharePoint Services. Based on the ID
value of NavBar or NavBarLink, the navigation bars are rendered appropriately.
• <td class="ms-banner" width="99%" nowrap ID="HBN100" valign="middle">
• <!--webbot bot="Navigation"
• S-Type="sequence"
• S-Orientation="horizontal"
• S-Rendering="html"
• S-Btn-Nml="<a ID='onettopnavbar#LABEL_ID#' href='#URL#'
• accesskey='J'>#LABEL#</a>"
• S-Btn-Sel="<a ID='onettopnavbar#LABEL_ID#' href='#URL#'
• accesskey='J'>#LABEL#</a>"
• S-Btn-Sep="&amp;nbsp;&amp;nbsp;&amp;nbsp;"
• B-Include-Home="FALSE"
• B-Include-Up="FALSE"
• S-Btn-Nobr="FALSE"
• U-Page="sid:1002"
• S-Target startspan -->
• <SharePoint:Navigation LinkBarId="1002" runat="server"/>
• <!--webbot bot="Navigation" endspan -->
</td>
• Dynamic information is rendered on the page using ASP.NET server controls that are
specific to Windows SharePoint Services.
○ Microsoft.SharePoint.WebControls.ProjectProperty renders the title and the
description of the team site.
○ Microsoft.SharePoint.WebControls.ViewSearchForm renders the search box.
○ Microsoft.SharePoint.WebControls.PortalConnection renders the link to the
parent site, which can be either a portal or a team site.
○ Microsoft.SharePoint.WebPartPages.AuthenticationButton renders a possible
Sign In button when anonymous access is allowed.
○ Microsoft.SharePoint.WebPartPages.SettingsLink renders the Modify Shared
Page link for accessing the Web Part galleries and other settings.
• In the Onet.xml file, the Configuration and the Module elements define the content of
the page at the start. In the Quick Launch, you see a number of lists and libraries already
available; on the page itself you find some Web Parts already presented. Containers for
these Web Parts in default.aspx are provided through the
Microsoft.SharePoint.WebPartPages.WebPartZone server control.
• You can make many kinds of modifications to this default.aspx page by opening it in
Microsoft Visual Studio .NET. For your site definition, I told you to remove the part that
defines the Quick Launch area because the NavBarLink elements have been deleted
from Onet.xml. In the source, look for the navigation comment and remove everything
until just before the contents comment.
Activating the Site Definition
The new custom site definition you created is not yet active. Windows SharePoint Services does
not yet know that a new site definition is available for users. A number of XML files whose
names begin with the Webtemp prefix are loaded by Windows SharePoint Services when it
starts. These XML files provide Windows SharePoint Services with the list of default and
custom site definitions for the users who are creating new sites. The Webtemp file must be
created within the drive:\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\1033\XML folder. I recommend that you begin with a copy of the
default Webtemp.xml file and rename it to Webtempseminar.xml.
After opening the file in your XML editor, you modify it as follows:
<?xml version="1.0" encoding="utf-8" ?>
<!-- _lcid="1033" _version="11.0.5510" _dal="1" -->
<!-- _LocalBinding -->
<Templates xmlns:ows="Microsoft SharePoint">
<Template Name="SEMINAR" ID="10100">
<Configuration ID="0" Title="Seminar Site" Hidden="FALSE"
ImageUrl="/_layouts/images/stsprev.png"
Description="This template can be used to create a seminar site.">
</Configuration>
</Template>
</Templates>
The name of the template must match the name of the folder in which you store the site
definition. Every site definition needs a unique identifier on your computer. The site definition
allows for one configuration as you have defined it in Onet.xml.
You can test this by first restarting Internet Information Services (use the command iisreset from
your command line) and then creating a new team site based on your custom site definition.
Figure 4 displays the TemplatePicker page with the new site definition template.

Figure 4. TemplatePicker displaying the Seminar Site definition you created


Figure 5 shows the resulting team site.
Figure 5. A new Seminar Site based on the custom site definition
Creating the List Definition
Now that you have your site definition infrastructure up and running, you can add more to it.
You must make two lists available: One list stores the details of the speakers, and a second list
stores the details of the sessions. This section shows you how to define the speakers list
definition in CAML.
The Speakers List
The speakers list is a small custom list with the following custom fields:
• First Name (single line of text)
• Last Name (single line of text)
• E-mail (single line of text)
• Bio (multiple lines of text)
To define this list as part of the site definition, you must complete a few steps. Note that the Title
field (an internal field you cannot remove) remains a column of the list and contains the full
name of the speaker.
Copying the CUSTLIST
To start, you need to create a copy of the CUSTLIST folder. You can take the one that is already
available in your site definition folder. Rename the CUSTLIST folder to SPEAKERS.
The folder contains four ASP.NET pages and one XML file:
• AllItems.aspx
• DispForm.aspx
• EditForm.aspx
• NewForm.aspx
• Schema.xml
Initial Modifications to Schema.xml
Modify Schema.xml slightly so that you can later determine whether the list appears on sites that
are based on the site definition. Open the Schema.xml file in your favorite XML editor.
• The root element is the List element. Here you must change the Name, Title, and URL
attribute values.
• <List xmlns:ows="Microsoft SharePoint" Name="Speakers"
• Title="Speaker List" Direction="0"
Url="Lists/Speakers" BaseType="0" >
• Windows SharePoint Services requires you to have a DefaultDescription element for a
custom list. This element needs to be created as a child element of the MetaData
element.
• <DefaultDescription>List for storing information regarding the
speakers.</DefaultDescription>
Activating the Speakers List
You must return to the Onet.xml file associated with the seminar site definition to activate the
speakers list. In it, you register the new list within the ListTemplates section.
<ListTemplate Name="speakers" DisplayName="Speakers List" Type="500"
BaseType="0" OnQuickLaunch="TRUE" SecurityBits="11"
Description="Create a list to store speaker information for the seminar."
Image="/_layouts/images/itgen.gif"></ListTemplate>
The list template must have a type number. The guideline here is to use a type number less than
1000.
You create one instance of this list during the creation process of the team site. A
ListViewWebPart displaying the All Items view (that is, the default one in the custom list
template) should be inserted on the home page.
For this, you need to edit the Configuration element within Onet.xml and add a List element as
a child element to indicate that you want to create the instance.
<List Title="Speakers" Type="500" />
Next, in the Module element named "default," create another List element as a child element
under the File element that represents default.aspx. You add the ListViewWebPart directly under
the content editor Web Part you already have in the left Web Part zone. To indicate the order
within the Web Part zone, use the WebPartOrder attribute.
<View List="500" BaseViewID="0" WebPartZoneID="Left" WebPartOrder="2"/>
Testing the Changes
After you make all the changes, you can test the modified site definition again by first restarting
IIS (iisreset) and then creating a new team site based on the seminar site definition, as displayed
in Figure 6.
Figure 6. Seminar site with the speakers list
The Schema.xml File
Now take a closer look at Schema.xml. This important file contains the CAML elements that
express the definition of the list. Like the Onet.xml file discussed earlier, Schema.xml comprises
several XML sections. (See Figure 7.)

Figure 7. Components of the Schema.xml file


Open the Schema.xml file in your favorite XML editor because you must make a couple of
changes.
• The Fields section defines the fields that are included in the list inherited from the base
type list (that is, the custom list). The definitions of these base type fields are done in
Onet.xml under the BaseType element.
• The speakers list has a few additional fields, each defined by a Field element. Most are
simple text fields. For entering the bio information, define the field type Note so that the
user can enter multiple lines of text. All the fields have the attribute Sealed set to True to
disallow a user from removing them as columns from the list.
• <Fields>
• <Field Type="Text" Name="FirstName" DisplayName="First Name"
• Required="TRUE" Sealed="TRUE" />
• <Field Type="Text" Name="LastName" DisplayName="Last Name"
• Required="TRUE" Sealed="TRUE" />
• <Field Type="Note" Name="Bio" DisplayName="Bio" Sealed="TRUE" />
• <Field Type="Text" Name="Email" DisplayName="Email" Sealed="TRUE" />
</Fields>
• The Views section contains the definitions of the different views that are immediately
available when an instance of this list is created. The custom list has only two views: the
default view displayed within the ListViewWebPart on the home page, and the All Items
view. For now, simply ensure that the fields created in the previous step are displayed in
both views. Later you create a complete new view. The ViewFields child element, one of
the last child elements of the View element, defines the list of fields to be included in the
view. Add a FieldRef element for each of them. Remove the two FieldRef elements that
are already there. Repeat this for both of the views.
• <ViewFields>
• <FieldRef Name="FirstName"></FieldRef>
• <FieldRef Name="LastName"></FieldRef>
• <FieldRef Name="Email"></FieldRef>
• <FieldRef Name="Bio"></FieldRef>
</ViewFields>
• The Forms section allows you to customize for each type of operation on the list
(displaying, editing, or creating items) the dynamic part of the physical forms page. Use
it, for example, to define additional actions or to add additional Web Parts to the pages.
• The last section is the ToolBar section, which defines the actions displayed by hyperlinks
in the Quick Launch. Examples are the Alert Me action and Modify Settings and
Columns action. Again, you can add additional actions here.
After executing an iisreset command and creating a new team site based on your custom site
definition, you have a list populated with the new fields, as shown in Figure 8.
Figure 8. Speakers list with custom fields
Creating a Custom View
The last topic I discuss in this article describes the steps to create a custom view using
Schema.xml and CAML. Schema.xml contains one or more View elements, and each element
defines one view. Every View element has at least six important sections:
• ViewHeader
• ViewBody
• ViewFooter
• ViewEmpty
• Query
• ViewFields
Remember that the goal of this article is to provide you with the basic techniques so that you
build your own, more-powerful solutions. The example view basically displays the information
of a speaker in the manner of a data list.
So how do you start? The bulk of your work occurs in Schema.xml. You currently have two
views defined. You can create the third one directly under the second view. Views are defined by
the View element. A number of attributes are important for the View element:
• Name is required; it defines the internal name for the view.
• DisplayName is the name of the view as the user sees it.
• BaseViewID is an identifier for the custom view.
• Url is the path to the ASP.NET page that is responsible for the rendering of the view. For
this example, you make a copy of AllItems.aspx, already present in the SPEAKERS
folder, and rename it to speakerssummary.aspx. Think of a scenario in which you start
modifying this page to accommodate the view in a specific manner. This example will
have the normal Windows SharePoint Services appearance.
• In the ASP.NET page, Windows SharePoint Services fills the WebPartZone specified by
WebPartZoneID.
The next elements to consider are ViewHeader, ViewBody, and ViewFooter. For now, keep it
simple and provide only the infrastructure for the table to be generated. More details follow later.
Notice that the insertion of HTML always needs to be enclosed in a CDATA element so that
your XML is well-formed.
Initially, when you create a new team site based on the site definition, the list is empty. You can
use the ViewEmpty part of the View to define what the user will see. For now, leave ViewBody
empty.
You can also define a CAML query for sorting and possibly filtering the items displayed in the
view. The definition of the list of fields included within the view is defined within the
ViewFields element.
<View Name="SpeakersSummary" DisplayName="Speakers Summary" BaseViewID="2"
WebPartZoneID="Main" Url="SpeakersSummary.aspx">
<ViewHeader>
<HTML>
<![CDATA[ <table cellpadding="0" cellspacing="1"
border="0" width="100%" class="ms-nav">
<tr><td><b>Speakers Summary View</b></td></tr>]]>
</HTML>
</ViewHeader>
<ViewBody></ViewBody>
<ViewFooter><HTML><![CDATA[ </table> ]]></HTML></ViewFooter>
<Query></Query>
<ViewFields>
<FieldRef Name="LinkTitle"></FieldRef>
<FieldRef Name="FirstName"></FieldRef>
<FieldRef Name="LastName"></FieldRef>
<FieldRef Name="Bio"></FieldRef>
<FieldRef Name="Email"></FieldRef>
</ViewFields>
</View>
It is time to test these changes. A new site based on your custom site definition now has a new
view for the speakers list. It first displays the contents of the ViewEmpty elements and, after the
insertion of a new speaker, the contents of ViewHeader, ViewBody, and ViewFooter.
You can finalize the view now by defining the contents of the ViewBody element.
<ViewBody>
<HTML><![CDATA[ <tr><td> ]]></HTML>
<Field Name="LinkTitle"/>
<HTML><![CDATA[ </td></tr> ]]></HTML>
<HTML><![CDATA[ <tr><td><i> ]]></HTML>
<Field Name="Bio"/>
<HTML><![CDATA[ </i></td></tr> ]]></HTML>
<HTML><![CDATA[ <tr><td> ]]></HTML>
<Field Name="Email"/>
<HTML><![CDATA[ </td></tr> ]]></HTML>
</ViewBody>
While testing this change, notice that a JavaScript error occurs if you move your mouse pointer
over the LinkTitle field. This is due to the fact that the default rendering of the LinkTitle field
(as defined in Onet.xml) requires some client-side scripting code to be available. You haven't yet
taken care of this. To fix this problem, insert the following block in the ViewHeader section.
You can simply copy the block from the second view within your Schema.xml.
<HTML><![CDATA[<SCRIPT>ctx = new ContextInfo();ctx.listBaseType =
]]></HTML>
<ListProperty Select="BaseType"/>
<HTML><![CDATA[;ctx.listTemplate = ]]></HTML>
<ListProperty Select="ServerTemplate"/>
<HTML><![CDATA[;ctx.listName =]]></HTML>
<ScriptQuote><List/></ScriptQuote>
<HTML><![CDATA[;ctx.listUrlDir = ]]></HTML>
<ScriptQuote><ListUrlDir WebRel="TRUE"/></ScriptQuote>
<HTML><![CDATA[;ctx.HttpPath = ]]></HTML>
<ScriptQuote><HttpPath/></ScriptQuote>
<HTML><![CDATA[;ctx.HttpRoot = ]]></HTML>
<ScriptQuote><HttpVDir/></ScriptQuote>
<HTML><![CDATA[;ctx.imagesPath = ]]></HTML>
<ScriptQuote>/_layouts/images/</ScriptQuote>
<HTML><![CDATA[;ctx.PortalUrl = ]]></HTML>
<ScriptQuote><ProjectProperty Select="PortalUrl"/></ScriptQuote>
<HTML><![CDATA[;if (ctx.PortalUrl == "") ctx.PortalUrl =
null;ctx.displayFormUrl = ]]></HTML>
<ScriptQuote><URL Cmd="DISPLAY" NoID="TRUE"/></ScriptQuote>
<HTML><![CDATA[;ctx.editFormUrl = ]]></HTML>
<ScriptQuote><URL Cmd="EDIT" NoID="TRUE"/></ScriptQuote>
<HTML><![CDATA[;ctx.isWebEditorPreview = ]]></HTML>
<Switch>
<Expr>
<GetVar Name="WebEditorPreview"/>
</Expr>
<Case Value="TRUE">1</Case>
<Default>0</Default>
</Switch>
<HTML><![CDATA[;ctx.ctxId = ]]></HTML>
<Counter Type="View"/>
<HTML><![CDATA[;]]></HTML>
<Switch>
<Expr><ListProperty Select="ModeratedList"/></Expr>
<Case Value="0"/>
<Default>ctx.isModerated = true;</Default>
</Switch>
<Switch>
<Expr><GetVar Name="RecursiveView"/></Expr>
<Case Value="1">ctx.recursiveView = true;</Case>
<Default/>
</Switch>
<HTML><![CDATA[ ctx]]></HTML>
<Counter Type="View"/>
<HTML><![CDATA[ = ctx;</SCRIPT>]]></HTML>
The block of code is responsible for providing context information to the JavaScript functions
that provide the actions to be performed on the list item (such as viewing and editing the
properties). Figure 9 shows the final outcome of the custom view.

Figure 9. The custom view for the speakers list


Summary
In this article, you learned the basic steps required to create the infrastructure for a site definition
and the CAML elements needed to create a custom list definition and a custom view. I hope that
the material covered here has helped you better understand the various components that compose
a site definition. Please contact me (Patrick@u2u.be) if you have any remarks or questions
regarding the content.
Additional Resources
• Adding a Custom View Style to Windows SharePoint Services
• Branding a SharePoint Portal Server 2003 Site: Part 1, Understanding the Use of a
Corporate Brand
• Branding a SharePoint Portal Server 2003 Site: Part 2, How to Apply Your Own
Corporate Brand
• Customizing List Item Forms in Windows SharePoint Services
• Customizing SharePoint Sites and Portals: Part 1
• Customizing SharePoint Sites and Portals: Using Templates and Site Definitions, Part 2
• Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3
About the Author
Patrick Tisseghem is managing partner at U2U, a Microsoft .NET training services company
based in Brussels. His main areas of expertise are the .NET Framework and all the products and
technologies that relate to the information worker. In this role he is evangelizing SharePoint
Portal Server 2003 and Office development for Microsoft EMEA.
This article was developed in partnership with A23 Consulting.
Customizing SharePoint Sites and Portals: Part 1

Dino Dato-on
Jinger Zhao
Microsoft Corporation
May 2004
Applies to:
Microsoft® Windows® SharePoint™ Services
Microsoft Office SharePoint Portal Server 2003
Microsoft Office FrontPage® 2003
Summary: The first of three companion articles. Learn ways you can customize a SharePoint
site and an area; manage users, sites, and templates; change the structure of pages in a site;
manage user access; and optimize style sheets. Then go on in Customizing SharePoint Sites and
Portals: Using Templates and Site Definitions, Part 2 to create and edit a site using templates and
site definitions. Finally, see Customizing SharePoint Sites and Portals: Style Sheet Class
Reference Tables, Part 3. (14 printed pages)
Contents
Introduction
Customizing a Portal
SharePoint Sites vs. Portal Areas
Customizing a SharePoint Site
Using FrontPage to Change Site Appearance
Conclusion
Introduction
Microsoft® SharePoint™ Products and Technologies consists of Microsoft Office SharePoint
Portal Server 2003 and Microsoft Windows® SharePoint Services. SharePoint Products and
Technologies use Microsoft Windows Server™ 2003 and the .NET Framework. This latest
version offers improvements in the customization, development, and deployment of an enterprise
portal and team collaboration infrastructure.
Customization is the ability to change the layout, view, content, and site structure for a group of
users such as a department or corporation. To help ensure consistency, Windows SharePoint
Services and SharePoint Portal Server 2003 enable only Web Designers and Site Administrators
full customization privileges for managing the look and feel of a site.
SharePoint Portal Server enables you to create Web portals that aggregate information from
various sources into one convenient page. Team members and users can reach important business
information, documents, and applications from one central access point.
The portal architecture and Web Part components determine how a site appears and manage all
browser functions. Each portal site consists of reusable and customizable Web Parts that
determine how information is presented. Administrators and site owners can use these
components to customize how a Web portal looks and functions. You can modify existing Web
Parts or create your own to achieve a unique look for your organization's site.
An individual user can also import Web Parts from a catalog or from Microsoft Office System
applications to create his or her own personal portal view that organizes and presents only the
information he or she wants.
Customizing a Portal
You can customize the portal to offer individual users a unique view based on their specific
interests. You can push dynamic information to certain users that meet a particular set of
credentials, are part of a group membership, have specific interests, or are in a particular job
category.
The Portal Structure and How it Works
Windows SharePoint Services and SharePoint Portal Server 2003 support the portal structure.
Windows SharePoint Services connects the Windows SharePoint Services components used to
create individual SharePoint sites, and SharePoint Portal Server 2003 combines the Windows
SharePoint Services-based sites into one convenient package.
The portal uses a front-end Microsoft Internet Information Services (IIS) Web server to store
style sheets, templates and associated scripts, executable files, and dynamic-link libraries (DLLs)
with an ISAPI filter. A Microsoft SQL Server™ database stores metadata for the content used to
populate the panes in the templates. User customization and authorization information is also
stored in the SQL Server database.

Figure 1. The portal structure


When a new portal is created, three databases are created to associate URLs with templates,
templates with components and content, and pages with style sheets, and to store other metadata
about the portal's pages.
Web pages are compiled into DLLs that are stored on the front-end server. When a page is
requested from a client, the front-end server generates an SQL query to retrieve the metadata
associated with the requested page. The front-end server combines the page with the metadata
and delivers the combination to the client.
SharePoint Sites vs. Portal Areas
When planning for corporate environments such as an intranet portal or SharePoint site, you
need to consider some of the differences between a Windows SharePoint Services site and a
SharePoint Portal Server portal area. An area is a means of publishing and aggregating content
using a navigational taxonomy, whereas a SharePoint site facilitates collaboration of team
members using collaboration objects and custom lists. Users have unlimited view and editing
access to the portal areas; by contrast, SharePoint sites are only available to members. Individual
users can personalize a portal area in more ways than a SharePoint site.
Moreover, areas are based on the Windows SharePoint Services framework and offer a set of
unique templates. You can determine whether to use a portal area, or a SharePoint site by
deciding first what you intend to do with the site. In general, use areas and portals for
information publishing, and SharePoint sites for online collaboration.
Create SharePoint sites when you want to collaborate across projects in the following ways:
• Sharing and retaining versions of documents
• Scheduling
• Delegating and sharing tasks
• Handling presence and messaging
• Sharing and targeting information
• Managing meetings
Create areas when you want to publish information such as the following:
• Aggregated listings
• Target audiences
• Content for publishing
• Document postings
• Navigational taxonomy
• User profiles
• Lists
• News
• Managed spaces for users or subject-matter experts
• Areas of subject expertise
• Community interests
• Subsites for a categorized set of documents
With the union of SharePoint Portal Server and Windows SharePoint Services, you can integrate
SharePoint sites and areas to create custom environments that target a particular interest group.
For example, you can publish related content created from collaborative projects on several
SharePoint sites to an area, encouraging information sharing and easy access to relevant
information.
Customizing a SharePoint Site
SharePoint sites are designed to be flexible. You can tailor a site to fit your users' needs by
adding or removing pages, changing the appearance of pages, changing the site navigation, and
making other customizations.
To customize SharePoint sites, you must have the following rights, which are included in the
Web Designer and Administrator site groups:Manage Lists
• Add and Customize Pages
• Apply Themes and Borders
• Apply Style Sheets
Other users of your site cannot gain access to the pages required to perform these tasks unless
you specifically assign them to a site group that contains these permissions.
Customizing Web Sites From Within the Browser
You can perform basic customization from within the browser, using links from the Home,
Create, and Site Settings pages of the Web site. From the browser you can perform basic
customizations such as the following:
• Add a list
• Change the layout of the home page
• Change the picture on the home page
• Add a Web Part to a Web Part Page
• Change a site's display name (not the URL)
• Apply a theme
For more information about customizing Web sites from within the browser, see the Microsoft
Windows SharePoint Services Help.
Customizing Web Sites by Using Web Page Editing Tools
Using a SharePoint–compatible Web page editor, such as Microsoft Office FrontPage® 2003,
you can perform additional customizations such as the following:
• Add borders to pages
• Insert graphics
• Add components to the home page
• Change the navigation of a site
For example, if you create a custom theme for a SharePoint site in FrontPage 2003, and add the
theme name to the list of themes in FrontPage 2003, you can edit the list of available themes in
Windows SharePoint Services to include your new theme. An XML template called
spthemes.xml contains the theme name, style sheet location, thumbnail, preview, and description
of each theme that is available through the browser. You use this XML file to render the theme
selection page. You can modify this XML file (by opening it in any text editor, such as Notepad)
to include a custom theme on the Apply Theme to Web page. For more information about
creating a theme and adding it to the list of themes in FrontPage 2003, see the Microsoft Office
FrontPage 2003 Help.
Note To edit the spthemes.xml file, you must be a member of the local administrators group for
the server.
To add a custom theme to the list of available themes in Windows SharePoint Services
1. On the top link bar, click Site Settings.
2. In the Manage This Web section, click Apply theme to site.
3. In the browser's Address bar on the browser, replace the file name themeweb.aspx with
spthemes.xml. For example, if the Address bar showed
http://server_name/_layouts/1033/themeweb.aspx, you would change the path to
http://server_name/_layouts/1033/spthemes.xml.
4. Edit the XML file and add a new section for your custom theme, similar to the following:
5. <Templates>
6. <TemplateID>newtemplateid</TemplateID>
7. <DisplayName>NewTemplateDisplayName</DisplayName>
8. <Description>Description</Description>
9. <Thumbnail>../images/image.png</Thumbnail>
10. <Preview>../images/image.gif</Preview>
11. </Templates>
For more information about customizing Web site elements in a Windows SharePoint Services–
compatible Web page editor, see the Help system for the Web page editor you are using.
Customizing SharePoint Sites by Using Site Administration Pages
If you are an Administrator, you can customize how SharePoint sites work by performing tasks
such as the following:
• Changing settings, such as regional settings
• Adding, removing, or modifying site groups
• Adding or removing users, or changing their site group membership
You control these features by using the Site Administration pages. Only an Administrator of the
site can perform these types of customizations, or users who are members of a site group that
contains administrative rights, such as the Manage Site Groups right.
Using FrontPage to Change Site Appearance
With Microsoft Office FrontPage 2003, you can change the page layout and theme, customize
lists, and use your own images. You can also add pages, remove pages, and change the site
navigation to streamline and accommodate your content.
Using various Web elements, the following types of customization are simple to achieve for a
SharePoint site:
• Theme and border application
• Logo and graphic insertion
• Style sheet application
• Document library customization
Later in this article, we'll discuss some of the customization issues you'll encounter using
FrontPage.
Applying Themes
You can apply themes, and borders, to your SharePoint sites. A theme is a unified set of design
elements and color schemes that give your pages an attractive, consistent appearance.
A theme affects all aspects of the page's appearance, including the following:
• Colors. Color schemes set the color of body text, headings, hyperlinks, banner text, link
bar labels, table borders, and the page background. Choose between a normal or vivid
color set.
• Graphics. Images add interest to your page elements and are typically used for
background pictures, page banners, bullets, navigation buttons, and horizontal lines.
Choose between the normal or active graphic set. The active graphic set uses animated
page elements, such as hover buttons for your navigation bar.
• Styles. Styles are used to keep your headings and text consistent in font type, size, and
color. Each theme uses a style that best suits the color and graphics in the page; however,
a theme can be modified to suit your preference.
Themes enable you to manage the appearance of your pages in one convenient place. When you
choose a theme as the default appearance for your SharePoint site, that theme applies to all new
and existing pages. If you change the default theme or remove it, the changes are automatically
applied to the entire site. You can also apply themes to individual pages.
About FrontPage Themes
FrontPage includes many preset themes that you can use as they are or modify to suit your
preference. Some features in FrontPage are only available when you use a theme. For example,
page banners and link bar buttons are displayed as graphics when you apply a theme, but are
displayed as text when you do not apply a theme.
It's simple to start with a preset theme and modify it to create your own theme. Use custom
graphics, color sets, and styles to create the look and feel that best conveys your site's purpose.
Adding a New Theme to a SharePoint Site
You can edit the list of available themes in Windows SharePoint Services to include a new
theme. The theme name, style sheet location, thumbnail, preview, and description are available
in an XML file called spthemes.xml. This file renders the theme selection page and can be
modified to include a custom theme.
To add a custom theme to the list of available themes
1. On the top link bar, click Site Settings.
2. In the Manage This Web section, click Apply theme to site.
3. In the browser's Address bar, replace the file name themeweb.aspx with spthemes.xml.
4. Edit the XML file and add a new section for your custom theme. For example:
5. <Template>
6. <TemplateID>newtemplateid</TemplateID>
7. <DisplayName>NewTemplateDisplayName</DisplayName>
8. <Description>Description</Description>
9. <Thumbnail>../images/images.gif</Preview>
10. </Templates>
Inserting Logos and Graphics
You can replace the existing logo of the SharePoint site with another custom logo of your own.
Under Site Settings, click Change portal site properties and SharePoint site creation
settings. In Custom Portal Site Logo, you can type the location of a new graphic file containing
the custom logo.
Note You should copy the new graphic file to the _layouts relative folder on all servers in the
server farm.
You can also put the logo in different parts of the site by editing the template and hard-coding
the logo or image, or by editing the cascading style sheet (CSS) sps.css file and modifying the
ms-banner class as follows:
.ms-banner {
padding-right:12;
background-image: url(/_layouts/images/msw/mslogo.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
For example, to place the logo in the top right corner next to the My Site and Home links,
change the size of the <DIV> tags and use the logo as a background image.
In Windows SharePoint Services, you can use FrontPage to add graphics to the site, and you can
specify the location of the images by using Web Parts.
To use Web Parts to specify the location of images on the site
1. Create a picture library with the images to use on the Web site.
2. Add the images to the SharePoint document library.
3. Open the Web page to modify, and then click Modify Shared Page.
4. Click Modify Shared View.
5. Click Add Web Parts, and then click Browse.
6. Select Image Web Part and drag the Image Web Part to the page.
7. Select the new Web Part on the page. In the open tool pane, type the full address of the
image in the picture library.
Applying Style Sheets
Windows SharePoint Services uses two main cascading style sheet (CSS) files:
• ows.css is the base CSS file used by all SharePoint sites
• sps.css is a superset derived from ows.css and is used by the SharePoint Portal Server
pages.
Both files are located at C:\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\LAYOUTS\1033\STYLES.
You can create and deploy your own CSS class by writing your own CSS file like a cascading
style sheet file. Put the file in the same folder where ows.css and sps.css are located. To add a
reference to your custom style sheet for a site, click Site Settings, and then click Change portal
site and SharePoint site creating settings. In Custom Cascading Style Sheet, type the name
of your custom style sheet file.
Note Because HTML standards support multiple style sheet files, you can define your own set
of classes that are different from those in ows.css or sps.css. This also isolates your CSS classes
in a separate file so changes made to the Microsoft CSS files do not overwrite your own changes.
Customizing Document Libraries
A document library is a storage folder for a collection of files with a common set of properties or
"fields". It consists of many default fields such as Title, File Name, Modified By, File Size, and
so on that you can modify and arrange as you need. You can use FrontPage to add or change the
fields used on the page that is displayed by default.
To customize a document library
1. From FrontPage, open a site.
2. From the folder list pane in FrontPage, locate the document library icon, right-click it,
and then click Properties.
3. On the Fields tab in the Document Library Properties window, select a field and modify
its properties or create additional fields.
4. On the Settings tab, you can specify to enable versioning, to require an approval for new
items, and to hide from browsers.
Using the FrontPage DataView Web Part
With FrontPage and Windows SharePoint Services, you can retrieve information from diverse
data sources simply, without writing any custom code. You can access databases, Web services,
and XML sources from different locations, and display the data effortlessly with FrontPage. The
DataView Web Part in FrontPage is a handy component that creates a customizable view of a
data source. A data source can be a database query, an XML document, a Web service, a
SharePoint list, or server-side scripts. All the rendering to the browser is done through XSLT
transformation.
For more information on how to use the DataView Web Part in FrontPage 2003, see the MSDN
article Building XML Data-Driven Web Sites with FrontPage 2003.
Customizing Web Sites Programmatically
To perform advanced Web development customizations, you can use the Windows SharePoint
Services object model. You can:
• Add, edit, delete, and retrieve data from SharePoint lists.
• Create lists and set list metadata (such as the fields in a list).
• Work with documents in document libraries.
• Perform administrative tasks such as creating Web sites, adding users, creating roles, and
so on.
For more information about advanced customizations, see the Microsoft Windows SharePoint
Services Software Development Kit.
Customizing with Web Parts
Using the Web Part Infrastructure, you can create a custom Web Part to work with the Web site
or list. Web Parts are added to the Web Part gallery for a site collection. If you want to deploy
your custom Web Parts to multiple servers, or share them with other organizations, you can
create a Web Part Package.
Windows SharePoint Services and SharePoint Portal Server allow users to add Web Parts to Web
Part Pages in a SharePoint site. A Web Part is a modular unit of information that has a single
purpose. For example, the list of default Web Parts available with Windows SharePoint Services
includes:
• Content Web Part Displays unstructured Web content, such as text, tables, or images.
• Image Web Part Displays a picture you specify, or connects to another Web Part that
provides the picture.
• Form Web Part Displays a form you can use to enter text, and then use that text to
filter columns in a connected Web Part.
• Contacts Web Part Allows you to display the Contacts list on another Web Part Page.
For a list of all Web Parts available by default for both Windows SharePoint Services and
SharePoint Portal Server, see Customizing SharePoint Sites and Portals: Style Sheet Class
Reference Tables, Part 3.
Users can add Web Parts to Web Part Pages and share existing Web Parts with other users. Web
Parts can also be connected to each other. For example, if you connect an Image Web Part to a
data list, you can make the image change depending on which item in the data list is selected.
You can even create custom Web Parts by using the Web Part Infrastructure.
Users can include Web Parts from any of the following sources by default:
• Online Gallery. A set of Web Parts that is available over a Web service that permits
many servers to share access to a common, centrally maintained gallery of Web Parts.
The URL for this Web service is specified in the OnlineLibrary element of the
web.config file for a site. This gallery provides a way for the IT administrator to deploy
Web Parts.
• Site_Name Web Part Gallery. Contains Web Parts that are available to a particular
site. By default, when you run Stsadm.exe to install a Web Part, Stsadm.exe adds the
Web Part to the Virtual Server Gallery. This gallery provides a way for the SharePoint
Administrator to deploy Web Parts.
• Virtual Server Gallery. Lists Web Parts that are available to all sites on the server.
This gallery provides a way for a server administrator to deploy Web Parts
• Web Part Page Gallery. Contains Web Parts that are already added to the current page.
This gallery, unlike the other galleries, is generated dynamically. It contains Web Parts
that are added to the page but are closed (the IsIncluded property is false). The Web Part
is still associated with the page by an entry in the SharePoint database, which also stores
any shared or personalized property settings for the Web Part. To bring back a closed
Web Part, select it from the Web Part Page Gallery.
When a user adds a Web Part to a Web Part Page, he or she can browse any of these sources to
find a Web Part.
Customizing a Web Part
You can change the appearance of a Web Part instance on a page without using FrontPage. With
Windows SharePoint Services, you can use the Web Part Modify page to change the
appearance of a Web Part. With SharePoint Portal Server, in the Action page, click Edit Page.
You can customize a Web Part instance using these four properties:
• List Views. Assign views designed for lists or document libraries, such as Summary
View.
• Appearance. Change the title of the Web Part instance, each instance can have its own
title on a page. Modify the height and width of the Web Part instance, the frame state
(minimized or normal) and frame style.
• Layout. Hide the Web Part instance or set the alignment left-to-right or right-to-left.
Move the Web Part instance to another location by changing the zone and part order.
• Advanced. Disable the possibility of minimizing, closing and changing the zone for the
Web Part.
To add and customize the appearance of a Web Part
1. Open the Web page to modify, and then click Modify Shared Page.
2. Click Modify Shared View.
3. Click Add Web Parts, and then click Browse.
4. Select a Web Part and drag the Web Part onto the Web page.
Deploying Additional Web Parts
Windows SharePoint Services allows users to add Web Parts to Web Part Pages in a SharePoint
site.
Users can add Web Parts to Web Part Pages and can personalize or share existing Web Parts
with other users. Web Parts can also be connected to each other. For example, if you connect an
Image Web Part to a data list, you can make the image change depending on which item in the
data list is selected. You can even create custom Web Parts by using the Web Part Infrastructure.
For more information about creating a Web Part, see the Microsoft Windows SharePoint
Services Software Development Kit.
SharePoint Portal Server uses the same default Web Parts as Windows SharePoint Services, and
uses the same default Web Part galleries provided by Windows SharePoint Services: Online
Gallery, Site_Name Web Part Gallery, Virtual Server Gallery, and Web Part Page Gallery.
Managing Security and Performance Options for Web Parts and Web Part Pages
You can control whether users can connect Web Parts to each other within a site, and whether to
allow access to the Online Gallery. The Online Gallery contains many Web Parts that users can
download and install to use on their sites. Both of these actions have potential impact on your
server and site security and performance. For example, if you allow Web Part connections, and a
user connects a complex Web Part to a large data set, the Web Part Page that contains those Web
Parts could take a long time to load when a user browses to it. Also, if a user connects to a Web
Part that contains a scripting error or malicious code, it could open up a security hole in the user's
site, or, potentially, on your server.
By default, both security options are enabled at the server level. You can change these
configuration options at the virtual server level. You only need to change these options if you do
not want to allow either Web Part connections or access to the Online Gallery. If you have
multiple servers in a server farm environment, and you want to change these settings for all
virtual servers, you must configure these options for each virtual server on each server in that
server farm.
Note You must be an administrator of the local server computer, or a member of the SharePoint
Administrators group to configure security and performance options for Web Parts and Web Part
Pages.
To configure options for Web Parts and Web Part Pages
1. On your server computer, click Start, point to Administrative Tools, and then click
SharePoint Central Administration.
2. On the SharePoint Central Administration page, click Configure virtual server
settings.
3. On the Virtual Server List page, click the virtual server you want to configure.
4. On the Virtual Server Settings page, click Manage security settings for Web Part
Pages.
5. Select the options you want to enable or disable, and then click OK.
Note You can also restore default server settings to enable users to both connect Web
Parts and use the Online Gallery by clicking Restore Defaults.
If your server is behind a proxy server or firewall, you must also edit the web.config file for your
server to enable the Online Gallery. In a server farm environment, you must edit this file for
every Web front-end server in the server farm.
To allow access to the Online Gallery from behind a proxy server or firewall
1. On each of the front-end Web server computers, open the web.config file under the
following directory in Notepad or another text editor:
2. \Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\CONFIG
3. In the web.config file, add the following lines (Proxy_Server:port is the proxy server or
firewall used for your environment):
4. <system.net>
5. <defaultProxy>
6. <proxy proxyaddress="http://Proxy_Server:port" bypassonlocal = "true"/>
7. </defaultProxy>
8. </system.net>
9. Save and close the web.config file.
Managing the Web Part Gallery for a Site
The Administrators of your top-level Web site can determine which Web Parts are available to
the users of sites in their site collection. They can use the Web Part Gallery page to add or
remove Web Parts from the list of Web Parts available for use, or to upload new Web Parts.
Users may also have access to Web Parts in the Online Gallery, or in the Virtual Server Gallery.
The Web Part gallery for a site controls only a subset of all Web Parts available to users.
To make a Web Part available in the Web Part gallery
1. On a top-level Web site, click Site Settings.
2. Under Administration, click Go to Site Administration.
3. Under Site Collection Galleries, click Manage Web Part gallery.
4. On the Web Part Gallery page, click New Web Part.
5. Select the check box next to the Web Parts you want to include in the gallery, and then
click Populate Gallery.
If you have installed a Web Part Package, and need to add the Web Parts to the gallery, you can
use the Upload Web Part button to add the new Web Parts to the gallery.
To add a Web Part to the Web Part gallery
1. On the Web Part Gallery page, click Upload Web Part.
2. In the Name box, type the name of the Web Part (including the full path to the .dwp file),
or click Browse.
3. If you have several Web Parts that you want to upload at one time, click Upload
Multiple and select the Web Parts to upload.
4. In the Group box, select a group, or under Specify your own value, type a group name
for the Web Part.
5. Click Save and Close.
Conclusion
In this first part of the three-part article series, we have covered the basics of customizing
SharePoint sites and portals. In Customizing SharePoint Sites and Portals: Using Templates and
Site Definitions, Part 2, we'll go deeper and learn to customize using templates and site
definitions. For valuable style sheet class reference tables, see In Customizing SharePoint Sites
and Portals: Style Sheet Class Reference Tables, Part 3.
Additional References
Microsoft SharePoint Products and Technologies 2003 Software Development Kit (contains the
Microsoft Windows SharePoint Services SDK)
Microsoft Windows SharePoint Services Administrator's Guide
Customizing SharePoint Sites and Portals: Using Templates and Site Definitions, Part 2

Dino Dato-on
Jinger Zhao
Microsoft Corporation
May 2004
Applies to:
Microsoft® Windows® SharePoint™ Services
Microsoft Office SharePoint Portal Server 2003
Microsoft Office FrontPage® 2003
Summary: The second of three companion articles. In Customizing SharePoint Sites and Portals,
Part 1, you learned ways to customize a SharePoint site and an area; manage users, sites, and
templates; change the structure of pages in a site; manage user access; and optimize style sheets.
In this article, we provide more details by creating and editing a site using templates and site
definitions. Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part
3, provides valuable style sheet class reference tables. (20 printed pages)
Contents
Introduction
Creating Custom Templates
Creating Site Definitions
Using Site Configurations
Using Modules
Field Definitions Using SCHEMA.XML
Customizing Portal Areas Using Templates
Guidelines for Using Templates and Site Definitions
Conclusion
Introduction
Microsoft® SharePoint™ Products and Technologies consists of Microsoft Office SharePoint
Portal Server 2003 and Microsoft Windows® SharePoint Services. SharePoint Products and
Technologies use Microsoft Windows Server™ 2003 and the .NET Framework. This latest
version offers improvements in the customization, development, and deployment of an enterprise
portal and team collaboration infrastructure.
Customization is the ability to change the layout, view, content, and site structure for a group of
users such as a department or corporation. To help ensure consistency, Windows SharePoint
Services and SharePoint Portal Server 2003 enable only Web Designers and Site Administrators
full customization privileges for managing the look and feel of a site.
Templates and Site Definitions
There are two ways you can customize SharePoint sites. You can use custom templates or create
site definitions. Custom templates enable you to customize a site by using the user interface (UI).
For example, you can derive a custom list from an existing list, or create a custom list to use as a
list template that Site Administrators can choose from a list of available list templates. Windows
SharePoint Services stores all custom templates in the content database. You can customize list
and site templates from Top-level Site Administration or by using Microsoft Office FrontPage
2003. For more information about using FrontPage to customize SharePoint sites and portals, see
Customizing SharePoint Sites and Portals, Part 1.
Site definitions are composed of multiple files located in the file system of each Web server. Site
definitions and templates work together to customize a site. Custom templates are always
associated with the site definition on which the template is based. A custom template depends on
the base site definition in the file system in order to work. A custom template is the difference
between a site definition and the state of the site after a template is generated. The template
tracks changes to the site definitions that are stored in the configuration database. This article
describes the advantages and disadvantages of using custom templates and site definitions and
provides guidance about when to choose one over the other, and how to avoid overwriting
custom templates and site definitions when installing product updates.
Creating Custom Templates
Now that we know that custom templates track changes to a SharePoint site definition, we can
examine the different types of custom templates. List templates track changes to columns, forms,
pages, and optionally, changes to the content associated with a specified list. Site templates track
changes to site navigation, Web Parts, lists present on a site, and optionally, changes to the
content of a single site. You can save an existing site as a site template.
Note There is a 10 MB quota on the total size of the content you can store in a site template.
You can determine the size of site content by going to Top-Level Site Administration, and in
the Management and Statistics section, clicking View site usage data.
A custom template is persisted as a file with an .stp extension, which is actually a .cab file that
you can rename with the .cab file extension and open in Windows Explorer. This file includes
one Manifest.xml file in Collaborative Application Markup Language (CAML) that the server
generates as a subset of the Microsoft SharePoint Migration Tool (Smigrate.exe) manifest file
format. For more information about SMIGRATE, see "Introduction to Templates and
Definitions" in the Microsoft SharePoint Products and Technologies 2003 Software
Development Kit (SDK).
Let's say that you created a site, customized it by adding lists, events, document libraries, custom
Web Parts, and applied a special theme. You want to share this piece of work with other site
owners or impose this site template on any subsites. On the Site Settings menu, click Go to Site
Administration, and then in the Management and Statistics section, click Save as template.
Type a file name using an .stp extension and type a title and description for your site template.
You can also select the Include content check box. You save your site as a template in a gallery
inside the content database to make it available to other subsites. As long as subsequent subsites
are based on the same site definition (for example, on a Document Workspace) and have the
identical language of the original site, you can create subsites using this template.
To make the template appear in the list of templates in the Site Creation wizard, you need to
export the template to the file system and run the STSADM command tool. To export the
template, right-click the template and click Save Target As, and then follow the prompts to save
the template. After saving the template to the file system, from a command prompt, type the
following:
stsadm.exe -o addtemplate -filename "local_drive:\site_template_file_name.stp" -title
"Site_Template_Name"
Note You must reset Microsoft Internet Information Services (IIS) before these changes can
take affect. After resetting IIS, the Site_Template_Name template becomes available in the site
template list during site creation.
You can also export a list template the same way you exported the site template. However, list
templates are available only to the site collection of the site from which you exported.
About Collaborative Application Markup Language
Collaborative Application Markup Language (CAML) is an XML-based language used for
defining collaboration objects for a site. In Windows SharePoint Services, CAML defines sites,
lists, fields, views, or forms.
CAML essentially has two major types of elements—those for field rendering and schema
definition, and those for page rendering. For example, you can use the page-rendering CAML
elements when you need to extract the property of a specific field and render it on a page.
You can also use CAML to define tables in the site database during site provisioning. You can
use CAML to customize a SharePoint site and in SOAP messaging to Web services in Windows
SharePoint Services to interact remotely with a Windows SharePoint Services deployment.
Moreover, you can use CAML in script or code that implements members in the Windows
SharePoint Services object model. In this case, you pass CAML strings through method
parameters, assign them to properties, or return them by methods and properties.
For more information about CAML, see "Introduction to Collaborative Application Markup
Language (CAML)" in the Microsoft SharePoint Products and Technologies 2003 Software
Development Kit (SDK).
Creating Site Definitions
Site definitions are similar to templates. Site definitions are composed of several files located in
the file system on each Web server. The site definition files contain XML tags that define a
template for a site. The default site types included with Windows SharePoint Services are created
using site definitions (such as Team Site, Blank Site, Document Workspace, and so on).
Windows SharePoint Services creates a version of each site definition during installation. The
site definition files are stored in subdirectories in the following location:
Local_drive:\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\1033\
It is recommended that you create a custom site definition by copying an existing site definition,
rather than modifying the original files installed with Windows SharePoint Services. Changes
that you make to originally installed files may be lost when you install updates or service packs
for Windows SharePoint Services, or when you upgrade a deployment to the next product
version.
To create a site definition
1. Copy the existing site template folder in the following location:
2. Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server
Extensions\60\Template\lcid
For example copy the site template folder and rename it "TRAINING".
3. Then copy the WEBTEMP.XML file in the following location:
4. Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server
Extensions\60\TEMPLATE\1033\XML
5. Rename the file, for example, WEBTEMPTRAINING.XML.
During initialization, the compiler merges the information contained in files prefixed with
WEBTEMP*.XML and makes them available for creating sites. This provides easy
extensibility for third-party ISVs to create additional site definitions that integrate with
SharePoint Products and Technologies.
Note All areas in a SharePoint Portal Server deployment are stored in directories
that begin with /SPS*.
A site definition is composed of three main files: WEBTEMP.XML, ONET.XML, and
SCHEMA.XML. The following table shows the files' locations in the file system, and their
definitions.
Table 1. Site definition files
Site Definition
Location Description
File
WEBTEMP.XML Local_drive:\Program Files\Common Files\Microsoft Specifies
Shared\Web server extensions\60\TEMPLATE\1033\XML configurations
of lists and
modules for a
site definition.
Defines
navigation
bars such as
the top link
bar and the
Local_drive:\Program Files\Common Files\Microsoft quick launch,
ONET.XML
Shared\Web server extensions\60\TEMPLATE\1033\*\XML available lists,
document
templates,
base types,
configurations,
modules
Defines the
Local_drive:\Program Files\Common Files\Microsoft
columns,
Shared\Web Server
SCHEMA.XML views, and
Extensions\60\TEMPLATE\1033\Custom_Site_Template\LIST
contents of a
S
list
WEBTEMP.XML
A WEBTEMP.XML file contains the site definitions that are available on the Template
Selection page for creating instances of sites. WEBTEMP.XML defines the site template for a
site definition. By default, Windows SharePoint Services includes the following site templates:
Team Site, Blank Site, Document Workspace, and Meeting Workspace.
You can edit the default WEBTEMP.XML file to modify the existing list of templates available
to users. To hide a particular template on the list of site templates, locate the section for that
template in the WEBTEMP.XML file, and then set the Hidden attribute of the Configuration
element to TRUE. Set Hidden to FALSE to make the template visible.
Remember to copy and rename the WEBTEMP.XML file before making changes to the default
version. In the following example, we use the copied and renamed file
WEBTEMPTRAINING.XML to create a Training Team Site and a Trainee Workspace.
WEBTEMPTRAINING.XML
<?xml version="1.0" encoding="utf-8" ?>
<Templates xmlns:ows="Microsoft SharePoint">
<Template Name="TRAINING" ID="10101">
<Configuration ID="0" Title="Training Team Site" Type="0"
Hidden="FALSE"
ImageUrl="images/stsprev.jpg"
Description="This template provides a forum
for the team to create, organize, and share information
quickly and easily. It includes a document library, and
basic lists such as Announcements, Events, Contacts,
and Quick Links.">
</Configuration>
<Configuration ID="1" Title="Trainee Workspace" Type="0"
Hidden="FALSE"
ImageUrl="images/dwsprev.jpg"
Description="This definition creates a site for Trainees
to work together on specific documents.">
</Configuration>
</Template>
</Templates>
The WEBTEMPTRAINING.XML file contains a Template element used to define a single
template for a site. Each Template element has a Name attribute that must match the name of
the XML file prefixed with webtemp. For example, the value of the Name attribute (in this
example, training) is the same as the file name following the prefix of webtemp. During
initialization, Windows SharePoint Services scans for files with a prefix of webtemp*.xml and
loads them into memory.
Note For changes to appear, you must reset Internet Information Services (IIS) whenever
making changes to any of the WEBTEMP*.XML files.
A site definition only needs one root Template element. To avoid conflict with IDs already used
by Windows SharePoint Services, use unique values greater than 10,000 for the ID attribute.
The WEBTEMPTRAINING.XML file creates additional template options for selecting a new
template during site creation, as shown in Figure 1.

Figure 1. Training Workspace and Training Team Site templates are created (Click picture
to see larger image)
ONET.XML
The ONET.XML file defines the top link bar and the Quick Launch bar. It also specifies the
default document and list templates that are available for a Web Part Page such as document
library, picture library, custom list, discussion boards, surveys, and so on. The ONET.XML file
also specifies the configuration of files to include during site creation, and includes modules that
identify the location of these files during site creation.
Figure 2. Default options specified in the ONET.XML file (Click picture to see larger
image)
For detailed information, see "ONET.XML" in the Microsoft SharePoint Products and
Technologies 2003 Software Development Kit (SDK).
Customizing the Navigation Bar for a Site
You can customize the navigation bar of an existing site by adding a NavBarLink element to a
NavBar element within the ONET.XML file for a custom site template. You can add links to
local files and pages on the server or to files and pages located elsewhere.
The following example adds two NavBarLink elements, one that provides a link to a local file
on the server, called Sample.aspx, and the other that provides a link to a URL,
http://example.microsoft.com/.
<NavBars>
<NavBar Name="SharePoint Top Navbar" ID="1002">
<NavBarLink Name="Documents and Lists"

Url="_layouts/[%=System.Threading.Thread.CurrentThread.CurrentCulture.LCID
%]/viewlsts.aspx">
</NavBarLink>
<NavBarLink Name="Create"

Url="_layouts/[%=System.Threading.Thread.CurrentThread.CurrentCulture.LCID
%]/create.aspx">
</NavBarLink>
<NavBarLink Name="Site Settings"

Url="_layouts/[%=System.Threading.Thread.CurrentThread.CurrentCulture.LCID
%]/settings.aspx">
</NavBarLink>
<NavBarLink Name="Get Current Data" Url="_layouts/Sample.aspx"></NavBarLink>
<NavBarLink Name="microsoft" Url="http://example.microsoft.com/"></NavBarLink>
<NavBarLink Name="Help" Url="javascript:HelpWindow()"></NavBarLink>
</NavBar>
<NavBar Name="Documents" ID="1004">
</NavBar>
<NavBar Name="Pictures" ID="1005">
</NavBar>
<NavBar Name="Lists" ID="1003">
</NavBar>
<NavBar Name="Discussions" ID="1006">
</NavBar>
<NavBar Name="Surveys" ID="1007">
</NavBar>
</NavBars>
The value of the Url attribute in the local link is relative to the top-level SharePoint site.
Using Site Configurations
When creating site definitions, the configuration identifies which lists and modules to include. A
configuration allows a site definition to have multiple options for site layout and design such as
Team Site, Blank Site, and Document Workspace. Each of these site templates result in a
different configuration of lists and Web Parts. Both WEBTEMP.XML and ONET.XML include
a Configuration element. In WEBTEMP.XML, this element is contained within the Template
element and specifies the configuration options to include for the site definition.
In ONET.XML, the Configuration element is contained within a Configurations element that
specifies one or more configurations containing lists and modules. Each Configuration element
contains an ID attribute. The ID attribute associates the configuration specified in a site template
with a configuration of list definitions in the ONET.XML file. The combination of this ID and
the value of the Name attribute in the Template element provides a reference to the contents of a
specific Configuration element in a ONET.XML file.
You can reuse existing list definitions specified in the ONET.XML file for a site definition. You
can also create multiple configurations in a single ONET.XML file. In this approach, each
configuration enables the creation of a site with a different set of lists, Web Parts, and layout.
Table 2. Configuration element attributes
Name Description
Optional Text. Contains the description of the site configuration that appears on
Description
the Template Selection page.
Optional Boolean. Specifies whether the site configuration appears as an option
Hidden
on the Template Selection page.
ID Required Integer. Specifies a unique ID for the configuration.
Optional Text. Contains the URL for the preview image displayed on the
ImageUrlURL
Template Selection page.
Name Optional Text. Contains the name of the configuration.
Optional Text. Contains the title of the configuration that is displayed on the
Title
Template Selection page.
Type Optional Text. Identifies the configuration with a specific site definition.
To set up a configuration within a site definition, use Configuration elements within a custom
WEBTEMP*.XML file and within one or more ONET.XML files that are referenced in the
WEBTEMP*.XML file.
For example, the WEBTEMPTRAINING.XML file in the previous example uses two
configurations to define different site configurations, one for a training team site and the other
for a training Document Workspace site. This example involves use of only two configurations
within a single site definition, but you can include multiple definitions with different
configurations within a single WEBTEMPTRAINING.XML file, each one referencing different
site definition directories and their respective ONET.XML files.
In the ONET.XML file, each configuration defines a specific type of site that can be created
from the site definition. All configurations within this file share a set of available list definitions,
document templates, navigation areas, base list types, and modules that are defined within the
file. You can add a reference to a list that is defined in ONET.XML by adding a List element to
the collection of lists specified within a Configuration element. For example, if you define a list
type named "My_Custom_List" in ONET.XML with a Type attribute of 143, then you can add
<List Title="My_Custom_List" Type="143" URL="Lists/My_Custom_List" /> to add the list to
the configuration. The following example shows the arrangement of configurations in the
ONET.XML file for a specific WEBTEMP*.XML file:
<Configurations>
<Configuration ID="0" Name="Default">
<Lists>
<List Title="My_Custom_List" Type="143" Url="Lists/My_Custom_List" />
<List Title="Shared Documents" Url="Shared Documents"
QuickLaunchUrl="Shared Documents/Forms/AllItems.aspx"
Type="101" />
<List Title="General Discussion" Url="Lists/General Discussion"
QuickLaunchUrl="Lists/General Discussion/AllItems.aspx"
Type="108" />
<List Title="Announcements" Type="104" Url="Lists/Announcements" />
<List Title="Links" Type="103" Url="Lists/Links" />
<List Title="Contacts" Url="Lists/Contacts"
QuickLaunchUrl="Lists/Contacts/AllItems.aspx" Type="105" />
<List Title="Events" Type="106" Url="Lists/Events" />
<List Title="Tasks" Url="Lists/Tasks" QuickLaunchUrl="Lists/Tasks/AllItems.aspx"
Type="107" />
<List Title="Site Template Catalog" Type="111" Url="_catalogs/wt"
RootWebOnly="TRUE" />
<List Title="Web Part Catalog" Type="113" Url="_catalogs/wp"
RootWebOnly="TRUE" />
<List Title="List Template Catalog" Type="114" Url="_catalogs/lt"
RootWebOnly="TRUE" />
</Lists>
<Modules>
<Module Name="Default"/>
<Module Name="WebPartPopulation"/>
</Modules>
</Configuration>
<Configuration ID="1" Name="DWS">
<Lists>
<List Title="Shared Documents" Type="101" />
<List Title="Image Library" Type="109" />
<List Title="General Discussion" Url="Lists/General Discussion"
QuickLaunchUrl="Lists/General Discussion/AllItems.aspx" Type="108" />
<List Title="Announcements" Type="104" Url="Lists/Announcements" />
<List Title="Contacts" Url="Lists/Contacts"
QuickLaunchUrl="Lists/Contacts/AllItems.aspx"
Type="105" />
<List Title="Links" Type="103" Url="Lists/Links" />
<List Title="Events" Url="Lists/Events" QuickLaunchUrl="Lists/Events/AllItems.aspx"
Type="106" />
<List Title="Tasks" Type="107" />
<List Title="Site Template Catalog" Type="111" Url="_catalogs/wt"
RootWebOnly="TRUE" />
<List Title="Web Part Catalog" Type="113" Url="_catalogs/wp"
RootWebOnly="TRUE" />
<List Title="List Template Catalog" Type="114" Url="_catalogs/lt"
RootWebOnly="TRUE" />
</Lists>
<Modules>
<Module Name="DWS"/>
<Module Name="WebPartPopulation"/>
</Modules>
</Configuration>
</Configurations>
Using Modules
Modules serve two purposes. Modules specify all the files associated with a definition and they
specify the location of these files in the new site. For example, if the file is a Web Part Page, the
module definition specifies both the Web Part Page file itself and the specific set of Web Parts or
lists, and files, to include on the page. The file is encapsulated inside the File element as a child
element of the module.
You must declare modules as an element within the Configuration element. You can also use
modules outside the configuration to define the URL of any file to include as part of the
definition.
The following is an example from the ONET.XML that shows the use of modules:
<Module Name="Default" Url="" Path="">
<File Url="default.aspx" NavBarHome="True">
<View List="104" BaseViewID="0" WebPartZoneID="Left"/>
<View List="106" BaseViewID="0" WebPartZoneID="Left"
WebPartOrder="2"/>
<AllUsersWebPart WebPartZoneID="Right"WebPartOrder="1">
<![CDATA[
<WebPart xmlns=http://schemas.microsoft.com/WebPart/v2
xmlns:iwp="http://schemas.microsoft.com/WebPart/v2/Image">
<Assembly>Microsoft.SharePoint, Version=11.0.0.0,
Culture=neutral,
PublicKeyToken=71e9bce111e9429c</Assembly>
<TypeName>Microsoft.SharePoint.WebPartPages.ImageWebPart
</TypeName>
<FrameType>None</FrameType>
<Title>Site Image</Title>
<iwp:ImageLink>/_layouts/images/homepage.gif
</iwp:ImageLink>
</WebPart>
]]>
</AllUsersWebPart>
<View List="103" BaseViewID="0" WebPartZoneID="Right"
WebPartOrder="2"/>
<NavBarPage Name="Home" ID="1002" Position="Start">
</NavBarPage>
<NavBarPage Name="Home" ID="0" Position="Start">
</NavBarPage>
</File>
</Module>
Note HTML definitions do not allow for nested
<CDATA>
tags. However to work around this, you can remove the inner tag and use
HtmlEncode
on its content.
The URL attribute is required and designates the main file to execute for the module. For
example, the URL could specify a Web Part Page such as default.aspx, or a *.dwp file for a
specific Web Part. Inside the Module element, you can include Web Part definitions and
placements inside a Web Part zone. The previous example specifies a single image Web Part
displayed in the right Web Part zone.
You can also specify whether to display a module in the top navigation area of a page as well as
placement in the Web Part zones of a page. In the previous example, views and Web Parts in the
module are displayed on the Home page. After a Web site is created, it includes whatever files
are specified through this module.
Field Definitions Using SCHEMA.XML
The SCHEMA.XML file defines the views, forms, and any special fields for a list. To customize
a list with custom views, you can modify the SCHEMA.XML file and add a field to the list
definition.
To add a field to a list definition
1. Go to the following directory:
2. Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server
3. Extensions\60\TEMPLATE\1033\Custom_Site_Template\LISTS
Each subfolder represents a specific list.
4. Open the subfolder for the list you want to customize.
5. Open the SCHEMA.XML file using a text editor such as Notepad.
6. In the Metadata section of the file, find the Fields element that contains the definitions
of each field in the list type. You can add a new field under the Fields element as
follows:
7. <Field Name="EmployeeID" DisplayName="Employee ID"
Type="Number"Required="TRUE"
8. Description="Enter the ID from your employee badge."/>
For more information, see "Creating a List Definition" in the Microsoft SharePoint Products and
Technologies 2003 Software Development Kit (SDK).
Customizing the Toolbar for a List
To customize the toolbar for a list, you need to make changes to the Toolbar element within the
SCHEMA.XML file for the list. To add a new link to the toolbar, for example, you can copy an
existing definition for a link and then modify it. This maintains the nesting of tables that is used
for displaying links and ensures that the appearance of the link you add is consistent with the
other links.
The following example adds a link on the toolbar of a list to a document that is contained in the
Shared Documents folder.
<tr><td style="padding-left: 2px;padding-bottom: 2px" width=100%>
<table border=0 cellpadding=0 cellspacing=0 width=100%>
<tr><td width=100% class="ms-unselectednav" colspan=2>
<table cellpadding=0 cellspacing=0 border=0><tr><td valign=top>
<img src="../../_layouts/images/rect.gif">&nbsp; </td>
<td><A HREF="]]></HTML><HttpVDir/>
<HTML><![CDATA[/Shared Documents/MeetingNotes.doc">]]></HTML>
<HTML>Type Conversions</HTML><HTML><![CDATA[</A></td></tr></table>
</td></tr></table>
</td></tr>
The example shows the toolbar link nested within three tables. The two tables in the example are
contained within opening and closing <tr> and <td> tags that belong to a third table, which
serves as the frame for containing all the links in the toolbar.
The CAML HttpVDir element, which returns the root directory of the current subsite, constructs
the complete path for the URL.
When a new list is created based on this template, a link to a MeetingNotes.doc file appears in
the toolbar.
Customizing Portal Areas Using Templates
You can select an area template to use when creating an area in SharePoint Portal Server. Area
templates are site definitions that also consist of multiple files with a parallel structure to the site
definitions in Windows SharePoint Services. They are stored in the following location:
Local_drive:\Program Files\Common Files\Microsoft Shared\Web server
extensions\60\template\1033
An area template can include:
• A site home page
• Lists for the site
• Document libraries
The default naming convention for area template directories starts with the prefix SPS. The
following table lists the template and the area it maps to.
Table 3. Area templates
Template Maps to
SPS Home
SPSBWEB To create bucket Web sites
SPSCOMMU Communities
SPSMSITE Site Registry
SPSNEWS Subareas under News
SPSNHOME News Home
SPSPERS MySite
SPSTOC Topics Home
SPSTOPIC Topic
To create area templates based on existing definitions
1. Copy and paste an area template folder (such as SPSCOMMU) and rename it, for
example, SPSMyTemplate.
Note The new template name must begin with SPS.
2. Leave the default WEBTEMPSPS.XML file, and create a new one, such as
WEBTEMPMySPS.xml, for the new template.
3. Optionally, you can create additional lists, either as described earlier in this article, or as
described in "Creating a List Definition" (Microsoft SharePoint Products and
Technologies 2003 Software Development Kit (SDK)).
4. In the new template folder, modify ONET.XML to add Web Parts and lists the same way
you modify a SharePoint site. You can also modify default.aspx to suit your needs.
5. Reset IIS to have the changes take effect. The new area template should appear in the
area template picker on the Create New Area page.
Specifying a Template for Subareas
When you change a template associated with an area, you can specify a template for its subarea.
To specify a template for a subarea
1. For any area you want to change, under Actions, click Manage Portal Site.
2. For the area of your choice, in the Edit drop-down list box, click Edit.
3. Click the Page tab. In the Subarea Templates section you can choose one of the
following:
○ Subareas can use any template (in the list of available area templates)
○ All subareas will use the following template (which you choose from the drop-
down list)
Template Inheritance
An area can inherit its template from its parent area, from a page, or from the original template
(see Figure 3).
To set a template for the current area
1. For any area you want to change, under Actions, click Manage Portal Site.
2. For the area of your choice, in the Edit drop-down list box, click Edit.
3. Click the Page tab. In the Area Templates section you can choose one of the following:
○ This area uses the same template as the parent area Use the parent template
to render this area.
Note The area uses the parent's template and the default SharePoint lists, but
portal listings are still sourced from the current area.
○ This area uses the template originally specified for this area Use the template
specified at area creation time to render the area. Picking this option reverts the
template to the one used when the area was created.
○ This area uses the following page as a template You provide any URL here
that you want. You can add the relative URL to another area to use that area's
template, for example, /topics/default.aspx. Or you can create your own page, and
provide the URL to that page. Regardless of what you type here, if the page used
has a Portal Listing Web Part on it, by default it uses the listing information from
the current area as its source.

Figure 3. Template inheritance (Click picture to see larger image)


By default, a subarea inherits its parent area's security settings but you can change its security
settings by going to the area and under Actions, clicking Manage Security. Similarly, you can
add users and modify permission rights. You can also change site groups permission on the
current area. Modifying the security setting for the subarea breaks its security inheritance. You
can re-establish the inheritance to its parent by selecting the Inherit permissions from the
parent area link on the current area.
Editing Existing Area Templates
An area template essentially consists of a style sheet reference, registration of various
components/controls to run on the page, standard HTML markup dictating layout, zones
(containers for Web Parts), Web controls (for example, navigation elements), and in some cases,
instances of Web Parts. The primary file is default.aspx, located in the root directory of each
template folder. Building from copied templates is possible for all templates, with the exception
of the site Home page, the Event Calendar and the Sites Directory template. Because the site
Home page, Event Calendar, and Sites Directory have already been created using the SPS
template, it is not possible to re-provision the site using alternate templates. You must alter the
default template to modify the home page look and feel. If you attempt to create a custom Sites
Directory template, delete the existing Sites Directory page, and create a Sites Directory page
based on a new template, you may cause many functional problems, as the new Sites Directory
page would be located at a /C*/ address. It is more efficient to edit the Sites Directory directly
from the default template, leaving the location of the Sites area at (/SiteDirectory/). When you
create a new template, you must add it into the system to make available for content creators to
select.
To add a new template to the system
1. Note the name of the new template folder (such as SPSTOPICMSW).
2. In a text editor such as Notepad, open WEBTEMPSPS.XML located at
\\FE_Server_name \c$\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\1033\XML.
3. Within the <Templates> node, copy and then paste an existing <Template> node. For
example:
4. <Template Name="SPSNEWS" ID="32">
5. <Configuration ID="0" Title="News area template" Type="0" Hidden="TRUE"
6. ImageUrl="../images/spshome.gif" Description="Area Template."></Configuration>
7. </Template>
8. Replace the Name property with the name of the new template folder.
9. Give the new template a unique ID.
10. Replace the Title, ImageUrl, and Description properties as appropriate.
11. Save the file, and then restart IIS.
The template is now available as a new item in the Template menu on the Create Area
form.

Figure 4. Area Template menu showing new template


As mentioned earlier, a template essentially consists of a style sheet reference, registration of
various components/controls to run on the page, standard HTML markup dictating layout, zones
(containers for Web Parts), Web controls (for example, navigation elements) and in some cases,
instances of Web Parts.
Modifying a template simply involves opening the template of choice in a text editor, making the
desired changes, and saving the file. No IIS reset is required.
Tips on Making Templates
If you foresee making substantial changes to templates, make a new template instead of
modifying an existing template. This will guarantee you freedom from upgrades and conflict
with new SharePoint Portal Server code. Do not put your templates into the same folders as
existing templates or call them the same name, because during an upgrade, your code can be
overwritten.
Make a "mother template" page—you can create zones of different sizes that take up different
column percentages of the width of the page, and use them as quick starting points for your own
templates.
Guidelines for Using Templates and Site Definitions
There is more than one way to tailor your site to your exact needs. When you customize a site, be
aware of several key factors that can help you determine whether to choose templates or site
definitions.
The amount of modification involved in changing the site can be a significant factor. The default
site templates are limited in design and variety, designed primarily for an intranet portal rather
than a corporate Web presence on the Internet. If you need a site design that differs significantly
from the default sites, then a new site definition may be your appropriate choice.
Typically, site navigation is consistent across a deployment, however, site managers typically
want some control over the design and layout of their site. In some cases, control over relatively
minor aspects of site rendering (logos, menus, means of navigation, and so on) can give
individual sites a unique look and feel while maintaining consistency across a larger deployment.
In these cases, site templates might be your appropriate choice.
When to Use Site Definitions
Customizing portal sites and other SharePoint sites using site definitions is most appropriate for
third-party developers and server administrators. Because site definitions require access to the
file systems of the Web server, server administrators must always be involved in the deployment
of site definitions. If you are modifying areas of a portal site, then you will need to use site
definitions.
Although deploying a site definition requires more work, site definitions typically perform better
when cached on the file system instead of in the database. In addition, you can achieve a finer
level of customization by directly editing all the schema files and not depending on the existing
site definition as a site template does. Also, if you want to introduce new file types, view styles,
and drop-down edit menus, you need to edit the schema files that make up the site definition.
Custom site definitions are version and upgrade independent. Subsequent upgrades to SharePoint
Products and Technologies may overwrite existing default site definitions. Using custom site
definitions excludes your sites from potential upgrade issues.
However, there is no easy way to modify site definitions once they are deployed. There is always
the possibility of breaking existing deployed sites derived from the site definition once you
modify an existing site definition. You can only add to the site definition once it is deployed.
When to Use Site Templates
Site templates, compared to site definitions, are easy to create and deploy. You can make all
customizations through the user interface or FrontPage 2003. In addition, you do not need to be a
server administrator on the Web server to create and deploy site templates. You can modify a site
template without affecting existing sites created by the template. Deployment is simple because
template data is stored centrally in the configuration database.
Because it is slow to store templates in and retrieve them from the database, site templates can
result in slower performance. Templates in the database are compiled and executed every time a
page is rendered. Windows SharePoint Services does some performance optimization whereby it
stores templates on the local Web server and a copy (or "ghost") of the page in the configuration
database. However, you can easily prevent Windows SharePoint Services from using a copy of
the page by using Web Folders or FrontPage to open, modify, and save it. From this point
forward, the database is used to render the page. Preventing Windows SharePoint Services from
using a copy of a site page will cause the page to stop picking up changes from the site definition
files, so if you want to keep a consistent look across the entire portal and only want to modify the
site definition files, then don't prevent this optimization. Rendering pages from the database will
result in an initial performance penalty.
Site templates only work on SharePoint sites that are not portal sites (not based on the SPS
templates). Furthermore, site templates are not ideally suited for a development environment. In
effect, they are still customizations of a site definition. If the site definition does not exist on the
server, the site template fails.
Typically, because of these issues, site templates are not as efficient as site definitions in a large-
scale environment.
Conclusion
Whether you are a developer or a site administrator who wants to change the user interface to
better suit your requirements, you have a gamut of options for customization. There are no limits
to what you are allowed to do when creating custom sites. Understanding how custom templates
and site definitions work can help you to tweak the user interface to look the way you want.
Custom templates and site definitions are easy to use and relatively safe to modify without
making major changes to your deployment or breaking any of the default features of SharePoint
Products and Technologies.
For more general information about customization, and how to use FrontPage in customizing,
see Customizing SharePoint Sites and Portals, Part 1. For style sheet class reference tables you
can use, see Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part
3.
Additional References
Microsoft SharePoint Products and Technologies 2003 Software Development Kit (SDK).
Microsoft Windows SharePoint Services Administrator's Guide





 Customizing SharePoint Sites and Portals: Style
Sheet Class Reference Tables, Part 3
 Debugging Web Parts
 Embedding Watermarks into Images During
Upload to a Picture Library on a SharePoint Site
 How to Customize Your Search Using SharePoint
Portal Server 2003
 How to Write a Back Up and Restore Application
for SharePoint Portal Server 2003
 How to Write a Filter for Use by SharePoint Portal
Server 2003 and Other Microsoft Search-Based
Products
 Integrating SharePoint Products and Technologies
and InfoPath 2003
 Microsoft Windows SharePoint Services and Code
Access Security
 Modifying the User Interface for Web Parts and
Web Parts Pages
 Packaging and Deploying Web Parts
 Protocols for Communicating Between Windows
SharePoint Services and an Online Web Part
Gallery
 SharePoint Data View Web Part Extension
Functions in the ddwrt Namespace
 Tips and Tricks for Developing with Windows
SharePoint Services
 Tips for Enhancing the Accessibility of SharePoint
Web Sites
 Upgrading a Web Part Assembly
 Usage Event Logging in Windows SharePoint
Services
 Using Wppackager to Package and Deploy Web
Parts for Microsoft SharePoint Products and
Technologies
 Web Part Templates for Microsoft Visual Studio
.NET
 Writing Custom Web Services for SharePoint
Products and Technologies
 Book Excerpts
 SharePoint Portal Server 2001
 SharePoint Team Services 1.1
 Silverlight 3
○ Win32 and COM Development
MSDN
Please Wait
MSDN Library
Please Wait
Web Development
Please Wait
SharePoint Products and Technologie...
Please Wait
SharePoint Products and Technologie...
Please Wait
Technical Articles
Please Wait
Customizing SharePoint Sites and Po...
SharePoint Products & Technologies (2003) Technical Articles
Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3

Dino Dato-on
Jinger Zhao
Microsoft Corporation
May 2004
Applies to:
Microsoft® Windows® SharePoint™ Services
Microsoft Office SharePoint Portal Server 2003
Microsoft Office FrontPage® 2003
Summary: The third of three companion articles. In Customizing SharePoint Sites and Portals,
Part 1, you learned ways to customize a SharePoint site and an area; manage users, sites, and
templates; change the structure of pages in a site; manage user access; and optimize style sheets.
In Customizing SharePoint Sites and Portals: Using Templates and Site Definitions, Part 2, you
created and edited a site using templates and site definitions. Part 3 provides valuable style sheet
class reference tables to use as you customize your sites and portals. (39 printed pages)
Contents
Introduction
Table 1. Web Part Gallery Compatibility
Table 2. Style sheet Class References for OWS.CSS
Table 3. Style Sheet Class References for SPS.CSS
Conclusion
Introduction
Microsoft® SharePoint™ Products and Technologies consists of Microsoft Office SharePoint
Portal Server 2003 and Microsoft Windows® SharePoint Services. SharePoint Products and
Technologies uses Microsoft Windows Server™ 2003 and the .NET Framework. This latest
version offers improvements in the customization, development, and deployment of an enterprise
portal and team collaboration infrastructure.
Customization is the ability to change the layout, view, content, and site structure for a group of
users such as a department or corporation. To help ensure consistency, Windows SharePoint
Services and SharePoint Portal Server 2003 enable only Web Designers and Site Administrators
full customization privileges for managing the look and feel of a site.
In this article, you'll find Web Part compatibility and style sheet class reference tables to use in
your customization.
Table 1. Web Part Gallery Compatibility
Supported on Supported on other
Web Part name File name
portal sites SharePoint sites
Topic Assistant
Autocat.dwp Yes
Suggestions
Area Details Catdetail.dwp Yes
Group Listings GroupedListings.dwp Yes
News LatestNews.dwp Yes
Links for You LinksForYou.dwp Yes
Content Editor MSContentEditor.dwp Yes Yes
Image Web Part MSImage.dwp Yes Yes
Members MSMembers.dwp Yes
Page Viewer MSPageViewer.dwp Yes Yes
Form Web Part MSSimpleForm.dwp Yes Yes
XML Web Part MSXml.dwp Yes Yes
Your Recent
Mydocs.dwp Yes
Documents
My Workspace Sites Myworks.dwp Yes
News Areas NewsAreas.dwp Yes
News for You NewsForYou.dwp Yes
My Mail Folder Owa.dwp Yes
My Calendar Owacalendar.dwp Yes
My Inbox Owainbox.dwp Yes
My Tasks Owatasks.dwp Yes
My Links Quicklinks.dwp Yes
My Alerts Summary Subscrip.dwp Yes
Area Contents Toc.dwp Yes
Announcements Yes Yes
Contacts Yes Yes
Events Yes Yes
General Discussions Yes Yes
Links Yes Yes
Shared Documents Yes Yes
Tasks Yes Yes
My Checked-out Yes Yes
Pending Approvals Yes Yes
Document Library Yes Yes
Image Library Yes Yes
Table 2. Style sheet Class References for OWS.CSS
Selector What it controls Example
Sets margin of body or
body, form
form to 0
body Sets margin of body to 0
Determines color of border
.ms-main at right margin of each
page
.ms-toolbar,
Sets text and gradient in
table.ms-toolbar
list toolbars
.ms-rtetoolbarmenu,
.ms-rtetoolbarunsel,
.ms-rtetoolbarsel,
.ms-rtetoolbardis,
a.ms-rtetoolbardis,
Defines look of rich text
.ms-rtetoolbarhov
editor
Type of rating scale for
Survey lists, such as "Low,
.ms-gridT1
Medium, High" of a rating
scale question
.ms-viewselect a:link,
Text for available views in
.ms-GRFontSize
left navigation for a list
Text size in datasheet
control

Fonts for any drop-down


select or check box items in List
customization pages

hr Defines HR properties
Formats names of form
fields when creating or
.ms-formlabel
editing a list item or
adjusting site settings
Formats hyperlinks that
.ms-formdescription appear in form descriptions
A such as "Click here to
test"
.ms-formtable,
Text of each field in list
item; for example, form for
.ms-formbody
a "New Item" for any of
the default lists
Text in a survey when you
.ms-radiotext use option (radio) buttons
for the choice
Text of question on a
.ms-gridtext rating scale style question
in a Survey
Text of each field in a list
item; for example, the
.ms-formbody
form for a "New Item" for
any of the default lists
Defines font characteristics
.ms-formbody FONT
for the formbody class
Instruction text on form
.ms-formdescription
fields
Example: "Enter date
in M/D/YYYY
format" text when .ms-formdescription style
creating or editing a
new list item.
.ms-searchbox,
.ms-searchform,
Search form field on home
.ms-searchcorner
page

table.ms-form th Table header for forms

table.ms-form td Internal usage; do not alter

Text that describes


.ms-formrecurrence
recurrence patterns
Text in non-date form
.ms-long fields when creating or .ms-long style
editing a list item
.ms-longer Used by rich text editor
.ms-italic Italic font
.ms-bold Bold font
.ms-bannerframe,
.ms-
GRHeaderBackgroun
d,
Navigation bar banner
.ms-storMeFree background at top of each
page
.ms-banner a:link.
White hyperlink text in
.ms-banner a:visited navigation bar banner at
top of each page
.ms-banner a:link,
White hyperlink text in the
.ms-banner a:visited navigation bar banner at
top of each page
.ms-banner,

.ms-GRHeaderText White text in top banner

.ms-nav td,
.ms-nav,
.ms-SPZoneLabel,
"Select a View" text in a
.ms-input
list page
Input boxes for non- .ms-nav cell style
text (currency,
date/time, etc.)
Text in Quick Launch
.ms-nav th .ms-nav header cell style
area on home page
.ms-navheader a,
.ms-navheader a:link,
.ms-navheader Section headings on Quick
a:visited Launch bar
.ms-navframe,
Color behind Quick
.ms-GRStatusBar Launch bar and around
datasheet
.ms-storMeUsed,
Used on storage
.ms-storMeFilterBar
management page
Line dividing sections of
.ms-navline
left bar on list views

"Quick Launch" text on the


.ms-navwatermark
Quick Launch bar

.ms-selectednav,
Box around selected view
on list view page; used for
.ms-GRSortFilter
a selected column in
datasheet
Unselected text on Quick
.ms-unselectednav
Launch bar
Graphical separator that
appears between main
.ms-verticaldots
body and left margin of
page (no longer used)
.ms-nav a
.ms-nav a:link
.ms-nav a:hover
Text in left navigation of
.ms-nav a:visited
the Quick Launch bar
Examples : The
words "Shared
Documents" "Tasks"
The site name that appears
on each page above the
.ms-titlearea .ms-titlearea style
page title (by default the
words "Team Web Site")
Upper portion of border at
TD.ms-titleareaframe
left margin of the page
Yellow line above title
Div.ms-titleareaframe
area of a page
.ms-titlearealine,
Yellow line below title and
above list toolbar; also
.ms-storMeEstimated
used on storage
management page
.ms-bodyareaframe Area below title
.ms-pagetitle Title text on each page .ms-pagetitle style
.ms-pagetitle a,
Hyperlinks that appear
.ms-pagetitle a:hover .ms-pagetitle hyperlink style
with title text
Caption above title for a
.ms-pagecaption
Web Part Page
.ms-selected,
Background of selected
items in Save or Save As
.ms-selected SPAN .ms-selected style
dialog box when saving to
a document library
Background on hover for a
.ms-selectedtitle
list item
Background for a list item
.ms-unselectedtitle
when not selected
Background color of arrow
.ms-menuimagecell next to item title for
context menu
List of selected shared
documents in Save or Save
.ms-filedialog td
As dialog box when saving
to a document library
Description text for a list,
.ms-descriptiontext description text on admin
forms and new list forms

.ms-dspadapterlist Internal usage; do not alter

.ms-alerttext Error messages on form


submissions
Lines between menu items
.ms-separator
on list toolbars

Right side background


.ms-authoringcontrols
color on admin pages

Text in section headings on


.ms-sectionheader
a page
Example:
"Administration" on
.ms-sectionheader style
the Site Settings
page
.ms-sectionheader a,
.ms-sectionheader
a:hover,
Section titles in view
.ms-sectionheader
creation form that expand
a:visited
and collapse
Horizontal lines between
.ms-sectionline
page sections
Line between list items and
"Add new list item" in a
.ms-partline
summary view style (used
on home page)
.ms-propertysheet,
.ms-propertysheet th,
.ms-propertysheet a,
Text in list settings pages
.ms-propertysheet
and in the Site Settings
a:hover
pages
Examples:
"Go Back to Shared
Documents"
Text under settings
such as "Use a filter
to display..."
List and document library
.ms-itemheader a names on the Documents
& Lists page
Subject of an open
.ms-discussiontitle .ms-discussiontitle style
discussion item
.ms-vh,
.ms-vh2 Text of column headings ms-vh hyperlink style
of lists
.ms-vh2 Used for padding
.ms-vh-icon,
.ms-vh-icon-empty,
.ms-vh-left,
.ms-vh-left-icon,
.ms-vh-left-icon-
empty,
.ms-vh-right,
.ms-vh-right-icon,
Used for icons next to
view headers, such as
.ms-vh-right-icon-
attachment icon, and
empty
spacing when no icon is
present
.ms-vh a,
.ms-vh a:visited,
.ms-vh2 a,
.ms-vh-left a,
.ms-vh-right a,
.ms-vh a:hover,
.ms-vh2 a:hover,
.ms-vh-left a:hover,
Text of hyperlinks for
.ms-vh-right a:hover .ms-vh hyperlink style
column headings of lists
.ms-vhImage Used in header images
Defines "group-by" view
.ms-gb
headers
Defines the "group-by"
.ms-gb2
view headers
.ms-vb,
.ms-vb2,
.ms-GRFont,
.ms-vb-user

.ms-vb a,
.ms-vb2 a,
.ms-GRStatusText a,
.ms-vb-user a,
.ms-vb a:hover,
.ms-vb2 a:hover,
.ms-vb-user a:hover
.ms-vb a:visited,
.ms-vb2 a:visited,
.ms-GRStatusText
a:visited,
.ms-vb-user a:visited
.ms-vb
a:visited:hover,
.ms-vb2
a:visited:hover,
.ms-vb-user
a:visited:hover,
.ms-vb2,
.ms-vb-title,
.ms-vb-icon,
.ms-vb-user,
.ms-vb-icon,
.ms-vb-user,
Text in body of a view and
.ms-vb2
most other common text
Icons classes are used
to indicate items such
as attachments
Title on home page of a
.ms-homepagetitle
Meeting Workspace
a.ms-addnew
"Add new..." text on
td.ms-addnew
summary view of lists
Error messages on form
.ms-error
submissions
Border type and font
.ms-cal formatting used in day
cells of Calendar view
.ms-calWeek,
.ms-vcal,
.ms-Dcal Used in Calendar view
Top border of each day
.ms-caltop .ms-caltop style
cell in Calendar view
.ms-calhead,
.ms-calhead a,
Header containing month
.ms-calhead a:hover name and navigation .ms-calhead style
arrows in Calendar view
Row of cells containing
.ms-caldow weekday names in .ms-caldow style
Calendar view
.ms-calmid Left and right borders on .ms-calmid style
each day cell in Calendar
view
Spacer used between
.ms-CalSpacer multiple appointments on .ms-calspacer style
same day
.ms-CalVSpacer Used in Calendar view
Calendar view all day
.ms-CalAllDay
events
Calendar view first row's
.ms-firstCalHour
TD containing time
Calendar view TD
.ms-calHour
containing time
Calendar view TD
.ms-calHalfHour containing half hour
marks
Calendar view TD between
.ms-calQuarterHour
hour and hour hour TDs
Calendar view horz day &
.ms-calbot
week, bottom row
.ms-appt a,
Hyperlink text of event
.ms-appt a:hover that spans multiple days in
Calendar view
.ms-appt,
Background, border and
text of event that spans
.ms-GRCellSelect .ms-appt style
multiple days in Calendar
view
Appointments displayed in
.ms-Dappt
"day view"
.ms-Vappt,
.ms-Vappt a,
.ms-Vappt a:link,
Appointments displayed in
.ms-Vappt a:hover
the vertical day view
Text of appointment that
.ms-apptsingle .ms-apptsingle
lasts a single day
Appointments displayed in
.ms-Dapptsingle "day view" with no
duration is set
.ms-Vapptsingle,
.ms-Vapptsingle a,
.ms-Vapptsingle
a:link,
Appointments displayed in
.ms-Vapptsingle
the "day view" with no
a:hover
duration is set
Down-level browser
.ms-caldowdown
support calendar table cell
Down-level browser
.ms-caldown support calendar day of
week
Position of date chooser
pop-up calendar when
.ms-datepickeriframe
creating or editing new list
item
Date chooser pop-up
.ms-datepicker calendar when creating or .ms-datepicker style
editing new list item
Line under weekday names
in date chooser pop-up
.ms-dpdow .ms-dpdow style
calendar when creating or
editing new list item
Text of date numerals in
the current month in the
.ms-dpday date chooser pop-up .ms-dpday style
calendar when creating or
editing a new list item
Text and background of
selected date in date
.ms-dpselectedday chooser pop-up calendar .ms-dpselectedday style
when creating or editing
new list item
Text of date numerals
which are not part of
current month in date
.ms-dpnonmonth .ms-dpnonmonth style
chooser pop-up calendar
when creating or editing
new list item
Header containing month
name and navigation
arrows in date chooser
.ms-dphead .ms-dphead style
pop-up calendar when
creating or editing new list
item
Arrows in date picker for
.ms-dpnextprev moving from one month to
next or previous
"Today's date" text and
line above it in date
.ms-dpfoot chooser pop-up calendar .ms-dpfoot style
when creating or editing
new list item
IMG.ms-button Sets cursor to hand for
buttons
.ms- Titles in Announcements
.ms-announcementtitle style
announcementtitle list view on home page
.ms-
List name in a list view
homepagetitle:Hover
Example : The words
"Announcements",
"Events", and "Links" .ms-homepagetitle style
on the default.htm
page
.ms- Space between discussion
discussionseparator threads
.ms-
summarytitlebarfram
e,
.ms-summarytitlebar
a:link,
.ms-summarytitlebar
a:visited,
.ms-summarytitlebar,
.ms-
summarytitlebartitle,
.ms-
summarytitlebartitle: Unused
hover

Image Libraries: Color


behind thumbnail in Image
img.thumbnail
Preview area on left
navigation bar

tr.ms-
imglibselectedrow,
Color of a row in an image
library when it is selected;
tr.ms-highlight
used in selected pictures
view
Background for thumbnails
in thumbnails view; border
.ms-imglibthumbnail
color should be same with
img.thumbnail above
span.thumbnail,
span.userdata Internal usage; do not alter
Background of previous
.ms-imglibmenuarea and next command in
filmstrip view
a.ms-
imglibPreviewTitle,
table.ms-
Internal usage; do not alter
imglibPreviewTable
Shaded areas inside Web
.UserShadedRegion
Parts
Text areas inside Web
.UserCaption
Parts
Text areas inside Web
.UserConfiguration
Parts
.UserDottedLine Dotted line in Web Parts
.UserButton,
.UserInput,
.UserSelect Input boxes in Web Parts
Text areas inside Web
.UserNotification
Parts
.
Spacing for elements on a
UserToolBarTextAre
toolbar inside Web Parts
a
.
UserToolBarTextAre
a a: link,
.
UserToolBarTextAre
a a: visited,
.
UserToolBarTextAre
a a: hover,
.
UserToolbarDisabled
Link,
.UserToolbarImage,
.
UserToolBarImageAr
ea,
.
Elements in a toolbar in a
UserToolbarSelectedI
Web Part
mage
Header text inside Web
.UserGenericHeader
Parts
Default text inside Web
.UserGeneric
Parts
Indented body text inside
.UserGenericBody
Web Parts
Generic text to be used in
.UserGenericText
all Web Parts
Background area inside
.UserBackground
Web Parts
Form title inside Web
.UserSectionTitle
Parts
Control labels inside Web
.UserSectionHead
Parts
Instructional text on a
.UserSectionBody
control inside a Web Part
Area of a form control
.UserControlGroup
inside Web Parts
Area at bottom of user
.UserSectionFooter form containing dotted line
and command buttons
.UserFooter Area at bottom of a form
Command button area at
.UserCommandArea
bottom of user form
.UserToolbar Toolbar inside Web Parts
A selected cell in a Web
.UserCellSelected
Part
.UserCell A cell in a Web Part
.
A bulleted item in a Web
UserGenericBulletIte
Part
m
Background of Web Part
.ms-ToolPaneFrame
tool pane interior
Body of Web Part tool
.ms-ToolPaneBody
pane
Border around Web Part
.ms-ToolPaneBorder
tool pane
Header of Web Part tool
.ms-ToolPaneHeader
pane
Area around "x" button to
.ms-ToolPaneClose
close tool pane
.ms-ToolPaneTitle Title of tool pane
.ms-ToolPaneFooter Footer area of tool pane
Error messages that show
.ms-ToolPaneError
up in tool pane
Information messages that
.ms-ToolPaneInfo
show up in tool pane
.ms-ToolPartSpacing Spacing between parts
Hover treatment for
.ms-
toolstrip at top of Web Part
ToolStripSelected
tool pane
Toolstrip at top of Web
.ms-ToolStrip
Part tool pane
Header of Web Part tool
.ms-TPHeader
pane
Border of Web Part tool
.ms-TPBorder
pane
Title of Web Part tool
.ms-TPTitle
pane
.ms-TPBody,
.ms-TPBody A:link,
.ms-TPBody
A:visited,
Body of Web Part tool
.ms-TPBody A:hover
pane
Commands on Web Part
.ms-TPCommands
tool pane
Commands on Web Part
.ms-TPInput
tool pane
.ms-
Class used for "..." buttons
PropGridBuilderButt
in Web Part tool pane
on
Background of a dialog
.ms-
box spawned from Web
BuilderBackground
Part property sheet
.ms-SPZone Borders of a zone control
Borders of a zone control
.ms-SPZoneSelected when insertion bar is active
inside it
The insertion bar which
.ms-SPZoneIBar shows which zone the user
is dragging a part into
.ms-SPZoneLabel Label on a zone
Caption of text inside a
.ms-SPZoneCaption
zone
Background in a Web Part
.ms-WPDesign
design mode
.ms-WPMenu Area around menu
.ms-WPTitle,
.ms-WPTitle A:link,
.ms-WPTitle
A:visited,
.ms-WPTitle A:hover Title of a Web Part sample text
Border around Web Part
.ms-WPSelected
when it is selected
.ms-WPBody,
.ms-WPBody
TABLE,
.ms-TPBody TABLE,
.ms-WPBody A:link,
.ms-WPBody
A:visited,
.ms-WPBody
A:hover,
.ms-WPBody th,
.ms-TPBody th
.ms-WPBody TD,
.ms-WPBody h1,
.ms-TPBody h1,
.ms-WPBody h2,
.ms-TPBody h2,
.ms-WPBody h3,
.ms-TPBody h3,
.ms-WPBody h4,
.ms-TPBody h4,
.ms-WPBody h5,
.ms-TPBody h5,
.ms-WPBody h6,
.ms-TPBody h6 Contents of a Web Part
.ms-WPBorder Border around a Web Part
.ms-HoverCellActive,
.ms-
HoverCellInActive,
.ms- Cell treatment on Hover
HoverCellActiveDark throughout UI
.ms-SPLink,
.ms-SPLink A:link,
.ms-SPLink A:visited "Modify Page" link
.ms-SPButton Font for buttons
.ms- Vertical spacing between
PartSpacingVertical Web Parts
.ms-
Horizontal spacing
PartSpacingHorizonta
between Web Parts
l
Background area of a Web
.ms-WPHeader
Part title bar
.ms-
rtApplyBackground,
.ms-
tbButtonMouseOver
Down,
.ms-
Rich text editor classes
rtRemoveBackground
Subscriptions: Used for
"Frequency: Immediate"
.ms-
etc. section headers on
subsmanageheader
MySubs.aspx /
SiteSubs.aspx
Used for each subscription
.ms-subsmanagecell
row
Error messages when
.ms-ConnError
authoring connections

Adds underline for


description, items, and last
.ms-underline
modified text on list of
lists page

Same as ms-underline but


adds a slight gray to
.ms-underlineback
background, used for titles
of list of lists page
Background of gray and
.ms-back
spacing
Used for group names
.ms-smallheader (e.g., Document Libraries)
on the list of lists page
Used as underline for
.ms-smallsectionline group names on list of lists
page
.ms-tabselected,
.ms-tabinactive,
.ms-tabinactive
a:link,
.ms-tabinactive
a:hover,
.ms-tabinactive
a:visited,
.ms-tabinactive Used for tabs in a Meeting
a:hover Workspace
.ms-surveyHBar,
.ms-surveyHBarB,
.ms-surveyVBar,
.ms-surveyVBarB,
.ms-surveyVBarBI,
.ms-surveyVBarS,
.ms-surveyVBarT,
.ms-surveyVBarTC,
Survey Graphical
.ms-surveyHR,
Summary View

Vertical bars in a
chart for rating
questions

Survey Graphical
.ms-surveyTotal
Summary View
Spacers between
vertical bars in chart
for ratings questions

Border around multi-file


.ms-uploadborder
upload control

Background for selected


.ms-uploadcontrol text in file list in multi-file
upload control
.ms-
spaceBetContentAnd
Button,
.ms-
ButtonHeightWidth,
.ms-
ButtonHeightWidth2,
.ms-
SpaceBetButtons,
.ms-
summarycustombody
,
.ms-
summarystandardbod Internal usage; do not alter
y
.ms-stylebox,
.ms-stylelabel,
.ms-styleheader,
.ms-styleheader
a:link,
.ms-stylebody a:link,
.ms-styleheader
a:visited,
.ms-stylebody
a:visited,
.ms-stylebody,
.ms-styleheader
a:hover,
Classes used by boxed
.ms-stylebody view styles such as
a:hover Document Details, Issues
Boxed, etc.

Background color for


.ms-alternating
shaded view style

.ms-
MWSSelectedInstanc
e,
.ms-MWSInstantiated
a:link,
.ms-MWSInstantiated
a:visited,
.ms-MWSInstantiated
a:hover
.ms-
MWSUninstantiated
a:link,
.ms-
MWSUninstantiated
a:visited,

.ms- Classes for Meeting


MWSUninstantiated Workspace recurrence
a:hover navigation bar

Table 3. Style Sheet Class References for SPS.CSS


What it Containe
Selector Example
controls r
.ms-MenuUI SPS ECB menu <table>

Table cell
containing one
.ms-menuUIItemTableCell <td>
SPS ECB menu
item
SPS ECB menu
.ms-MenuUIItemTable <table>
item
Icon cell of one
.ms-MenuUIIcon SPS ECB menu <td>
item
.ms-MenuUILabel,
Label cell of one
.ms-MenuUILabelFont SPS ECB menu <td>
item
Table that
.ms-main contains entire <table>
portal page
Table that
contains the top
.ms-bannerframe <table>
banner portion
of the page.
Right table cell
.ms-banner <td>
of top banner
Wrapper over
.ms-phnav1wrapper horizontal <div>
navigation bar
Wrapper over
horizontal
navigation bar <div>,
.ms-navframe
or outer table of <table>
vertical
navigation bar
Outer table of
.ms-phnavtableone horizontal <table>
navigation bar
An area in
horizontal
navigation bar.
Note: (Sel) is
optional, only
appears as suffix
if area is
selected. [n] ==
.ms-phnavtableone[n](Sel) <table>
0 denotes
anchor area and
(as in Home) [n]
== 1 denotes
sub-areas of the
anchor area (as
in Topics and
News).
Top left of an
area in
.ms-phnavtopl[n](Sel) <td>
horizontal
navigation bar
Top center of an
area in
.ms-phnavtopc[n](Sel) <td>
horizontal
navigation bar
Top right of an
area in
.ms-phnavtopr[n](Sel) <td>
horizontal
navigation bar
Middle left of an
area in the
.ms-phnavmidl[n](Sel) <td>
horizontal
navigation bar
Middle center of
an area in the
.ms-phnavmidc[n](Sel) <td>
horizontal
navigation bar
Middle right of
an area in
.ms-phnavmidr[n](Sel) <td>
horizontal
navigation bar
Bottom left of
an area in
.ms-phnavbotl[n](Sel) <td>
horizontal
navigation bar
Bottom center
of an area in
.ms-phnavbotc[n](Sel) <td>
horizontal
navigation bar
Bottom right of
an area in
.ms-phnavbotr[n](Sel) <td>
horizontal
navigation bar
Middle section
of page that <td>,
.ms-titleareaframe includes page <div>,
icon, page title, <table>
and search box
Table cell
.ms-titlearea containing <td>
portal title
Table cell
.ms-pagetitle containing page <td>
title
.ms-sbrow Search box <tr>
.ms-sbtable,
Applied to table
.ms-searchform cells of search <td>
box
Applies the
corner gif to the
.ms-sbtopcorner <td>
top left corner of
the search box
Applies
corner .gif to
.ms-sblbcorner bottom-left <td>
corner of search
box
Search button
.ms-sbgo <td>
table cell
Horizontal line
.ms-titlearealine underneath title <td>
area
Grey section
running down
left side of page
.ms-navframe that contains <table>
navigation
elements and
action bar
Container for
.ms-nav ms-navframe <td>
table
Table cell that
contains
Microsoft Office
.ms-navwatermark Sharepoint <td>
Portal Server
watermark on
home page

Vertical
.ms-pvnav <table>
navigation bar

Title of vertical
.ms-navheader <td>
navigation bar
An area in the
.ms-pvnavtableone1 vertical
navigation bar.
Top left of an
.ms-pvnavtopl1 area in vertical <td>
navigation bar
Top center of an
.ms-pvnavtopc1 area in vertical <td>
navigation bar
Top right of an
.ms-pvnavtopr1 area in vertical <td>
navigation bar
Middle left of an
.ms-pvnavmidl1 area in vertical <td>
navigation bar
Middle center of
an area in
.ms-pvnavmidc1 <td>
vertical
navigation bar
Middle right of
an area in
.ms-pvnavmidr1 <td>
vertical
navigation bar
Bottom left of
an area in
.ms-pvnavbotl1 <td>
vertical
navigation bar
.ms-pvnavbotc1 Bottom center <td>
of an area in
vertical
navigation bar
Bottom right of
an area in
.ms-pvnavbotr1 <td>
vertical
navigation bar

.ms-pvtb Vertical toolbar <table>

Vertical toolbar
.ms-pvtbt title and toolbar <td> Title and separator:
separator

Separator alone:

Table cell
containing
.ms-pvtbicon <td>
vertical toolbar
button icon
Table cell
containing
.ms-pvtbbutton <td>
vertical toolbar
button text
Main content
.ms-bodyareaframe <td>
section of page
Table used for
layout of Web
.ms-tztable Part zones on <table>
portal area
pages
Top table cell of
.ms-tztop Web Part layout <td>
table
Middle left table
.ms-tzmidleft cell of Web Part <td>
layout table
Middle right
table cell of the
.ms-tzmidright <td>
Web Part layout
table
Wrapper of
.ms-tzmrdiv content in <div>
middle right cell
Wrapper of
content in
.ms-srchtzmrdiv middle right cell <div>
on search.aspx
page
Bottom table
.ms-tzbottom cell of Web Part <td>
layout table

One listing
group inside
.ms-ls <table>
Area Listing
Web Part

Text of listing
group title in
Area Listing
.ms-portaltitle Web Part or <td> Listing group title:
Title of Table of
Contents Web
Part

Table of Contents Web Part


title:

Icon cell of a
.ms-lstopitemicon Listing item in <td>
Topic Item view
Title cell of a
.ms-lstopitemlink Listing item in <td>
Topic Item view
.ms-lstopitemdesc Description cell <td>
of a Listing item
in Topic Item
view
Title cell of a
Listing item in
.ms-lsmin <td>
Minimum and
Compact view
Title and
description cell
.ms-lsnorm <td>
of a Listing item
in Normal view
Image cell, title
and description
.ms-lsexp cell of a Listing <td>
item in
Expanded view
Tile of a Listing
.ms-lstitle item in <a>
Expanded view
Tile of the Area
.ms-lswptitle Listing Web <td>
Part

Vertical
.ms-location breadcrumb trail <table>
Web Part

Vertical
.ms-locationhead breadcrumb trail <td>
title
Table cell
containing
.ms-locationicon(sel) vertical <td>
breadcrumb trail
icon
Table cell
containing
.ms-locationbutton(sel) vertical <td>
breadcrumb trail
button text
Horizontal
.bc-htable breadcrumb trail <table>
Web Part
.bc-cell Table cell <td>
containing
content of
horizontal
breadcrumb trail
Web Part
Lead-in text part
of horizontal
.bc-leadin <span>
breadcrumb trail
Web Part
Trail text part of
horizontal
.bc-trail <span>
breadcrumb trail
Web Part
Area Details
.ms-catdesc <table>
Web Part

Icon cell of the


.ms-catdescicon Area Details <td>
Web Part
Description cell
.ms-catdesctext of the area <td>
details Web Part
Contact cell of
.ms-contactbox Area Details <td>
Web Part
Grey box
displaying
.ms-contactboxbg <table>
contact person
for current area
Picture of
.ms-catdescimage <td>
contact person
Name of contact
.ms-catdesccontact <td>
person
Table of
.ms-toc Contents Web <table>
Part
One child area
in the Table of
.ms-toccat <td>
Contents Web
Part

Image and
.ms-catindent ndentation <td>
column

Title of child
.ms-toccattitle <td>
area
.ms-catsectionline Section line <td>
under child area
title
Description cell
.ms-toccatitem <td>
of child area
Contains
subareas and
.ms-tocitems <td>
listings of child
areas
Contains listings
of child areas;
HTML
container is
.ms-catlsts <span> in Table <span>
of Contents in
horizontal mode
and <table> in
vertical mode
<table> Horizontal:

Vertical:

Contains
subareas of
child areas;
HTML
container is
<span> in
.ms-catsubcats Table of <span>
Contents in
horizontal
mode and
<table> in
vertical
mode
<table> Horizontal:

Vertical:
Page icon
on site
.ms-pageidi <td>
admin
pages
Vertical
.ms-colspace <td>
spacer
Page
identificatio
.ms-pageidtapt n section of <table>
site admin
pages
Breadcrum
b trail cell
.ms-pageidta on site <td>
admin
pages
Page title
on site
.ms-pageidpt <td>
admin
pages

View
.ms-view <table>
selector

View
.ms-viewhead selector <td>
title
Icon cell for
one view in
.ms-viewicon(sel) <td>
view
selector
Text cell
for one
.ms-button(sel) view in <td>
view
selector
.ms-formspacer Space <td>
padding on
site admin
page forms
Title of
item in
.ms-srchTitle <td>
search
result
Sets
vertical
alignment
for table
.ms-srchAlignTop <td>
cells in
search
result to
Top
Cell
displaying
full URL of
.ms-srchUrl <td>
item in
search
result
Cell
displaying
possible
.ms-srchActions <td>
actions on
search
result item
Conclusion
This article concludes the Customizing SharePoint Sites and Portals series. For more information
see Customizing SharePoint Sites and Portals, Part 1 and Customizing SharePoint Sites and
Portals: Using Templates and Site Definitions, Part 2.
Additional References

You might also like