HOW TO: Add a CSS Style Sheet Reference to All Web Forms in a Visual Basic .NET Web Project (323843)

SUMMARY

This step-by-step article describes how to create a custom Web Form template so that you can include a cascading style sheet (CSS) reference in all Web Forms in a Visual Basic .NET Web project.

Typically, Web site designers must maintain a consistent look and feel on every page for a particular Web site. This article describes how to create a custom Web Form template that contains a link to a CSS style sheet. When you create all Web Forms in an application with this template, you provide an easy way to maintain a consistent design across the site.

The technique that is described in this article is based on the concept of Microsoft Visual Studio .NET Enterprise Templates. For more information, see the "References" section of this article.

back to the top

Edit the WebProjectItems.vsdir File

1. In Notepad, open the WebProjectItems.vsdir file from the C:\Program Files\Microsoft Visual Studio .NET\Vb7\VBProjectItems\Web Project Items folder.
   
   -or-
   
   If you are using Microsoft Visual Studio .NET 2003, open the WebProjectItems.vsdir file from the C:\Program Files\Microsoft Visual Studio .NET 2003\Vb7\VBProjectItems folder.
2. Add the following text to the end of the file:

   ..\MyCustomWebForm.vsz|{164B10B9-B200-11D0-8C61-00A0C91E29D5}|My Custom WebForm|10|#3063|{164B10B9-B200-11D0-8C61-00A0C91E29D5}|4533| |WebForm.aspx
   					

3. Save the file.

back to the top

Create a Custom Web Form Wizard

1. Open the C:\Program Files\Microsoft Visual Studio .NET\Vb7\VBProjectItems folder.
   
   -or-
   
   If you are using Microsoft Visual Studio .NET 2003, open the C:\Program Files\Microsoft Visual Studio .NET 2003\Vb7\VBProjectItems folder.
2. Copy the WebForm.vsz file to the MyCustomWebForm.vsz file.
3. In Notepad, open the MyCustomWebForm.vsz file, and then change the Param value as follows:

   Param="WIZARD_NAME = MyCustomWebForm"
   					

4. Save the file.

back to the top

Create a Custom Web Form Template

1. Open the C:\Program Files\Microsoft Visual Studio .NET\Vb7\VBWizards folder.
   
   -or-
   
   If you are using Microsoft Visual Studio .NET 2003, open the C:\Program Files\Microsoft Visual Studio .NET 2003\Vb7\VBWizards folder.
2. Copy the WebForm folder to a new folder that is named MyCustomWebForm.
3. Open the C:\Program Files\Microsoft Visual Studio .NET\Vb7\VBWizards\MyCustomWebForm\Templates\1033 folder.
   
   -or-
   
   If you are using Microsoft Visual Studio .NET 2003, open theC:\Program Files\Microsoft Visual Studio .NET 2003\Vb7\VBWizards\MyCustomWebForm\Templates\1033 folder.
4. In Notepad, open the WebForm.aspx file, and then add the following link reference (which appears indented) between the <meta name=vs_targetSchema> tag and the closing </head> tag as follows:

   ...
       <meta name=vs_targetSchema content="[!output DEFAULT_TARGET_SCHEMA]">
       <link id="link1" rel="stylesheet" href="myStyleSheet.css" type="text/css">
   </head>
   ...

5. Save the file.

back to the top

Test the Link Reference

1. Start Microsoft Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual Basic Projects under Project Types, and then click ASP.NET Web Application under Templates.
4. On the Project menu, click Add New Item to add a style sheet to the project, and then name the style sheet myStyleSheet.css.
5. Set the background color of the body element to blue for testing purposes.
6. On the Project menu, click Add New Item.
7. Click My Custom Web Form under Templates, name the file, and then click Open to add a custom Web Form to the application. Notice that the style sheet is applied automatically to the new Web Form and that the background is blue.

back to the top