Creating Your Own Visual InterDev 1.0 Themes

Delane Hewett
Visual InterDev Program Management, Microsoft Corporation

March 1997

Introduction

What is it that separates an aesthetically pleasing Web site from a not-so-pleasing site? More often than not, a great site is identified by its distinctive and consistent appearance. Many such Web sites are developed by teams or individuals with skills in both Web technologies and the graphic arts. Unfortunately, many of us don’t have the luxury of delegating for skills that we don’t possess ourselves. Some of us who can throw together a Web site that is pretty impressive from a technical perspective are often disappointed by our inability to get the visually professional look that today’s sites demand.

Microsoft® Visual InterDev™ themes can help you achieve that consistent, professional look that so often eludes the graphically-impaired. (The more talented can use them just to make things easier.) Themes combine a recent W3C Web technology called Cascading Style Sheets (CSS) with graphical elements such as background images, headings, rules, bullets, and buttons to give your Web site a visual flair that will attract users. For more information about Cascading Style Sheets, see the W3C Working draft “Cascading Style Sheets, Level 1,” at http://www.w3.org/TR/WD-layout.html.

Technically Speaking, What Is a Theme?

A theme, in the Visual InterDev sense, is a collection of graphic images, formatting, fonts, and colors that look good together. When you apply a theme to your Web site, these elements are applied to all the pages in your site, making them all look good together. A set of pre-designed themes comes with Visual InterDev. You can also install third-party themes or create your own.

Theme elements include:

• Fonts (managed through Cascading Style Sheets)
  
  
• Background images
  
  
• Heading images
  
  
• Rule images
  
  
• Bullet images
  
  
• Navigational images, such as buttons

These elements are stored in a directory structure which defines the theme. You’ll find an example of the directory structure of one of Visual InterDev’s pre-designed themes, Redside, below.

Themes
    Redside
       Preview.bmp
       StyleSheets
           Style1.css
           Style2.css
       Backgrounds
           Back1.jpg
           Back2.jpg
           Back3.jpg
       Headings
           Head1.jpg
           Head2.jpg
           Head3.jpg
       Bullets
           Bullet1.gif
           Bullet2.gif
           Bullet3.gif
       Navigation
           Button1.gif
           Button2.gif
           Up.gif
           Down.gif
           Right.gif
           Left.gif
           Nav1.gif
           Nav2.gif
           Nav3.gif
       Rules
           Rule1.gif
           Rule2.gif
           Rule3.gif

The name of the parent directory is the name of the theme. The directory structure and the file names remain the same for all themes. Only the theme name (that is, parent directory name) is different.

Creating and Modifying Themes

To create a theme, all you have to do is create a directory with your theme’s name and create at least one subdirectory with the same structure and name as one of those in the example above. When you add your graphical elements and style sheets, give them the exact names called for in the structure (that is, Style1.css, and so on), and place the files in the appropriate directories.

You can create your own style sheets (See Appendix A), modify the graphic images, or use Microsoft Image Composer to create new graphical elements for your own theme. Just add them to the appropriate directories and you’re on your way.

You can also customize one of the pre-designed Visual InterDev themes or install third-party themes into your Themes directory. To modify any one theme, you simply go into the directories that contain the images that you want to modify. Replace the old files with your new ones (keeping the same names). If you don’t want to use all the possible elements in a theme, just delete the existing files from the directory—Visual InterDev ignores missing files and directories—and, voilá, you’ve got a customized theme.

Theme Location—Where Do These Things Live?

If you use the Data Form wizard or certain templates to create a Web page, you will be prompted to choose a theme from a theme list. (See “Creating Your Own Visual InterDev Templates” for more information.) If your custom theme directory structure is under the default Themes directory, your theme will appear in this theme list.

If you chose the Typical Setup option during installation, themes are stored in a directory called “Themes” under the install directory for Visual InterDev. To change the default directory:

• Open the registry to the following node:

  [HKEY_CURRENT_USER\\Software\Microsoft\DevStudio\5.0\Directories]
  

• Change the value of ThemeDir to the new default directory.

For example, the following setting indicates a new default directory of \\Server\Share\MyThemes:

[HKEY_CURRENT_USER\\Software\Microsoft\DevStudio\5.0\Directories]
    "ThemeDir" = "\\Server\Share\MyThemes"

Using Themes

There are various ways that you can use themes and their components in your Web site.

• You can incorporate themes into your Web site through the Visual InterDev templates.
  
  
• You can use individual components of themes in a specific Web page.
  
  
• You can use themes with Active Server Pages to increase your options in dynamic Web sites.

Using Themes with Visual InterDev Templates

The Template Page wizard in Visual InterDev makes using themes a very easy process. If you use a template page which contains the string "<%#ThemeName#%>", the wizard will prompt you to choose one of the themes from your default Themes directory.

For example, you could add the following line to a template in the default Templates directory:

<SRC=<%#THEMENAME#%>/Bullets/Bullet2.jpg>

When the wizard processes the template, you are prompted to choose a theme. If you choose, for example, your High Tech Corporate theme, the following line appears in your HTML text:

