Working with Themes in FrontPage 2003

Lisa Wollin
Microsoft Corporation

May 2005

Applies to:
    Microsoft Office FrontPage 2003

Summary:   Learn how to deploy custom themes in Microsoft Office FrontPage 2003 and how to use Microsoft Visual Basic for Applications (VBA) to work with the themes objects in the FrontPage object model. (8 printed pages)

Contents

Introduction to FrontPage Themes
Theme Basics
Deploying a Custom Theme
Automating Themes
Conclusion
Additional Resources

Introduction to FrontPage Themes

Themes in Microsoft Office FrontPage 2003 provide a gallery of professionally designed graphics, color schemes, and formatting rules that you can apply to FrontPage Web sites. With these themes, you can create documents, Web pages, or an entire Web site with a consistent and polished appearance across all pages. Themes can be applied anytime—even to an existing Web site that was not created in FrontPage.

A theme affects all aspects of the appearance of a page:

• Colors   The color scheme of a theme specifies the color of body text, headings, hyperlinks, table borders, and page background.
• Graphics   Several page elements contain graphics, such as the background picture and bullets.
• Styles   A theme specifies font styles and sizes for body text and headings.

FrontPage 2003 includes several themes that you can use on your Web sites, or you can create your own theme to give your Web site a unique look and feel. This article provides links to information on applying, customizing, and creating themes and explains how to deploy a custom theme. This article also explains how to use the FrontPage object model to work with themes programmatically in Microsoft Visual Basic for Applications (VBA).

Note   Web sites based on Microsoft Windows SharePoint Services must use themes from FrontPage 2003.

In FrontPage 2002, the way themes functioned changed significantly from the way they functioned in previous versions of FrontPage. For example, themes began using cascading style sheets (CSS). FrontPage 2003 also contained changes to themes. The following is a simplified list of those changes.

• You use the new Theme task pane to select and apply a theme.
• You can create an entirely new theme by using a link in the Theme task pane.
• Formatting for all themes is based entirely on CSS.
• All themes use CSS selectors that are compatible with Windows SharePoint Services.

Theme Basics

FrontPage 2003 includes more than 70 themes, located in Program Files\Common Files\Microsoft Shared\THEMES11. You can customize any of these or create your own themes. For a general understanding of how themes can affect the appearance of a Web page, consider a Web page created using FrontPage 2003 that contains no special character formatting. This document uses the default font, size, and color for headings, paragraphs, and link text. Figure 1 shows this page as it appears in FrontPage 2003 and in Microsoft Internet Explorer.

Figure 1. A Web page with no special character formatting in FrontPage (left) and in Internet Explorer (right)

After the Water theme is applied, the same page appears as shown in Figure 2.

Figure 2. The same page in FrontPage (left) and in Internet Explorer (right) after applying the Water theme

As you can see, the same page looks somewhat different after the theme is attached. Many themes also include graphics for navigational buttons.

If you examine the HTML, you see that FrontPage added the following line of code:

<meta name="Microsoft Theme" content="water 1111">

However, FrontPage also includes a CSS reference in the file, as shown in the following code (which you can see if you open the page in Notepad but which does not appear in Code view in FrontPage).

<!--mstheme-->
<link rel="stylesheet" type="text/css" href="_themes/water/wate1111.css">
<meta name="Microsoft Theme" content="water 1111">

In addition to the theme metadata, FrontPage adds a folder named _themes. In that folder, FrontPage creates a separate folder for each theme you add to a site. Figure 3 shows the Web site shown in the previous figures with a folder for the Water theme.

Figure 3. The folder list with the _themes folder added

If you expand the subfolder named water, you find all the files needed for that theme, including CSS and image files. These files are expanded from compressed files that are part of the theme definition files, which are discussed in greater detail in the following section.

For more information about working with and customizing themes in FrontPage, see the following resources on Office Online.

• About themes
• Apply a theme
• Remove a theme
• Create a new theme

You can find even more topics, such as changing theme colors, by searching for "themes" on Office Online.

Deploying a Custom Theme

