FrontPage Themes : MS FrontPage

Themes Like Old Times

I created themes using a previous version of FrontPage. Now that I'm using FrontPage 2003, will the old theme work?

Older versions of FrontPage added some HTML to Web sites in order to implement themes. The program now applies themes using CSS. This is a real improvement because CSS uses less code, which means that your pages download a bit faster. Also, the CSS method more closely follows Web standards set by the World Wide Web Consortium (for more on these standards, see Validation). FrontPage 2003 recognizes your old theme, but for best results, update your site by removing the theme, and then reapplying it using FrontPage 2003. If your old theme doesn't appear in the FrontPage theme list, try customizing another one to suit your needs.

Should You Use a Theme?

Themes make site design a breeze, but not everyone's a fan. Themes mostly appeal to beginners or those who simply don't have time for graphic design decisions. Most advanced Web developers tend to worry about what files and code FrontPage will add to their site to achieve a theme's effects. Others wouldn't dream of using a FrontPage thememaybe because they don't like FrontPage controlling parts of a site, or they're very particular and want to set every design detail themselves.

The pros

Themes automate page design and your site's overall appearance instantly and easily. You can apply a theme to your entire site or just a portion of it. Even if you don't like the packaged themes FrontPage offers, you can still take advantage of the feature's formatting automation. Just customize an existing theme to suit your needs, or create your own theme from scratch (you'll learn how to do both those things in a moment).

The cons

FrontPage themes tend to have a "made by Microsoft" canned look that a lot of designers and even average Web surfers find uninspired (others have used the terms "soul-killing," "drone-like," and, well, you get the idea). Also, because there are so few themes to choose from, it might be painfully obvious to many of your visitors that you've used a FrontPage theme (see Figure 11-1). The result? Your site could look less professional than you want.

Figure 11-1. This is a typical FrontPage theme. A banner at top incorporates the page title in a graphic. A background image provides texture and colorhere it's horizontal stripes.

Themes also restrict your freedom. You make a real commitment when you apply a theme. FrontPage takes control of a lot of page elements, keeping you from making design tweaks where you may want them.

If you're wary of themes, check out these alternatives:

Dynamic Web Templates let you create pages with the shared look and features that you get when using a template (Creating A Page Template). After that, any page created from the template continues to take its design directives from the template file. This means you can make one change (to the template file) and control the look of your entire site. Details follow later this tutorial.
Cascading Style Sheets offer great design flexibility, as you learned in Tutorial 7. You can create your own style sheets to give your site a uniform design. But don't forget that FrontPage features a few canned style sheets, too. Applying one of these is just as quick and easy as applying a theme.
Included content is a nifty FrontPage feature that lets you take the content of one page and drop it into many other pages. This tool, which is covered below, provides an alternative way to create the same elements that themes dolike banners and other headings. If you use included content in combination with CSS, there's no theme you can't recreate or surpass.

Applying a Theme

