Editing FrontPage Themes

Inside Microsoft MS FrontPage

A Publication of The Cobb Group

Published March 1998

Perhaps the best improvement Microsoft offers in FrontPage 98 is the introduction of themes. Now, with the touch of a button, you can turn an ordinary Web site into a real visual treat.

FrontPage comes with more than 50 themes, from button-down themes, such as World Finance, to playful themes, like Bubbles, shown in Figure A. With so many themes to choose from, you might think you could never run out.

Figure A:

The Bubbles theme can give your web an offbeat flavor.

But what if you can't find exactly the theme you're looking for? Or what if you like a certain theme overall, but don't like its text colors? Fortunately, FrontPage 98 lets you tweak the standard themes to suit your needs; it also lets you create themes from scratch.

In this article, we'll show you how to edit themes. We'll also explain the elements that make up a theme.

On This Page

Anatomy of a theme
So, where are those files?
Tweaking a theme
Putting our theme to work
Notes
Conclusion

Anatomy of a theme

In simplest terms, a theme is a set of rules for how a page (or web) will appear, along with a collection of images to be used as page headers, horizontal rules, and buttons. When you apply a theme, you can choose among three options: active graphics, vivid colors, and background image. So in effect, each theme has six variations. Table A outlines the complete contents of a theme.

Table A: Theme contents

Each theme is stored as a set of about four dozen files in its own folder in your FrontPage directory. When you apply a theme to a web or a page, FrontPage copies all the theme files into the _themes directory of your web. Pick a new theme, and FrontPage will replace the old files with the new ones.

So, where are those files?

By default, each FrontPage theme's files are stored in an archive file: downtown.elm, for example. When you preview a theme in FrontPage Explorer, FrontPage Editor, or Theme Designer, FrontPage decompresses the archive, allowing you to see the individual files in the archive.

As soon as FrontPage no longer needs the theme files, however, they go back into the archive. So the only way to access an individual theme file (to edit it, for example) is for the theme to be in use.

The images are all GIF files, while the theme rules are stored in several Cascading Style Sheet (CSS) files. You can open these CSS files in a word processor to examine them, but FrontPage lets you avoid the messy details by using the FrontPage Theme Designer, as we'll soon see.

Tweaking a theme

If you look for Theme Designer on any of the FrontPage menus, you won't find it. Theme Designer is a separate application and isn't a part of the standard FrontPage installation.

To install Theme Designer, exit Front Page Explorer and FrontPage Editor and run the program tdsetup.exe, which is located in the \SDK\Themes\Designer folder on your FrontPage 98 CD-ROM. Once you've run the installer, you'll be able to access Theme Designer from the Tools menu in FrontPage Explorer. (You can also launch it directly from the Desktop if you choose.)

Now, let's look at how Theme Designer works. Launch FrontPage Explorer and choose Show Theme Designer from the Tools menu.

When Theme Designer launches, you can choose to create a new theme, open one of the themes in the FrontPage directory, or open the theme that the current web is using (if FrontPage is open). We'll take the second option, so click the Open button on the toolbar. The dialog box in Figure B should appear.

Figure B:

You can edit any theme in your FrontPage Themes directory.

We're going to edit the Downtown theme, so double-click Downtown in the dialog box. When you do, Theme Designer will open the page shown in Figure C. (We've maximized the Downtown document window.)

Figure C:

The Theme Designer shows all the elements of the current theme.

When you open a theme, it appears in its unadorned state—with the Vivid Colors, Active Graphics, and Background Graphic disabled. To see the effect of each of these options, just click the (ICON1 see Fig C), (ICON2), or (ICON3) icon on the toolbar. After you've tried these options, disable them for now.

Quick color changes

As you can see, both the page's background and the Regular Link element are gray, which can make the links hard to see. So, let's change the link color.

To do so, double-click on Regular Link. You should see the dialog box in Figure D.

Figure D:

We'll change the color of regular text links in this dialog box.

Now, click on the Regular Link Color dropdown box and choose Lime. To see the effect of this change, click the Preview tab. Here you can see all four text colors and get a sense of how they look together.

For our example, the lime link is probably a little too bright, so click on the Link Colors tab. This time, choose Maroon, which fits the theme a little better. You can use this same procedure to change the color of active links (where the user is pressing the mouse down) and followed links (links that the user has already visited).

Now, click the Body Text tab. On this page of the dialog, you can change both the color of regular text and the font. We'll leave Garamond as the font, but let's change the color to purple. To do so, just choose Purple from the Color dropdown list.

So far, we've looked at the Downtown theme's basic color palette. To see what the vivid palette looks like, just enable the Vivid Colors check box at the bottom of the dialog. You can change these colors with the same technique we just used.

Once you're happy with your color selections, click the OK button to close the dialog. The changes you made will all appear in the Theme Designer window. (You'll need to click the (ICON1 Fig C) button to see your Vivid Color selections.)