There are many reasons why you might want to create a custom theme. Perhaps you are an Internet service provider (ISP), and you want to create custom themes for your customers. Perhaps you are a corporate Web developer, and you want a custom theme for all the sites on your corporate intranet. Perhaps you are a professional Web consultant, and you want to design custom themes for your clients. Whatever your reason for creating a custom theme, after you create a theme, you need to place the files on your users' local computers.

Themes are a shared resource that is available to all Microsoft Office applications, including FrontPage, and are, therefore, stored in a common directory. For computers running FrontPage 2003 on Microsoft Windows 2000, Windows XP, and Microsoft Windows Server 2003, themes are stored in the following location:

%userprofile%\Application Data\Microsoft\Themes

When you create a custom theme, FrontPage creates a folder in the Themes folder with a folder name based on the name of your custom theme. For example, if you created a custom theme named PartnerPages, you would find it in the following location:

%userprofile%\Application Data\Microsoft\Themes\PartnerPages

You can access a custom theme on a different computer by using one of the following methods:

• Copy the entire theme folder from one computer to the same location on another computer. The best way to do this if you expect to deploy to multiple computers, such as to ISP customers or computers within a corporate network, is to create a setup project in Microsoft Visual Studio or a similar tool. You can then distribute the resulting .exe file to prospective users over the Internet or an intranet.
• In FrontPage, open a Web site that contains a custom theme. When you open a Web site that is not on your local computer, FrontPage automatically downloads the theme to your computer. FrontPage also provides automatic versioning support, so when someone opens your Web site from another computer, that computer automatically gets the latest version of a custom theme that is applied to the Web site. This is the best method to use if you are a professional Web consultant and want a client to have a copy of a custom theme that you created for that client.

Understanding Theme Files

Several types of files reside in a themes folder. Each of these files must be present for a theme to function properly, so you should ensure that each of these files is present when deploying custom themes, unless the file is marked as optional.

ELM File

The ELM file contains a concatenated version of the theme itself, including all the graphics files that comprise the theme as well as theme element definitions from several CSS files (color0.css, color1.css, graph0.css, and graph2.css). Two style sheets contain information about colors (color0.css and color1.css); the other two contain information about graphics (graph0.css and graph2.css).

• color0.css contains the definitions for the normal color set associated with the theme.
• color1.css contains the definitions for the vivid color set associated with the theme.
• graph0.css contains the definitions for the normal graphics associated with the theme.
• graph2.css contains the definitions for the active graphics associated with the theme.
• theme.css contains the definitions for Web sites based on Windows SharePoint Services.

Themes provided with FrontPage 2003 are available in the .elm format. Users creating custom themes can get theme information into the .elm format by creating the theme using the tools in FrontPage.

INF and UTF8 Files

The INF file is a text file with a .inf extension that contains information about the theme name, including various localization IDs (LCIDs) to allow a different localized name for each language. It also contains versioning information, allowing you to track changes to a theme.

The UTF8 file is also a text file that contains localized versions of a theme's name but in UTF8 format, which allows for special characters and non-Latin-based alphabets.

Preview.gif File (Optional)

The preview.gif file is part of all themes that are included with FrontPage. The file contains a preview of the button and bullet graphics that are associated with the theme. This is the only file that might not be included in a custom theme.

Thumbnail.png File

The thumbnail.png file is the preview that FrontPage displays in the Theme task pane. FrontPage automatically creates or modifies this file when you create or customize a theme by using the Customize Theme dialog box.

Automating Themes

If you have worked with the object model for FrontPage or another Office application, you know that there are many reasons why you may want to automate features in an application. For example, you may need to create a tool or add-in that checks the themes in a Web site or applies a specific theme to each page in a Web site. FrontPage provides members in the object model for automating themes in FrontPage Web sites. This section describes these members, how to use them, and how to mitigate errors that may occur.

Themes Collection and Theme Object

The Themes collection represents all the themes that are available in FrontPage (using the Application object), that are applied to a Web site (using the WebEx object), or that are applied to a Web page (using the WebFile object). The Themes collection for the Application object includes any custom themes installed on the local computer. The Theme object is an individual theme, either available globally in FrontPage or applied specifically to a Web site.

The Themes collection and Theme object allow you to navigate the themes available to a Web site and those applied to a Web site. For example, you can use the Count property of the Themes collection to determine whether a Web site has any themes applied to it. The following code displays a message that indicates whether the active Web site has any themes applied and, if so, how many.

