Customizing SharePoint Sites and Portals: Part 1

 

Dino Dato-on
Jinger Zhao
Microsoft Corporation

May 2004

Applies to:
    Microsoft® Windows® SharePoint™ Services
    Microsoft Office SharePoint Portal Server 2003
    Microsoft Office FrontPage® 2003

Summary: The first of three companion articles. Learn ways you can customize a SharePoint site and an area; manage users, sites, and templates; change the structure of pages in a site; manage user access; and optimize style sheets. Then go on in Customizing SharePoint Sites and Portals: Using Templates and Site Definitions, Part 2 to create and edit a site using templates and site definitions. Finally, see Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3. (14 printed pages)

Contents

Introduction
Customizing a Portal
SharePoint Sites vs. Portal Areas
Customizing a SharePoint Site
Using FrontPage to Change Site Appearance
Conclusion

Introduction

Microsoft® SharePoint™ Products and Technologies consists of Microsoft Office SharePoint Portal Server 2003 and Microsoft Windows® SharePoint Services. SharePoint Products and Technologies use Microsoft Windows Server™ 2003 and the .NET Framework. This latest version offers improvements in the customization, development, and deployment of an enterprise portal and team collaboration infrastructure.

Customization is the ability to change the layout, view, content, and site structure for a group of users such as a department or corporation. To help ensure consistency, Windows SharePoint Services and SharePoint Portal Server 2003 enable only Web Designers and Site Administrators full customization privileges for managing the look and feel of a site.

SharePoint Portal Server enables you to create Web portals that aggregate information from various sources into one convenient page. Team members and users can reach important business information, documents, and applications from one central access point.

The portal architecture and Web Part components determine how a site appears and manage all browser functions. Each portal site consists of reusable and customizable Web Parts that determine how information is presented. Administrators and site owners can use these components to customize how a Web portal looks and functions. You can modify existing Web Parts or create your own to achieve a unique look for your organization's site.

An individual user can also import Web Parts from a catalog or from Microsoft Office System applications to create his or her own personal portal view that organizes and presents only the information he or she wants.

Customizing a Portal

You can customize the portal to offer individual users a unique view based on their specific interests. You can push dynamic information to certain users that meet a particular set of credentials, are part of a group membership, have specific interests, or are in a particular job category.

The Portal Structure and How it Works

Windows SharePoint Services and SharePoint Portal Server 2003 support the portal structure. Windows SharePoint Services connects the Windows SharePoint Services components used to create individual SharePoint sites, and SharePoint Portal Server 2003 combines the Windows SharePoint Services-based sites into one convenient package.

The portal uses a front-end Microsoft Internet Information Services (IIS) Web server to store style sheets, templates and associated scripts, executable files, and dynamic-link libraries (DLLs) with an ISAPI filter. A Microsoft SQL Server™ database stores metadata for the content used to populate the panes in the templates. User customization and authorization information is also stored in the SQL Server database.

Figure 1. The portal structure

When a new portal is created, three databases are created to associate URLs with templates, templates with components and content, and pages with style sheets, and to store other metadata about the portal's pages.

Web pages are compiled into DLLs that are stored on the front-end server. When a page is requested from a client, the front-end server generates an SQL query to retrieve the metadata associated with the requested page. The front-end server combines the page with the metadata and delivers the combination to the client.

SharePoint Sites vs. Portal Areas

When planning for corporate environments such as an intranet portal or SharePoint site, you need to consider some of the differences between a Windows SharePoint Services site and a SharePoint Portal Server portal area. An area is a means of publishing and aggregating content using a navigational taxonomy, whereas a SharePoint site facilitates collaboration of team members using collaboration objects and custom lists. Users have unlimited view and editing access to the portal areas; by contrast, SharePoint sites are only available to members. Individual users can personalize a portal area in more ways than a SharePoint site.

Moreover, areas are based on the Windows SharePoint Services framework and offer a set of unique templates. You can determine whether to use a portal area, or a SharePoint site by deciding first what you intend to do with the site. In general, use areas and portals for information publishing, and SharePoint sites for online collaboration.

Create SharePoint sites when you want to collaborate across projects in the following ways:

  • Sharing and retaining versions of documents
  • Scheduling
  • Delegating and sharing tasks
  • Handling presence and messaging
  • Sharing and targeting information
  • Managing meetings

Create areas when you want to publish information such as the following:

  • Aggregated listings
  • Target audiences
  • Content for publishing
  • Document postings
  • Navigational taxonomy
  • User profiles
  • Lists
  • News
  • Managed spaces for users or subject-matter experts
  • Areas of subject expertise
  • Community interests
  • Subsites for a categorized set of documents