FrontPage can apply a theme to a Web site, subsite (Planning_Your Web Site's Structure), or individual pages. Once you apply a theme to a page, it takes over the entire page. In other words, you can't pick and choose what elements the theme will control. Banners, bulleted lists, background, headings, and other elements automatically fall under a theme's control.

To apply a theme:

Select the page(s) to which you want to apply the theme.

Within the folder list, select a page, multiple pages, or a site (by selecting the folder that holds the site). If you want to apply a theme to one page only, open the page in Design view. As long as no files are selected in the folder list, FrontPage applies the theme only to the page you're working on.
Display themes.

Select Format » Theme to open the Themes task pane. It features a scrolling list of theme thumbnails (see Figure 11-2), which give you some idea how each theme will look when applied to your pages.

You may want to see how a theme looks when it's applied to your Web pages, not just some sample page. To see how the theme looks with your content, open a page in Design view. As you select themes within the task pane, the page adopts their style elements. If you don't see something you like, just cancel at any time without saving.

Checkboxes at the bottom of the Themes task pane offer the following options:
- Vivid colors. If you turn on this checkbox, FrontPage amps up the brightness and variation of theme colors. Depending on the theme, activating this checkbox can turn a black heading to blue or make yellow hyperlinks orange.
- Active graphics. Turn on this checkbox to activate a theme's animated pictureslike rollover buttons. Doing so can change the appearance of some navigation buttons and banners.
- Background picture. Many themes feature a background picture, which is usually a pattern. If you like the theme, but not the background, turn this checkbox off. FrontPage substitutes a solid color.
Apply a theme.

To apply a theme, you can just click a theme thumbnail, but you also have additional options. When you pass your cursor over a theme thumbnail, a down arrow appears on the right side of the thumbnail. Click the arrow, or right-click the theme itself to display a menu (Figure 11-2).

Figure 11-2. Apply themes using the Theme task pane. Right-click any theme thumbnail to display a pop-up menu, which lets you tweak some of the theme's settings. The first line of the pop-up menu, shaded in gray, shows the theme name. If you can't quite make out the theme's details in the thumbnail, select Customize to see a fullsized preview. (You can always just look and click Cancel.)

The menu shows the name of the theme you selected, and offers the following two ways to apply the theme:

Apply as default theme. This selection applies the theme to the entire Web site, even if you've selected just one page.
Apply to selected page(s). Use this command if you've selected pages or folders within Folder view, or have a single page active in the document window. Themes applied to single pages override a site-wide theme.

Other available options include:

Customize. This option lets you modify a theme. See the next section for details.
Delete. Don't try to use this option to remove a theme from a Web site or page. This command just removes a theme from the list of options in the Theme task pane. (FrontPage won't delete any themes that came bundled with the program, only those you create or import yourself.)

Once you've applied a theme, FrontPage takes over. Not only do your pages take on the appearance of the theme, but FrontPage grays out (disables) formatting options that the theme now controls, like bullet style. If you ever want to retake control of these options, your only option is to remove the theme.

Themes are pretty dictatorial, but they don't control everything on a page. For those elements outside a theme's control, FrontPage still tries to help you to stay within the color scheme, as shown in Figure 11-3.

Figure 11-3. For elements a theme doesn't lock downlike text color, for instanceFrontPage offers an additional feature to help you work in harmony with any theme you're using. The program adds a Theme Colors section to your palette to help you color coordinate your pages.

Things to keep in mind when applying a theme

Themes can be pretty helpful, but they don't always behave exactly as you might expect. Consider the following:

If you apply a theme to a Web site, it won't affect subsites.
Themes applied to specific pages override a site theme.
When you apply a theme to a Web site, FrontPage obliterates formatting already in place. Even if you remove the theme later, you won't get a lot of your prior settings back.
If your Web site contains pages controlled by Dynamic Web Templates, Themes won't affect them. If you want to apply a theme to these pages, apply it to the Dynamic Web Template itself. (You can even do this after you've created the template and pages based on the template. When FrontPage saves the template, it updates the pages. See the end of this tutorial for details on Dynamic Web Templates.)

Customizing a Theme

Say you've found a theme that you like, but the colors don't quite match your corporate colors. The packaged themes FrontPage offers may not seem like a perfect fit at firstbut you can tweak them to suit your needs. FrontPage lets you change the color, graphic files, and font settings associated with any theme.

Your customization work begins in the Themes task pane. Click the "Create new theme" link at the bottom of the task pane, or right-click a theme you like and then select Customize. The Customize Theme dialog box displays (see Figure 11-4).

Figure 11-4. The Customize Theme dialog box lets you modify theme color, graphics, and text. You control each of these settings using the corresponding buttons, in the lower-left corner. FrontPage previews all your changes in the large pane at top.

Changing colors

To change colors within the theme, click the Colors button. The dialog box displays the theme's color settings (see Figure 11-5).

The three tabs that appear offer varying degrees of color customization. The Color Schemes tab offers preset schemes (sets of colors) from which you can choose. Click a scheme for a preview (in the right-side pane) of what it looks like.

If you want to really customize what colors you're using, click the Color Wheel tab. Here you can drag a small white dot to any point you like on the color wheel, a circle that presents all the colors available on your computer. The color you select will be the Normal text color for the theme. Based on your selection, FrontPage sets the rest of the theme colors automatically. The resulting scheme appears back at the top of the Color Schemes tab under the label (Custom). Use the Brightness slider control to adjust the intensity of the colors.