Sub CountThemesApplied()
    Dim Count As Integer

    Count = ActiveWeb.Themes.Count

    Select Case Count
        Case 0
            MsgBox "There are no themes applied to your Web site."
        Case 1
            MsgBox "There is " & Count & " theme applied to your Web site."
        Case Else
            MsgBox "There are " & Count & " themes applied to your Web site."
    End Select

End Sub

By itself this code does not do much, but it may be useful within the context of a larger tool or add-in. Additionally, you can use the Name property to verify whether a specific theme is applied to a Web site, and you can use the Version property to determine which rendition of a theme is applied to a Web site.

ApplyTheme Method

You use the ApplyTheme method to apply a theme (whether custom or included with FrontPage) to individual Web pages. To do this, you need to access the file using a WebFile object. For example, the following code applies the Water theme to all files within the root folder of the active Web site.

Sub ApplyThemeToFiles()
    Dim objFile As WebFile

    On Error GoTo ERR

    For Each objFile In ActiveWeb.RootFolder.AllFiles
        If objFile.Extension = "htm" Or objFile.Extension = "html" Then
            objFile.ApplyTheme "water"
        End If
    Next

    Exit Sub

ERR:
    MsgBox "An error occurred: " & ERR.Description, vbCritical, "Error!"
    Exit Sub

End Sub

ThemeProperties Property

The ThemeProperties property provides access to the theme applied to a page or the default theme for a Web site. The ThemeProperties property is a read-only property that returns a Long value that represents the specific property settings for a theme. This value is equivalent to the fpThemeProperties constant. To set new theme properties, use the ThemeProperties parameter of the ApplyTheme method. For example, the following code determines whether the theme used in the current Web page uses its background image; if not, the code uses the ApplyTheme method to set the theme to use the background image of the theme.

Sub AddBackgroundImage()
    Dim objPage As PageWindowEx

    Set objPage = ActivePageWindow
    If objPage.ThemeProperties(fpThemeBackgroundImage) = 0 Then
        objPage.ApplyTheme objPage.ThemeProperties(fpThemeName), _
            fpThemeBackgroundImage
    End If
End Sub

However, if other properties are set, the preceding code effectively removes all other theme properties and resets the value to use the background image. This is because the fpThemeProperties constant contains binary flags, which means that you can set one or more of the constants by concatenating the values. Therefore, the following code concatenates the background image constant, fpThemeBackgroundImage, with any existing theme properties, fpThemePropertiesAll.

Sub AddBackgroundImage()
    Dim objPage As PageWindowEx

    Set objPage = ActivePageWindow
    If objPage.ThemeProperties(fpThemeBackgroundImage) = 0 Then
        objPage.ApplyTheme objPage.ThemeProperties(fpThemeName), _
            objPage.ThemeProperties(fpThemePropertiesAll) _
            & fpThemeBackgroundImage
    End If
End Sub

The theme properties are also contained in the metadata for the theme. As mentioned earlier, when you applied the Water theme to the page, FrontPage inserted the following theme metadata into the page:

<meta name="Microsoft Theme" content="water 1000">

The number that follows the theme name indicates any theme properties that are set. This number corresponds to the value of the theme properties. For example, after you run the preceding code, the metadata changes to the following:

<meta name="Microsoft Theme" content="water 1001">

Removing or changing this number won't cause the theme to stop functioning, but it does remove or change any theme properties that you may have set for the theme on a page.

Table 1 shows the fpThemesProperties constants and their values.

Table 1. Values for fpThemesProperties constant

Conclusion

Using themes in your Web pages gives them a consistent appearance, but customizing an existing theme or creating your own theme makes your Web pages uniquely yours. Creating custom themes is fairly easy when you use the tools built into FrontPage, and deploying them can be as simple as copying the theme files to another computer or as complex as creating a setup project to do the work for you.

The themes objects in the FrontPage object model are relatively simple, which makes working with themes programmatically very easy. Although you can't use the object model to create or customize themes, you can use it to apply themes and set theme properties.

Additional Resources

See the following resources for more information about themes in FrontPage.

• About Themes
• Apply a FrontPage Theme to a Windows SharePoint Services Site
• FrontPage Themes