With the union of SharePoint Portal Server and Windows SharePoint Services, you can integrate SharePoint sites and areas to create custom environments that target a particular interest group. For example, you can publish related content created from collaborative projects on several SharePoint sites to an area, encouraging information sharing and easy access to relevant information.

Customizing a SharePoint Site

SharePoint sites are designed to be flexible. You can tailor a site to fit your users' needs by adding or removing pages, changing the appearance of pages, changing the site navigation, and making other customizations.

To customize SharePoint sites, you must have the following rights, which are included in the Web Designer and Administrator site groups:Manage Lists

  • Add and Customize Pages
  • Apply Themes and Borders
  • Apply Style Sheets

Other users of your site cannot gain access to the pages required to perform these tasks unless you specifically assign them to a site group that contains these permissions.

Customizing Web Sites From Within the Browser

You can perform basic customization from within the browser, using links from the Home, Create, and Site Settings pages of the Web site. From the browser you can perform basic customizations such as the following:

  • Add a list
  • Change the layout of the home page
  • Change the picture on the home page
  • Add a Web Part to a Web Part Page
  • Change a site's display name (not the URL)
  • Apply a theme

For more information about customizing Web sites from within the browser, see the Microsoft Windows SharePoint Services Help.

Customizing Web Sites by Using Web Page Editing Tools

Using a SharePoint–compatible Web page editor, such as Microsoft Office FrontPage® 2003, you can perform additional customizations such as the following:

  • Add borders to pages
  • Insert graphics
  • Add components to the home page
  • Change the navigation of a site

For example, if you create a custom theme for a SharePoint site in FrontPage 2003, and add the theme name to the list of themes in FrontPage 2003, you can edit the list of available themes in Windows SharePoint Services to include your new theme. An XML template called spthemes.xml contains the theme name, style sheet location, thumbnail, preview, and description of each theme that is available through the browser. You use this XML file to render the theme selection page. You can modify this XML file (by opening it in any text editor, such as Notepad) to include a custom theme on the Apply Theme to Web page. For more information about creating a theme and adding it to the list of themes in FrontPage 2003, see the Microsoft Office FrontPage 2003 Help.

Note   To edit the spthemes.xml file, you must be a member of the local administrators group for the server.

To add a custom theme to the list of available themes in Windows SharePoint Services

  1. On the top link bar, click Site Settings.

  2. In the Manage This Web section, click Apply theme to site.

  3. In the browser's Address bar on the browser, replace the file name themeweb.aspx with spthemes.xml. For example, if the Address bar showed http://server_name/_layouts/1033/themeweb.aspx, you would change the path to http://server_name/_layouts/1033/spthemes.xml.

  4. Edit the XML file and add a new section for your custom theme, similar to the following:

    <Templates>
    <TemplateID>newtemplateid</TemplateID>
    <DisplayName>NewTemplateDisplayName</DisplayName>
    <Description>Description</Description>
    <Thumbnail>../images/image.png</Thumbnail>
    <Preview>../images/image.gif</Preview>
    </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:

    <Template>
    <TemplateID>newtemplateid</TemplateID>  
    <DisplayName>NewTemplateDisplayName</DisplayName>
    <Description>Description</Description>
    <Thumbnail>../images/images.gif</Preview>
    </Templates>
    

Inserting Logos and Graphics

You can replace the existing logo of the SharePoint site with another custom logo of your own. Under Site Settings, click Change portal site properties and SharePoint site creation settings. In Custom Portal Site Logo, you can type the location of a new graphic file containing the custom logo.

Note   You should copy the new graphic file to the _layouts relative folder on all servers in the server farm.

You can also put the logo in different parts of the site by editing the template and hard-coding the logo or image, or by editing the cascading style sheet (CSS) sps.css file and modifying the ms-banner class as follows:

.ms-banner {
   padding-right:12;
   background-image: url(/_layouts/images/msw/mslogo.gif); 
   background-position: bottom right; 
   background-repeat: no-repeat;
}

For example, to place the logo in the top right corner next to the My Site and Home links, change the size of the <DIV> tags and use the logo as a background image.

In Windows SharePoint Services, you can use FrontPage to add graphics to the site, and you can specify the location of the images by using Web Parts.

To use Web Parts to specify the location of images on the site

  1. Create a picture library with the images to use on the Web site.
  2. Add the images to the SharePoint document library.
  3. Open the Web page to modify, and then click Modify Shared Page.
  4. Click Modify Shared View.
  5. Click Add Web Parts, and then click Browse.
  6. Select Image Web Part and drag the Image Web Part to the page.
  7. Select the new Web Part on the page. In the open tool pane, type the full address of the image in the picture library.

