Customizing Themes

You can add new themes or customize existing ones for application to Web sites in Microsoft Windows SharePoint Services 2.0. This programming task shows how to customize an existing theme.

• Copy one of the theme folders in Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\THEMES and give the folder a unique name. In this example, the name is MyTheme. This folder contains cascading style sheets (CSS) files, image files, and other files that define the styles, formatting, and color for the various user interface (UI) elements that are used in the theme.

• Find the .inf file in the copied folder, and rename it with the name given to the folder.

• Open the .inf file and assign the same name to the title in the [info] section of the file.

• Customize the styles defined in the .css files of the copied folder as needed. See CSS Class Definitions in Windows SharePoint Services for information about the classes used in Windows SharePoint Services, including sample code that can be added to ASPX pages to learn which classes apply to which UI elements. The following example from THEME.CSS changes the color that is used for sections of the navigation area.

  .ms-navframe{
  background:#009999;
  }
  .ms-navline{
  border-bottom:1px solid #8D4D03;
  }
  .ms-nav .ms-navwatermark{
  color:#008999;
  }
  

• Modify the image files in the copied folder by using the business graphics software of your choice.

• Add thumbnail and preview image files for your custom theme to the Local_Drive\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\IMAGES directory. In this example, the files are called myThumbnail.png and myPreview.gif.

• Add a theme template definition to SPTHEMES.XML, which is the file that determines which themes are available as options on the Apply Theme to Web site page. This XML file is located in the Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033 directory. The following example specifies a template for the custom theme.

  <Templates>
     <TemplateID>mytheme</TemplateID>
     <DisplayName>My Theme</DisplayName>
     <Description>Description</Description>
     <Thumbnail>../images/myThumbnail.png</Thumbnail>
     <Preview>../images/myPreview.gif</Preview>
  </Templates>
  

Your custom theme now appears in the list of options on the Apply Theme to Web site page and can be applied to SharePoint sites.

Warning  Changes that you make to SPTHEMES.XML may be overwritten when you install updates or service packs for Windows SharePoint Services, or when you upgrade an installation to the next product version.