Figure 11-5. Select a color scheme on the left and FrontPage previews it on the right. Click the Vivid colors radio button to see how that setting punches up the color in each scheme.

Say you like every color in a theme, except the hyperlink color. You can change the setting for that one element only. Or, you can even pick your colors element by element, if you want. To do so, click the Custom tab. The Custom tab features a drop-down list of Items and a corresponding drop-down list of colors. Select an item, then select a color.

Not all theme colorsespecially customized colorsare Web safe. For more information on Web Safe colors, see Formatting Characters back in Working with Text.

If you're changing colors, keep in mind that any packaged graphics that come with the theme will remain the same and may not match your new color scheme. To fix this inconsistency, you may want to change some of the theme's graphics, which is what the next section shows you how to do.

Changing graphics

Theme elements like bullets, buttons, and sometimes even the background are actually graphic files. If you don't care for one of these images, change it within the Customize Theme dialog box by clicking the Graphics button.

To customize a graphic, select an element from the Item list at the top left of the dialog box (see Figure 11-6). FrontPage then lets you browse for alternate graphic files.

Figure 11-6. The Items list within the Customize Theme Graphics dialog box includes all theme elements that use graphics, like bullets and navigation buttons. When Active Graphics is turned on (at the bottom of the dialog box), buttons have two images: one at rest and a "Hovered Picture" that appears when a cursor passes over it.

Many of these graphics, like banners and navigation buttons, include text. To change the typeface, size, or alignment (within the graphic), select the element. Then click the Font tab (see Figure 11-7).

Figure 11-7. The Font tab on the Customize Theme dialog box lets you select a new font for text that appears on a theme's graphics. Use the drop-down menus on the right to set font size and alignment within buttons and banners. What if a viewer doesn't have your chosen font loaded on her system? To ensure that she'll see the alternative that you want, type it in this dialog box, following the first font. Enter as many fonts as you want, separating them with commas.

Changing text

If you don't like the fonts a theme uses to display text on the page, you can change those as well. Back in the main window of the Customize Theme dialog box (see Figure 11-4), click the Text button.

A simple font dialog box, like the one illustrated in Figure 11-7, displays. Select a page element from the Item drop-down list at top, then select a font from the font list. FrontPage previews the effect in the pane on the right. You can enter multiple fonts here, just as you can when you adjust the font for graphic elements.

To create or access CSS styles (Styles Introduction), click the More Text Styles button on the bottom left.

Saving a custom theme

Once you've set all your preferences within the Customize Theme dialog box, click Save As. Enter a unique name for the theme in the Save Theme dialog box that appears, and click OK.

Removing a Theme

If you've grown disenchanted with a theme, you can remove it.

Removing a theme doesn't restore pages to their original design. Any previous graphics, color, or font settings you had in place won't automatically return. All your content will remain, just looking a lot plainer than before. For example, a picture bullet wouldn't survive this process. You'd see a regular bullet in its place.

To remove a theme, select the site folder or pages that should no longer feature the theme. Select Format » Theme. The Themes task pane displays. Choose No Theme and click Yes to confirm your choice.

How Themes Interact with Style Sheets

How will your pages react when you apply a theme? Theme formatting follows the basic laws of cascading styles (Understanding Styles Behavior): formatting that lives closer to the element takes precedence. You've already read that a theme applied to a page trumps a site-wide theme. The rule applies to formatting for smaller elements, too. For instance, say you have an embedded style (Introduction to Styles) for Heading 1 on a given page, making the headings bold and bright pink. If you apply a theme that features a Heading 1 formatted as black, your bright pink headings will remain.

If you have Web pages you've already filled with content, be careful with themes. When you apply a theme, some of your page elements stay as you've set them, while others change. This can create some unexpected problems. For example, say you've formatted some text to be yellow and set it against a blue page background. Then you apply a theme, which doesn't change your text color but replaces your blue background with a yellow and white graphic. The light background would render your text indecipherable.