Applying Style Sheets

Windows SharePoint Services uses two main cascading style sheet (CSS) files:

  • ows.css is the base CSS file used by all SharePoint sites
  • sps.css is a superset derived from ows.css and is used by the SharePoint Portal Server pages.

Both files are located at C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES.

You can create and deploy your own CSS class by writing your own CSS file like a cascading style sheet file. Put the file in the same folder where ows.css and sps.css are located. To add a reference to your custom style sheet for a site, click Site Settings, and then click Change portal site and SharePoint site creating settings. In Custom Cascading Style Sheet, type the name of your custom style sheet file.

Note   Because HTML standards support multiple style sheet files, you can define your own set of classes that are different from those in ows.css or sps.css. This also isolates your CSS classes in a separate file so changes made to the Microsoft CSS files do not overwrite your own changes.

Customizing Document Libraries

A document library is a storage folder for a collection of files with a common set of properties or "fields". It consists of many default fields such as Title, File Name, Modified By, File Size, and so on that you can modify and arrange as you need. You can use FrontPage to add or change the fields used on the page that is displayed by default.

To customize a document library

  1. From FrontPage, open a site.
  2. From the folder list pane in FrontPage, locate the document library icon, right-click it, and then click Properties.
  3. On the Fields tab in the Document Library Properties window, select a field and modify its properties or create additional fields.
  4. On the Settings tab, you can specify to enable versioning, to require an approval for new items, and to hide from browsers.

Using the FrontPage DataView Web Part

With FrontPage and Windows SharePoint Services, you can retrieve information from diverse data sources simply, without writing any custom code. You can access databases, Web services, and XML sources from different locations, and display the data effortlessly with FrontPage. The DataView Web Part in FrontPage is a handy component that creates a customizable view of a data source. A data source can be a database query, an XML document, a Web service, a SharePoint list, or server-side scripts. All the rendering to the browser is done through XSLT transformation.

For more information on how to use the DataView Web Part in FrontPage 2003, see the MSDN article Building XML Data-Driven Web Sites with FrontPage 2003.

Customizing Web Sites Programmatically

To perform advanced Web development customizations, you can use the Windows SharePoint Services object model. You can:

  • Add, edit, delete, and retrieve data from SharePoint lists.
  • Create lists and set list metadata (such as the fields in a list).
  • Work with documents in document libraries.
  • Perform administrative tasks such as creating Web sites, adding users, creating roles, and so on.

For more information about advanced customizations, see the Microsoft Windows SharePoint Services Software Development Kit.

Customizing with Web Parts

Using the Web Part Infrastructure, you can create a custom Web Part to work with the Web site or list. Web Parts are added to the Web Part gallery for a site collection. If you want to deploy your custom Web Parts to multiple servers, or share them with other organizations, you can create a Web Part Package.

Windows SharePoint Services and SharePoint Portal Server allow users to add Web Parts to Web Part Pages in a SharePoint site. A Web Part is a modular unit of information that has a single purpose. For example, the list of default Web Parts available with Windows SharePoint Services includes:

  • Content Web Part   Displays unstructured Web content, such as text, tables, or images.
  • Image Web Part   Displays a picture you specify, or connects to another Web Part that provides the picture.
  • Form Web Part   Displays a form you can use to enter text, and then use that text to filter columns in a connected Web Part.
  • Contacts Web Part   Allows you to display the Contacts list on another Web Part Page.

For a list of all Web Parts available by default for both Windows SharePoint Services and SharePoint Portal Server, see Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3.

Users can add Web Parts to Web Part Pages and share existing Web Parts with other users. Web Parts can also be connected to each other. For example, if you connect an Image Web Part to a data list, you can make the image change depending on which item in the data list is selected. You can even create custom Web Parts by using the Web Part Infrastructure.

Users can include Web Parts from any of the following sources by default:

  • Online Gallery.   A set of Web Parts that is available over a Web service that permits many servers to share access to a common, centrally maintained gallery of Web Parts. The URL for this Web service is specified in the OnlineLibrary element of the web.config file for a site. This gallery provides a way for the IT administrator to deploy Web Parts.
  • Site_Name Web Part Gallery.   Contains Web Parts that are available to a particular site. By default, when you run Stsadm.exe to install a Web Part, Stsadm.exe adds the Web Part to the Virtual Server Gallery. This gallery provides a way for the SharePoint Administrator to deploy Web Parts.
  • Virtual Server Gallery.   Lists Web Parts that are available to all sites on the server. This gallery provides a way for a server administrator to deploy Web Parts
  • Web Part Page Gallery.   Contains Web Parts that are already added to the current page. This gallery, unlike the other galleries, is generated dynamically. It contains Web Parts that are added to the page but are closed (the IsIncluded property is false). The Web Part is still associated with the page by an entry in the SharePoint database, which also stores any shared or personalized property settings for the Web Part. To bring back a closed Web Part, select it from the Web Part Page Gallery.

