Visual InterDev

Site that Uses Themes Sample

See Also      Tasks

This samples shows how simple HTML pages can be visually changed using themes.

Behind the Scenes

This sample uses three HTML files:

• NoTheme.htm is a simple HTML page that uses three different levels of headers and bullets.
  
  
• Theme1.htm uses the same HTML tags as NoTheme.htm but has the Travel theme applied to it.
  
  
• Theme2.htm uses the Nature theme.

When a theme is applied to an HTML page or the entire Web project, files are copied into the Themes directory of the project. Most of the files are graphics, but there are also some cascading style sheets.

The key to the theme is the cascading style sheet (.css) file. The themes in this example use these different style sheets to create the theme:

<LINK REL="stylesheet" TYPE="text/css" HREF="travel/THEME.CSS" VI6.0THEME="Travel">
<LINK REL="stylesheet" TYPE="text/css" HREF="travel/GRAPH0.CSS" VI6.0THEME="Travel">
<LINK REL="stylesheet" TYPE="text/css" HREF="travel/COLOR0.CSS" VI6.0THEME="Travel">
<LINK REL="stylesheet" TYPE="text/css" HREF="travel/CUSTOM.CSS" VI6.0THEME="Travel">

The first linked file (COLOR0.CSS) sets the colors for links (regular, active, and visited), the six different heading levels (H1-H6), table highlight and shadow colors, and body background color.

The second linked file (GRAPH0.CSS) sets the image and font information for banner and non-graphical navigation controls.

The third linked file (THEME.CSS) sets the font family for the body, the six heading levels and the background image.

All the graphical navigation controls are in the final linked file (CUSTOM.CSS) along with all the bullet levels.