Visual InterDev
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
In the Project Explorer, select the project name.
From the View menu, choose Property Pages.
In the dialog box, select the Appearance tab.
Under Default Theme and Layout, click the Change button to display the Apply Theme and Layout dialog box.
Click the Theme tab.
Select Apply theme to activate the scrolling list of themes.
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
In the Project Explorer, select the project name.
From the View menu, choose Property Pages.
In the dialog box, select the Appearance tab.
Under Default Theme and Layout, click the Change button to display the Apply Theme and Layout dialog box.
Click the Theme tab.
Select Apply to activate the scrolling list of themes.
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
In the Project Explorer, select an HTML or ASP page.
From the Edit menu, choose Apply Theme and Layout.
In the dialog box, select the Theme tab.
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
In the Project Explorer, select an HTML or ASP page.
From the Edit menu, choose Apply Theme and Layout.
In the dialog box, select the Theme tab.
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 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
In the Project Explorer, select an HTML or ASP page.
From the Edit menu, choose Apply Theme and Layout.
In the dialog box, select the Theme tab.
Select Apply theme to activate the list of themes.
Click on any theme on the left to display a preview on the right.
.gif)
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
Create a directory named after your theme.
Add your cascading style sheets to the theme directory.
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 .
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.