Visual InterDev

Applying Themes

See Also

Give your Web design a professional polish by applying themes. A theme is comprised of a set of graphics and cascading style sheets (CSS) that control the styles, font, and other elements. For information on site consistency including themes, see Site Consistency.

You can set a default theme for an entire Web project, or you can apply a specific theme to an individual file.

Applying a Theme to a Project

When you create a Web project, you can you can choose a default theme for the project.

To set a default theme when creating a Web project

• Run the Web Project wizard and select a theme when prompted.

Now, by default, all pages that you create in the Web project will use the default theme.

You can still apply a project default theme even if you did not select one when creating the project.

To apply or change the default theme of an existing Web project

1. In the Project Explorer, select the project name.
   
   
2. From the View menu, choose Property Pages.
   
   
3. In the dialog box, select the Appearance tab.
   
   
4. Under Default Theme and Layout, click the Change button to display the Apply Theme and Layout dialog box.
   
   
5. Click the Theme tab.
   
   
6. Select Apply theme to activate the scrolling list of themes.
   
   
7. Select a theme from the list.

If you later decide that you don't want to use a theme, you can remove it from the project without affecting the content.

To remove a theme from a Web project

1. In the Project Explorer, select the project name.
   
   
2. From the View menu, choose Property Pages.
   
   
3. In the dialog box, select the Appearance tab.
   
   
4. Under Default Theme and Layout, click the Change button to display the Apply Theme and Layout dialog box.
   
   
5. Click the Theme tab.
   
   
6. Select Apply to activate the scrolling list of themes.
   
   
7. At the top of the list, select <none>.

At this point, the theme is no longer applied to the project, but the theme files still exist in the project. If you want to actually remove the files from the project, select the unwanted theme in the _Themes folder and delete it.

Applying a Theme to a Single Page

You can apply a theme to a single page. If the project that contains the page already has a default theme, the page-level theme overrides the project-level one.

To apply or change the theme of a single page

1. In the Project Explorer, select an HTML or ASP page.
   
   
2. From the Edit menu, choose Apply Theme and Layout.
   
   
3. In the dialog box, select the Theme tab.
   
   
4. Select Apply and specify a theme.

If you decide that you do not want a particular page associated with a theme, you can opt to apply no theme or return to the project-level theme.

To remove a theme from a single page

1. In the Project Explorer, select an HTML or ASP page.
   
   
2. From the Edit menu, choose Apply Theme and Layout.
   
   
3. In the dialog box, select the Theme tab.
   
   
4. Select Preserve Current Theme.

   -or-

   Select Apply and then <none> from the list.

   Preserve Current Theme instructs Microsoft^® Visual InterDev™ to use the project's default theme, while <none> explicitly specifies that there is no theme applied to the page.

Note   The Apply Theme and Layout command is disabled when you are working offline.

Previewing a Theme

You can browse through all the available themes in the Apply Theme and Layout dialog box. This preview allows you to test how a theme looks before you apply it to a page or project.

To preview a theme

1. In the Project Explorer, select an HTML or ASP page.
   
   
2. From the Edit menu, choose Apply Theme and Layout.
   
   
3. In the dialog box, select the Theme tab.
   
   
4. Select Apply theme to activate the list of themes.
   
   
5. Click on any theme on the left to display a preview on the right.

   

6. Cancel the dialog box if you do not want to apply the theme.

Visual InterDev fills the list with themes from both your local installation as well as the themes residing on the project's master server. For information concerning theme locations, see "Themes Installed on Your Local Machine" in Site Consistency.

Creating a Custom Theme

Creating a custom theme is as simple as supplying files in the correct locations.

To create a custom theme

1. Create a directory named after your theme.
   
   
2. Add your cascading style sheets to the theme directory.
   
   
3. Add your images to the theme directory.

Creating the Theme Directory

All the elements of a theme are maintained in a unique directory.

To create a theme directory

• On your local machine, create a directory in the _Themes directory.

Note   If you haven't yet applied a theme to a project or to one of the project files, then the _Themes folder won't yet exist in your project.

The name that you give the directory determines the name of the theme.

Later, when you apply the theme using the Apply Theme and Layout dialog box, Visual InterDev will look in the _Themes directory and include your custom theme in the list of available themes. You will also be able to preview your theme in the dialog box along with the other themes.

The theme is automatically copied to the server when you apply the theme to a page or project. Visual InterDev copies the directory and all its files to the server.

Creating a Cascading Style Sheet for a Visual InterDev Theme

Cascading style sheets allow you to format the style of your page without affecting the content. When used in conjunction with themes, you typically:

• Define the font, name, size, and other attributes of tags.
  
  
• Specify image files to use with bulleted lists and horizontal rules.

You can create a cascading style sheet with the CSS editor. You can also use the editor to modify an existing style sheet. For information on the CSS editor, see Editing Style Sheets or CSS Editor Window.

When you have finished editing your style sheet, save it and move it to your theme directory.

Adding Images to the Theme Directory

By default, Visual InterDev references images in the Themes directory. Copy all images that you want to include in your theme into your custom theme directory.

Sharing Customized Themes with FrontPage

Note   Be careful if you are sharing a project between Visual InterDev users and Microsoft^® FrontPage^® users.

If you customize one of the themes that is supplied by Visual InterDev, and then apply the theme to a file using FrontPage, FrontPage might overwrite your customizations.

To avoid this, rename themes when you customize them and use new unique names. Also, in the theme's .inf file, set the title= line to reflect the new theme name.