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
Transcript
Creating Site Definitions for Windows SharePoint Services
Patrick TisseghemU2U
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 DefinitionsCreating the Seminar Site DefinitionCreating the List DefinitionSummaryAdditional ResourcesAbout 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.
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.
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.
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).
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.
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.
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.
Dynamic information is rendered on the page using ASP.NET server controls that are specific to Windows SharePoint Services.
o Microsoft.SharePoint.WebControls.ProjectProperty renders the title and the description of the team site.
o Microsoft.SharePoint.WebControls.ViewSearchForm renders the search box.o Microsoft.SharePoint.WebControls.PortalConnection renders the link to the
parent site, which can be either a portal or a team site.o Microsoft.SharePoint.WebPartPages.AuthenticationButton renders a possible
Sign In button when anonymous access is allowed.o 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:
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.
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.
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.
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.
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:
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.
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.
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.
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 ([email protected]) 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-onJinger ZhaoMicrosoft 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
IntroductionCustomizing a PortalSharePoint Sites vs. Portal AreasCustomizing a SharePoint SiteUsing FrontPage to Change Site AppearanceConclusion
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:
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\CONFIG3. 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-onJinger ZhaoMicrosoft 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
IntroductionCreating Custom TemplatesCreating Site DefinitionsUsing Site ConfigurationsUsing ModulesField Definitions Using SCHEMA.XMLCustomizing Portal Areas Using TemplatesGuidelines for Using Templates and Site DefinitionsConclusion
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\XML5. 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 File
Location Description
WEBTEMP.XMLLocal_drive:\Program Files\Common Files\Microsoft Shared\Web server extensions\60\TEMPLATE\1033\XML
Specifies configurations of lists and modules for a
site definition.
ONET.XMLLocal_drive:\Program Files\Common Files\Microsoft Shared\Web server extensions\60\TEMPLATE\1033\*\XML
Defines navigation bars such as the top link bar and the quick launch, available lists, document templates, base types, configurations, modules
SCHEMA.XML Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\1033\Custom_Site_Template\LISTS
Defines the columns, views, and contents of a 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.
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"
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
DescriptionOptional Text. Contains the description of the site configuration that appears on the Template Selection page.
HiddenOptional Boolean. Specifies whether the site configuration appears as an option on the Template Selection page.
ID Required Integer. Specifies a unique ID for the configuration.
ImageUrlURLOptional Text. Contains the URL for the preview image displayed on the Template Selection page.
Name Optional Text. Contains the name of the configuration.
TitleOptional Text. Contains the title of the configuration that is displayed on the 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:
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:
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 HtmlEncodeon 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 Server3. 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:
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.
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 toSPS HomeSPSBWEB To create bucket Web sitesSPSCOMMU CommunitiesSPSMSITE Site RegistrySPSNEWS Subareas under NewsSPSNHOME News HomeSPSPERS MySiteSPSTOC Topics HomeSPSTOPIC 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: o Subareas can use any template (in the list of available area templates)o 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:
o 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.
o 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.
o 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
o
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 3o Win32 and COM Development
MSDNPlease WaitMSDN LibraryPlease WaitWeb DevelopmentPlease WaitSharePoint Products and Technologie...
Please WaitSharePoint Products and Technologie...Please WaitTechnical ArticlesPlease Wait Customizing SharePoint Sites and Po...SharePoint Products & Technologies (2003) Technical ArticlesCustomizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3
Dino Dato-onJinger ZhaoMicrosoft 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
IntroductionTable 1. Web Part Gallery Compatibility Table 2. Style sheet Class References for OWS.CSSTable 3. Style Sheet Class References for SPS.CSSConclusion
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
Web Part name File nameSupported on
portal sitesSupported on other
SharePoint sitesTopic Assistant Suggestions
Autocat.dwp Yes
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 YesImage Web Part MSImage.dwp Yes YesMembers MSMembers.dwp YesPage Viewer MSPageViewer.dwp Yes YesForm Web Part MSSimpleForm.dwp Yes YesXML Web Part MSXml.dwp Yes YesYour Recent Documents
Mydocs.dwp Yes
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 YesContacts Yes YesEvents Yes YesGeneral Discussions Yes YesLinks Yes YesShared Documents Yes YesTasks Yes YesMy Checked-out Yes YesPending Approvals Yes Yes
Document Library Yes YesImage Library Yes Yes
Table 2. Style sheet Class References for OWS.CSS
Selector What it controls Example
body, formSets margin of body or form to 0
body Sets margin of body to 0
.ms-mainDetermines color of border at right margin of each page
.ms-toolbar,
table.ms-toolbarSets text and gradient in list toolbars
.ms-rtetoolbarmenu,
.ms-rtetoolbarunsel,
.ms-rtetoolbarsel,
.ms-rtetoolbardis, a.ms-rtetoolbardis,
.ms-rtetoolbarhovDefines look of rich text editor
.ms-gridT1
Type of rating scale for Survey lists, such as "Low, Medium, High" of a rating scale question
.ms-viewselect a:link,
.ms-GRFontSizeText for available views in left navigation for a list
Text size in datasheet control
selectFonts for any drop-down or check box items in List customization pages
hr Defines HR properties
.ms-formlabel
Formats names of form fields when creating or editing a list item or adjusting site settings
.ms-formdescription A
Formats hyperlinks that appear in form descriptions such as "Click here to test"
.ms-formtable,
.ms-formbody
Text of each field in list item; for example, form for a "New Item" for any of the default lists
.ms-radiotext Text in a survey when you use option (radio) buttons for the choice
.ms-gridtext Text of question on a rating scale style question in a Survey
.ms-formbody
Text of each field in a list item; for example, the form for a "New Item" for any of the default lists
.ms-formbody FONTDefines font characteristics for the formbody class
.ms-formdescriptionInstruction text on form fields
Example: "Enter date in M/D/YYYY format" text when creating or editing a new list item.
.ms-formdescription style
.ms-searchbox,
.ms-searchform,
.ms-searchcornerSearch form field on home page
table.ms-form th Table header for forms
table.ms-form td Internal usage; do not alter
.ms-formrecurrence Text that describes recurrence patterns
.ms-long Text in non-date form fields when creating or editing a list item
.ms-long style
.ms-longer Used by rich text editor
.ms-italic Italic font
.ms-bold Bold font
.ms-bannerframe,
.ms-GRHeaderBackgroun
d,
.ms-storMeFreeNavigation bar banner background at top of each page
.ms-banner a:link.
.ms-banner a:visitedWhite hyperlink text in navigation bar banner at top of each page
.ms-banner a:link,
.ms-banner a:visitedWhite hyperlink text in the navigation bar banner at top of each page
.ms-banner,
.ms-GRHeaderText White text in top banner
.ms-nav td,
.ms-nav,
.ms-SPZoneLabel,
.ms-input"Select a View" text in a list page
Input boxes for non-text (currency, date/time, etc.)
.ms-nav cell style
.ms-nav th Text in Quick Launch area on home page
.ms-nav header cell style
.ms-navheader a,
.ms-navheader a:link,
.ms-navheader a:visited
Section headings on Quick Launch bar
.ms-navframe,
.ms-GRStatusBar Color behind Quick Launch bar and around datasheet
.ms-storMeUsed,
.ms-storMeFilterBarUsed on storage management page
.ms-navline Line dividing sections of left bar on list views
.ms-navwatermark "Quick Launch" text on the Quick Launch bar
.ms-selectednav,
.ms-GRSortFilter
Box around selected view on list view page; used for a selected column in datasheet
.ms-unselectednav Unselected text on Quick Launch bar
.ms-verticaldots
Graphical separator that appears between main body and left margin of page (no longer used)
.ms-nav a
.ms-nav a:link
.ms-nav a:hover
.ms-nav a:visitedText in left navigation of the Quick Launch bar
Examples : The words "Shared Documents" "Tasks"
.ms-titlearea
The site name that appears on each page above the page title (by default the words "Team Web Site")
.ms-titlearea style
TD.ms-titleareaframe Upper portion of border at left margin of the page
Div.ms-titleareaframe Yellow line above title area of a page
.ms-titlearealine,
.ms-storMeEstimated
Yellow line below title and above list toolbar; also used on storage management page
.ms-bodyareaframe Area below title
.ms-pagetitle Title text on each page .ms-pagetitle style
.ms-pagetitle a,
.ms-pagetitle a:hoverHyperlinks that appear with title text
.ms-pagetitle hyperlink style
.ms-pagecaptionCaption above title for a Web Part Page
.ms-selected,
.ms-selected SPAN
Background of selected items in Save or Save As dialog box when saving to a document library
.ms-selected style
.ms-selectedtitleBackground on hover for a list item
.ms-unselectedtitleBackground for a list item when not selected
.ms-menuimagecellBackground color of arrow next to item title for context menu
.ms-filedialog td
List of selected shared documents in Save or Save As dialog box when saving to a document library
.ms-descriptiontext Description text for a list, description text on admin forms and new list forms
.ms-dspadapterlist Internal usage; do not alter
.ms-alerttextError messages on form submissions
.ms-separator Lines between menu items on list toolbars
.ms-authoringcontrols Right side background color on admin pages
.ms-sectionheaderText in section headings on a page
Example: "Administration" on the Site Settings page
.ms-sectionheader style
.ms-sectionheader a,
.ms-sectionheader a:hover,
.ms-sectionheader a:visited
Section titles in view creation form that expand and collapse
.ms-sectionlineHorizontal lines between page sections
.ms-partline
Line between list items and "Add new list item" in a summary view style (used on home page)
.ms-propertysheet,
.ms-propertysheet th,
.ms-propertysheet a,
.ms-propertysheet a:hover
Text in list settings pages and in the Site Settings pages
Examples: "Go Back to Shared Documents"
Text under settings such as "Use a filter to display..."
.ms-itemheader a List and document library names on the Documents & Lists page
.ms-discussiontitle Subject of an open discussion item
.ms-discussiontitle style
.ms-vh,
.ms-vh2 Text of column headings of lists
ms-vh hyperlink style
.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,
.ms-vh-right-icon-empty
Used for icons next to view headers, such as attachment icon, and 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,
.ms-vh-right a:hoverText of hyperlinks for column headings of lists
.ms-vh hyperlink style
.ms-vhImage Used in header images
.ms-gbDefines "group-by" view headers
.ms-gb2Defines the "group-by" 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,
.ms-vb2Text in body of a view and most other common text
Icons classes are used to indicate items such as attachments
.ms-homepagetitleTitle on home page of a Meeting Workspace
a.ms-addnew
td.ms-addnew"Add new..." text on summary view of lists
.ms-error Error messages on form submissions
.ms-cal Border type and font formatting used in day cells of Calendar view
.ms-calWeek,
.ms-vcal,
.ms-Dcal Used in Calendar view
.ms-caltop Top border of each day cell in Calendar view
.ms-caltop style
.ms-calhead,
.ms-calhead a,
.ms-calhead a:hoverHeader containing month name and navigation arrows in Calendar view
.ms-calhead style
.ms-caldow Row of cells containing weekday names in Calendar view
.ms-caldow style
.ms-calmid Left and right borders on each day cell in Calendar view
.ms-calmid style
.ms-CalSpacer Spacer used between multiple appointments on same day
.ms-calspacer style
.ms-CalVSpacer Used in Calendar view
.ms-CalAllDay Calendar view all day events
.ms-firstCalHour Calendar view first row's TD containing time
.ms-calHour Calendar view TD containing time
.ms-calHalfHour Calendar view TD containing half hour marks
.ms-calQuarterHour Calendar view TD between hour and hour hour TDs
.ms-calbot Calendar view horz day & week, bottom row
.ms-appt a,
.ms-appt a:hoverHyperlink text of event that spans multiple days in Calendar view
.ms-appt,
.ms-GRCellSelect
Background, border and text of event that spans multiple days in Calendar view
.ms-appt style
.ms-Dappt Appointments displayed in "day view"
.ms-Vappt,
.ms-Vappt a,
.ms-Vappt a:link,
.ms-Vappt a:hoverAppointments displayed in the vertical day view
.ms-apptsingle Text of appointment that lasts a single day
.ms-apptsingle
.ms-Dapptsingle Appointments displayed in "day view" with no duration is set
.ms-Vapptsingle,
.ms-Vapptsingle a,
.ms-Vapptsingle a:link,
.ms-Vapptsingle a:hover
Appointments displayed in the "day view" with no duration is set
.ms-caldowdown Down-level browser support calendar table cell
.ms-caldownDown-level browser support calendar day of week
.ms-datepickeriframe
Position of date chooser pop-up calendar when creating or editing new list item
.ms-datepicker Date chooser pop-up calendar when creating or editing new list item
.ms-datepicker style
.ms-dpdow
Line under weekday names in date chooser pop-up calendar when creating or editing new list item
.ms-dpdow style
.ms-dpday
Text of date numerals in the current month in the date chooser pop-up calendar when creating or editing a new list item
.ms-dpday style
.ms-dpselectedday
Text and background of selected date in date chooser pop-up calendar when creating or editing new list item
.ms-dpselectedday style
.ms-dpnonmonth
Text of date numerals which are not part of current month in date chooser pop-up calendar when creating or editing new list item
.ms-dpnonmonth style
.ms-dphead
Header containing month name and navigation arrows in date chooser pop-up calendar when creating or editing new list item
.ms-dphead style
.ms-dpnextprev Arrows in date picker for moving from one month to next or previous
.ms-dpfoot
"Today's date" text and line above it in date chooser pop-up calendar when creating or editing new list item
.ms-dpfoot style
IMG.ms-button Sets cursor to hand for buttons
.ms-announcementtitle
Titles in Announcements list view on home page
.ms-announcementtitle style
.ms-homepagetitle:Hover
List name in a list view
Example : The words "Announcements", "Events", and "Links" on the default.htm page
.ms-homepagetitle style
.ms-discussionseparator
Space between discussion threads
.ms-summarytitlebarframe,
.ms-summarytitlebar a:link,
.ms-summarytitlebar a:visited,
.ms-summarytitlebar,
.ms-summarytitlebartitle,
.ms- summarytitlebartitle:hover
Unused
img.thumbnail
Image Libraries: Color behind thumbnail in Image Preview area on left navigation bar
tr.ms-imglibselectedrow,
tr.ms-highlight
Color of a row in an image library when it is selected; used in selected pictures view
.ms-imglibthumbnail
Background for thumbnails in thumbnails view; border color should be same with img.thumbnail above
span.thumbnail, span.userdata Internal usage; do not alter
.ms-imglibmenuareaBackground of previous and next command in filmstrip view
a.ms-imglibPreviewTitle,
table.ms-imglibPreviewTable
Internal usage; do not alter
.UserShadedRegion Shaded areas inside Web
Parts
.UserCaptionText areas inside Web Parts
.UserConfigurationText areas inside Web Parts
.UserDottedLine Dotted line in Web Parts
.UserButton,
.UserInput,
.UserSelect Input boxes in Web Parts
.UserNotificationText areas inside Web Parts
.UserToolBarTextArea
Spacing for elements on a toolbar inside Web Parts
.UserToolBarTextArea a: link,
.UserToolBarTextArea a: visited,
.UserToolBarTextArea a: hover,
.UserToolbarDisabledLink,
.UserToolbarImage,
.UserToolBarImageArea,
.UserToolbarSelectedImage
Elements in a toolbar in a Web Part
.UserGenericHeaderHeader text inside Web Parts
.UserGenericDefault text inside Web Parts
.UserGenericBodyIndented body text inside Web Parts
.UserGenericTextGeneric text to be used in all Web Parts
.UserBackgroundBackground area inside Web Parts
.UserSectionTitleForm title inside Web Parts
.UserSectionHeadControl labels inside Web Parts
.UserSectionBodyInstructional text on a control inside a Web Part
.UserControlGroupArea of a form control inside Web Parts
.UserSectionFooterArea at bottom of user form containing dotted line and command buttons
.UserFooter Area at bottom of a form
.UserCommandAreaCommand button area at bottom of user form
.UserToolbar Toolbar inside Web Parts
.UserCellSelected A selected cell in a Web Part
.UserCell A cell in a Web Part
.UserGenericBulletItem
A bulleted item in a Web Part
.ms-ToolPaneFrameBackground of Web Part tool pane interior
.ms-ToolPaneBodyBody of Web Part tool pane
.ms-ToolPaneBorderBorder around Web Part tool pane
.ms-ToolPaneHeaderHeader of Web Part tool pane
.ms-ToolPaneCloseArea around "x" button to close tool pane
.ms-ToolPaneTitle Title of tool pane
.ms-ToolPaneFooter Footer area of tool pane
.ms-ToolPaneErrorError messages that show up in tool pane
.ms-ToolPaneInfoInformation messages that show up in tool pane
.ms-ToolPartSpacing Spacing between parts
.ms-ToolStripSelected
Hover treatment for toolstrip at top of Web Part tool pane
.ms-ToolStripToolstrip at top of Web Part tool pane
.ms-TPHeaderHeader of Web Part tool pane
.ms-TPBorderBorder of Web Part tool pane
.ms-TPTitleTitle of Web Part tool pane
.ms-TPBody,
.ms-TPBody A:link,
.ms-TPBody A:visited,
.ms-TPBody A:hoverBody of Web Part tool pane
.ms-TPCommandsCommands on Web Part tool pane
.ms-TPInputCommands on Web Part tool pane
.ms-PropGridBuilderButton
Class used for "..." buttons in Web Part tool pane
.ms-BuilderBackground
Background of a dialog box spawned from Web Part property sheet
.ms-SPZone Borders of a zone control
.ms-SPZoneSelectedBorders of a zone control when insertion bar is active inside it
.ms-SPZoneIBarThe insertion bar which shows which zone the user is dragging a part into
.ms-SPZoneLabel Label on a zone
.ms-SPZoneCaptionCaption of text inside a zone
.ms-WPDesignBackground in a Web Part 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
.ms-WPSelectedBorder around Web Part 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-HoverCellActiveDark
Cell treatment on Hover throughout UI
.ms-SPLink,
.ms-SPLink A:link,
.ms-SPLink A:visited "Modify Page" link
.ms-SPButton Font for buttons
.ms-PartSpacingVertical
Vertical spacing between Web Parts
.ms-PartSpacingHorizontal
Horizontal spacing between Web Parts
.ms-WPHeaderBackground area of a Web Part title bar
.ms-rtApplyBackground,
.ms-tbButtonMouseOverDown,
.ms-rtRemoveBackground
Rich text editor classes
.ms-subsmanageheader
Subscriptions: Used for "Frequency: Immediate" etc. section headers on MySubs.aspx / SiteSubs.aspx
.ms-subsmanagecellUsed for each subscription row
.ms-ConnErrorError messages when authoring connections
.ms-underline
Adds underline for description, items, and last modified text on list of lists page
.ms-underlineback
Same as ms-underline but adds a slight gray to background, used for titles of list of lists page
.ms-backBackground of gray and spacing
.ms-smallheaderUsed for group names (e.g., Document Libraries) on the list of lists page
.ms-smallsectionlineUsed as underline for 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 a:hover
Used for tabs in a Meeting Workspace
.ms-surveyHBar,
.ms-surveyHBarB,
.ms-surveyVBar,
.ms-surveyVBarB,
.ms-surveyVBarBI,
.ms-surveyVBarS,
.ms-surveyVBarT,
.ms-surveyVBarTC,
.ms-surveyHR,Survey Graphical Summary View
Vertical bars in a chart for rating questions
.ms-surveyTotalSurvey Graphical Summary View
Spacers between vertical bars in chart for ratings questions
.ms-uploadborder Border around multi-file upload control
.ms-uploadcontrol Background for selected text in file list in multi-file upload control
.ms-spaceBetContentAndButton,
.ms-ButtonHeightWidth,
.ms-ButtonHeightWidth2,
.ms-SpaceBetButtons,
.ms-summarycustombody,
.ms-summarystandardbody
Internal usage; do not alter
.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,
.ms-stylebody a:hover
Classes used by boxed view styles such as Document Details, Issues Boxed, etc.
.ms-alternatingBackground color for shaded view style
.ms-MWSSelectedInstance,
.ms-MWSInstantiated a:link,
.ms-MWSInstantiated a:visited,
.ms-MWSInstantiated a:hover
.ms-MWSUninstantiated a:link,
.ms-MWSUninstantiated a:visited,
.ms-MWSUninstantiated a:hover
Classes for Meeting Workspace recurrence navigation bar
Table 3. Style Sheet Class References for SPS.CSS
SelectorWhat it controls
Container
Example
.ms-MenuUI SPS ECB menu <table>
.ms-menuUIItemTableCell
Table cell containing one SPS ECB menu item
<td>
.ms-MenuUIItemTableSPS ECB menu item
<table>
.ms-MenuUIIconIcon cell of one SPS ECB menu item
<td>
.ms-MenuUILabel,
.ms-MenuUILabelFontLabel cell of one SPS ECB menu item
<td>
.ms-mainTable that contains entire portal page
<table>
.ms-bannerframe
Table that contains the top banner portion of the page.
<table>
.ms-bannerRight table cell of top banner
<td>
.ms-phnav1wrapperWrapper over horizontal navigation bar
<div>
.ms-navframe
Wrapper over horizontal navigation bar or outer table of vertical navigation bar
<div>, <table>
.ms-phnavtableone Outer table of <table>
horizontal navigation bar
.ms-phnavtableone[n](Sel)
An area in horizontal navigation bar. Note: (Sel) is optional, only appears as suffix if area is selected. [n] == 0 denotes anchor area and (as in Home) [n] == 1 denotes sub-areas of the anchor area (as in Topics and News).
<table>
.ms-phnavtopl[n](Sel)
Top left of an area in horizontal navigation bar
<td>
.ms-phnavtopc[n](Sel)
Top center of an area in horizontal navigation bar
<td>
.ms-phnavtopr[n](Sel)
Top right of an area in horizontal navigation bar
<td>
.ms-phnavmidl[n](Sel)
Middle left of an area in the horizontal navigation bar
<td>
.ms-phnavmidc[n](Sel)
Middle center of an area in the horizontal navigation bar
<td>
.ms-phnavmidr[n](Sel)
Middle right of an area in horizontal navigation bar
<td>
.ms-phnavbotl[n](Sel) Bottom left of an area in horizontal
<td>
navigation bar
.ms-phnavbotc[n](Sel)
Bottom center of an area in horizontal navigation bar
<td>
.ms-phnavbotr[n](Sel)
Bottom right of an area in horizontal navigation bar
<td>
.ms-titleareaframe
Middle section of page that includes page icon, page title, and search box
<td>, <div>, <table>
.ms-titleareaTable cell containing portal title
<td>
.ms-pagetitleTable cell containing page title
<td>
.ms-sbrow Search box <tr>
.ms-sbtable,
.ms-searchformApplied to table cells of search box
<td>
.ms-sbtopcorner
Applies the corner gif to the top left corner of the search box
<td>
.ms-sblbcorner
Applies corner .gif to bottom-left corner of search box
<td>
.ms-sbgoSearch button table cell
<td>
.ms-titlearealineHorizontal line underneath title area
<td>
.ms-navframe Grey section running down left side of page that contains navigation elements and
<table>
action bar
.ms-navContainer for ms-navframe table
<td>
.ms-navwatermark
Table cell that contains Microsoft Office Sharepoint Portal Server watermark on home page
<td>
.ms-pvnavVertical navigation bar
<table>
.ms-navheaderTitle of vertical navigation bar
<td>
.ms-pvnavtableone1An area in the vertical navigation bar.
.ms-pvnavtopl1Top left of an area in vertical navigation bar
<td>
.ms-pvnavtopc1Top center of an area in vertical navigation bar
<td>
.ms-pvnavtopr1Top right of an area in vertical navigation bar
<td>
.ms-pvnavmidl1Middle left of an area in vertical navigation bar
<td>
.ms-pvnavmidc1
Middle center of an area in vertical navigation bar
<td>
.ms-pvnavmidr1
Middle right of an area in vertical navigation bar
<td>
.ms-pvnavbotl1
Bottom left of an area in vertical navigation bar
<td>
.ms-pvnavbotc1
Bottom center of an area in vertical navigation bar
<td>
.ms-pvnavbotr1
Bottom right of an area in vertical navigation bar
<td>
.ms-pvtb Vertical toolbar <table>
.ms-pvtbtVertical toolbar title and toolbar separator
Table cell containing vertical breadcrumb trail button text
<td>
.bc-htableHorizontal breadcrumb trail Web Part
<table>
.bc-cell Table cell containing content of horizontal
<td>
breadcrumb trail Web Part
.bc-leadin
Lead-in text part of horizontal breadcrumb trail Web Part
<span>
.bc-trail
Trail text part of horizontal breadcrumb trail Web Part
<span>
.ms-catdescArea Details Web Part
<table>
.ms-catdesciconIcon cell of the Area Details Web Part
<td>
.ms-catdesctextDescription cell of the area details Web Part
<td>
.ms-contactboxContact cell of Area Details Web Part
<td>
.ms-contactboxbg
Grey box displaying contact person for current area
<table>
.ms-catdescimagePicture of contact person
<td>
.ms-catdesccontactName of contact person
<td>
.ms-tocTable of Contents Web Part
<table>
.ms-toccat
One child area in the Table of Contents Web Part
<td>
.ms-catindentImage and ndentation column
<td>
.ms-toccattitleTitle of child area
<td>
.ms-catsectionline Section line <td>
under child area title
.ms-toccatitemDescription cell of child area
<td>
.ms-tocitems
Contains subareas and listings of child areas
<td>
.ms-catlsts
Contains listings of child areas; HTML container is <span> in Table of Contents in horizontal mode and <table> in vertical mode
<span>
<table> Horizontal:
Vertical:
.ms-catsubcats
Contains subareas of child areas; HTML container is <span> in Table of Contents in horizontal mode and <table> in vertical mode
<span>
<table> Horizontal:
Vertical:
.ms-pageidi
Page icon on site admin pages
<td>
.ms-colspaceVertical spacer
<td>
.ms-pageidtapt
Page identification section of site admin pages
<table>
.ms-pageidta
Breadcrumb trail cell on site admin pages
<td>
.ms-pageidpt
Page title on site admin pages
<td>
.ms-viewView selector
<table>
.ms-viewheadView selector title
<td>
.ms-viewicon(sel)
Icon cell for one view in view selector
<td>
.ms-button(sel)
Text cell for one view in view selector
<td>
.ms-formspacer Space padding on site admin
<td>
page forms
.ms-srchTitle
Title of item in search result
<td>
.ms-srchAlignTop
Sets vertical alignment for table cells in search result to Top
<td>
.ms-srchUrl
Cell displaying full URL of item in search result
<td>
.ms-srchActions
Cell displaying possible actions on search result item
<td>
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.
![Introduction to Windows [History of Windows] · Introduction to Windows [History of Windows] Desktop market share (2014) Timeline of Windows 1981 MS-DOS 1987 Win 2 1993 Win NT 1998](https://static.documents.pub/doc/80x56/5ec98fadf931947a177dd22d/introduction-to-windows-history-of-windows-introduction-to-windows-history-of.jpg)