When a user adds a Web Part to a Web Part Page, he or she can browse any of these sources to find a Web Part.

Customizing a Web Part

You can change the appearance of a Web Part instance on a page without using FrontPage. With Windows SharePoint Services, you can use the Web Part Modify page to change the appearance of a Web Part. With SharePoint Portal Server, in the Action page, click Edit Page.

You can customize a Web Part instance using these four properties:

  • List Views.   Assign views designed for lists or document libraries, such as Summary View.
  • Appearance.   Change the title of the Web Part instance, each instance can have its own title on a page. Modify the height and width of the Web Part instance, the frame state (minimized or normal) and frame style.
  • Layout.   Hide the Web Part instance or set the alignment left-to-right or right-to-left. Move the Web Part instance to another location by changing the zone and part order.
  • Advanced.   Disable the possibility of minimizing, closing and changing the zone for the Web Part.

To add and customize the appearance of a Web Part

  1. Open the Web page to modify, and then click Modify Shared Page.
  2. Click Modify Shared View.
  3. Click Add Web Parts, and then click Browse.
  4. Select a Web Part and drag the Web Part onto the Web page.

Deploying Additional Web Parts

Windows SharePoint Services allows users to add Web Parts to Web Part Pages in a SharePoint site.

Users can add Web Parts to Web Part Pages and can personalize or share existing Web Parts with other users. Web Parts can also be connected to each other. For example, if you connect an Image Web Part to a data list, you can make the image change depending on which item in the data list is selected. You can even create custom Web Parts by using the Web Part Infrastructure. For more information about creating a Web Part, see the Microsoft Windows SharePoint Services Software Development Kit.

SharePoint Portal Server uses the same default Web Parts as Windows SharePoint Services, and uses the same default Web Part galleries provided by Windows SharePoint Services: Online Gallery, Site_Name Web Part Gallery, Virtual Server Gallery, and Web Part Page Gallery.

Managing Security and Performance Options for Web Parts and Web Part Pages

You can control whether users can connect Web Parts to each other within a site, and whether to allow access to the Online Gallery. The Online Gallery contains many Web Parts that users can download and install to use on their sites. Both of these actions have potential impact on your server and site security and performance. For example, if you allow Web Part connections, and a user connects a complex Web Part to a large data set, the Web Part Page that contains those Web Parts could take a long time to load when a user browses to it. Also, if a user connects to a Web Part that contains a scripting error or malicious code, it could open up a security hole in the user's site, or, potentially, on your server.

By default, both security options are enabled at the server level. You can change these configuration options at the virtual server level. You only need to change these options if you do not want to allow either Web Part connections or access to the Online Gallery. If you have multiple servers in a server farm environment, and you want to change these settings for all virtual servers, you must configure these options for each virtual server on each server in that server farm.

Note   You must be an administrator of the local server computer, or a member of the SharePoint Administrators group to configure security and performance options for Web Parts and Web Part Pages.

To configure options for Web Parts and Web Part Pages

  1. On your server computer, click Start, point to Administrative Tools, and then click SharePoint Central Administration.

  2. On the SharePoint Central Administration page, click Configure virtual server settings.

  3. On the Virtual Server List page, click the virtual server you want to configure.

  4. On the Virtual Server Settings page, click Manage security settings for Web Part Pages.

  5. Select the options you want to enable or disable, and then click OK.

    Note   You can also restore default server settings to enable users to both connect Web Parts and use the Online Gallery by clicking Restore Defaults.

If your server is behind a proxy server or firewall, you must also edit the web.config file for your server to enable the Online Gallery. In a server farm environment, you must edit this file for every Web front-end server in the server farm.

  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:

    \Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\CONFIG
    
  2. In the web.config file, add the following lines (Proxy_Server:port is the proxy server or firewall used for your environment):

    <system.net>
       <defaultProxy>
       <proxy proxyaddress="http://Proxy_Server:port" bypassonlocal = "true"/>
       </defaultProxy>
    </system.net>
    
  3. Save and close the web.config file.

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.

  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.

  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