Changing the various levels of headings is similar to changing the text properties. Double-click on any of the heading samples to open the Headings Properties dialog box. You can choose which heading to edit by clicking one of the tabs at the top of the dialog. Once you've made your changes, click the Preview tab to see how all six headings look together.

Changing images

Most of the other theme elements are related to images. Double-clicking one of those elements lets you select a new image and change a few other settings. To see how this process works, we'll look at two examples.

First, double-click on the page banner to open the dialog box in Figure E. As you can see, the key piece of information is the file path to the banner image—or more correctly, the path to one of the banner images. By enabling or disabling the Active Graphics check box, you'll see the other image's path.

Figure E:

We can specify a new banner image in this dialog box, as well as change some text attributes.

To substitute a different image, simply type the path to that file. For our example, we'll substitute the active Downtown banner for the non-active one. That way, FrontPage will always use the more colorful banner. To make this switch, disable the Active Graphics check box, then change werbannd.gif to werbanna.gif.

You can also drag and drop a file onto this dialog. Let's say you've created your own banner image and have it stored in another directory. Just drag its icon onto the dialog box to replace the existing graphic. Don't worry about where you've saved the file, because FrontPage will copy it into the theme directory when you save the theme.

The other options in the Banner Properties dialog are easy to use. On the Font page, you can change the banner text's font, style, size, and color. On the Alignment page, you can change the positioning of the banner text relative to the image. (These settings bring up an important point about theme images: They don't contain any text. Instead, FrontPage adds text dynamically, replacing Banner with Home Page or Widgets, Inc., for example.) Once you've had a chance to look at these options, click OK to confirm the changes you've made and return to the main window.

You can edit the various navigation buttons much as we changed the page banner. The only difference is that each button actually consists of more than one image (two with Active Graphics turned off, three with Active Graphics turned on). The additional images come into play when the user hovers over or clicks on one of the buttons.

Other theme changes

There are just two more elements of the theme that you can change: the color of table borders and the background image and color. Let's look at table borders first.

When you create a table in FrontPage, you can give it a three-dimensional look by assigning two different colors to its borders. By double-clicking the sample table in the Theme Designer, you can change these colors just as you changed the text colors earlier. (If you don't want your tables to look 3D, make both colors the same.)

Finally, you can double-click the background of the Theme Designer window to change the background image and the two background colors for the theme (normal and vivid). Make these changes just as you did in the other properties dialogs.

Putting our theme to work

Now that we've made all our changes, it's time to save our modified Downtown theme to disk. FrontPage won't let us overwrite the original theme files, so we must give our theme a new name.

Choose Save Theme As… from the File menu to open the dialog box shown in Figure F. As you can see, FrontPage asks for only two pieces of information: the theme's full name (Title) and its short name. The full name will appear in the Themes dialog box and FrontPage Explorer's Themes view; FrontPage will use the short name (which must be eight characters or less) to name the theme's folder and files. We'll give your modified theme a descriptive name, so type New Downtown in the first text field and newtown in the second. Click OK to complete the save operation.

Figure F:

The Theme Designer probably has the world's simplest Save dialog box.

Now, switch to FrontPage Explorer and click on the Themes button on the Views bar. Scroll through the list, and you'll see that New Downtown appears there, ready for you to use. Pretty amazing, isn't it?

Notes

If you edit a custom theme that you've used in a web, FrontPage won't update that web automatically unless it's open for editing at the time. Instead, you'll need to open the web in FrontPage Explorer and reapply the theme. Similarly, if you've applied your custom theme only to certain pages (by using the editor's Themes dialog box), you'll need to reapply the theme to at least on of those pages, then recalculate hyperlinks.

Unlike the rest of FrontPage, the Theme Designer doesn't come with online help. However, the document FPDevkit.doc in the SDK folder on your FrontPage CD-ROM includes extensive information about themes.

Conclusion

Themes are one of FrontPage's most powerful features. They allow you to give any Web site a consistent, impressive look. With the addition of the Theme Designer, you can take this capability even further by customizing the themes that ship with FrontPage.

The article entitled "Editing FrontPage Themes" was originally published in Inside Microsoft MS FrontPage, March 1998. Copyright © 1997, The Cobb Group, 9420 Bunson Parkway, Louisville, KY 40220. All rights reserved. For subscription information, call the Cobb Group at 1-800-223-8720.

We at Microsoft Corporation hope that the information in this work is valuable to you. Your use of the information contained in this work, however, is at your sole risk. All information in this work is provided "as is," without any warranty, whether express or implied, of its accuracy, completeness, fitness for a particular purpose, title or non-infringement , and none of the third-party products or information mentioned in the work are authored, recommended, supported or guaranteed by Microsoft Corporation. Microsoft Corporation shall not be liable for any damages you may sustain by using this information, whether direct, indirect, special, incidental or consequential, even if it has been advised of the possibility of such damages.