<SRC= High%20Tech%20Corporate/Bullets/Bullet2.jpg>

Note   HTTP paths should not have blanks. Substitute “%20” for the blank space.

Using Theme Components Directly

Theme components are stored on your file system and therefore can be used in any of your Web pages. You don’t need to do anything special, just add them to your project. Each image and style sheet is stored in a directory named for its corresponding theme.

Using Themes with Active Server Pages

If you have a dynamic site composed of Active Server Pages, you might like to have all your pages share a theme, but want to maintain the ability to switch between themes.

Consider building your site using themes stored to session properties throughout all the pages. You can set the session property equal to the theme’s name. This way, the actual name of the theme occurs in only one place in your Web site, but every page shares that theme through the session. The following is an example of a simple page using a theme based on a session property. The bold text is the code representing the theme.

<%
If Session("Theme") is Nothing then
Theme = "defaulttheme"
Else
Theme = Session("Theme")
End If
%>
<HTML>
    <HEAD>
        <LINK REL=STYLESHEET HREF="./stylesheets/<%=Theme%>/style1.css">
        <TITLE>Here is the Title </TITLE>
    </HEAD>
    <BODY BACKGROUND="./images/<%=Theme%>/Background/back1.jpg" 
alink="#FF000" BGCOLOR="#FFFFFF" TOPMARGIN=20 LEFTMARGIN=0>
        <Center>
            <H1>Hello World! </H1><BR>
            <P><IMG SRC="./images/<%=Theme%>/Rules/Rule1.gif"
ALT="[Horizontal Rule Image]" ALIGN="Bottom" 
WIDTH=80% HEIGHT="25"></P>
        </Center>
    </BODY>
</HTML>
        

Your Global.asa file would contain an entry such as:

<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Sub Session_OnStart
    Session("Theme") = "RedSide"
End Sub
</SCRIPT>

Themes won’t solve all the problems of a graphically-impaired Web site developer. They won’t help you with aspects of page layout such as frames, nor will they help you incorporate multimedia components. But using themes, you can bring a professional, distinct, consistent look to your Web sites.

Appendix A—Visual InterDev Theme Style Sheet Template

Below is an example of a simple linked style sheet used by a Visual InterDev theme. This example contains the minimum styles that need to be defined for a theme-driven page design. Thus, it can be used as a template for your own style sheets. Remove the comment lines before you use the style sheet. There are some attributes of the W3C style sheet spec that are not yet supported by Microsoft Internet Explorer 3.0, notably letter spacing and some of the more interesting flexible background image tiling properties.

Visual InterDev themes contain two style sheets. In Style1.css we define the <p> tag as 12pt/15pt "Arial", in Style2.css we have 12pt "Arial" (with no leading defined).

Caution   Style2.css breaks any page that has a <form> tag on it. (It makes it look like the form is off the page.)

/* set the left margin for rules (lines) and text not enclosed in <p> tags */
BODY { 
    margin-left: 0px;
    text-align: left;
    background: transparent;
    border: black;
    color: gray
    } 
/* set the left margin and attributes for general text */
 P { 
    color: darkGray;
    text-indent: 0in; 
    font: 8.5pt/23pt "Verdana"
    line-height: -3in;
    margin-left: 1.5in;
    }
 LI { 
    display: list-item; 
    margin-left: .5in 
    }        
 DL { 
    display: list-item; 
    margin-left: 2.5in 
    }        
 DT {
     display: list-item; 
    text-align: left;
    margin-left: 1.5in; 
    font: 9pt/10pt "Verdana";
    font-weight: bold;
    color: navy
    }
 DD {
     display: list-item; 
    font: 9/15pt "Verdana";
     text-align: left;
     margin-left: 1.5in; 
    color: gray
    }
 
 H1 {
    font: 22pt/20pt "Verdana";
    background: transparent ;
    margin-left: .25in;
    color: navy
    }
 H2 {
    font: 16pt/18pt "Verdana";
    background: transparent ;
    margin-left: .25in;
    color: navy
    }
 H3 {
    font: 14pt/14pt "Verdana";
    background: transparent ;
    margin-left: .25in;
    font-weight: bold;
    color: navy
    }
 H4 {
    font: 12pt/12pt "Arial";
    background: transparent;
    margin-left: 1.5in;
    color: navy
    }
 H5 {
    font: 9pt/10pt "Arial";
    margin-left: 1.5in;
    font-weight: bold;
    background: transparent;
    color: gray
    }

 B, STRONG { 
    font-weight: bold
    } 
 I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { 
    font-style: italic 
    }
 PRE, TT, CODE, KBD, SAMP { 
    font-family: monospace 
    }
/* the link colors will be overwritten for the nav bars (they are hardcoded to white) */
 A:link {
    color: coral; 
    text-decoration: none
    }
 A:visited { 
    color: red ;
    text-decoration: none
    }  
 A:active { 
    color: orange ;
    text-decoration: none
    } 

Appendix B—Theme Elements and Image Requirements

Below is the list of necessary elements for Visual InterDev themes. Because the names of the elements are hardcoded into the wizard-generated HTML pages/templates, the directory structure is an important part of making the theme work effectively.