4.1 ASP.NET Theme

Themes and skins are good for adding style and consistency to ASP.NET pages without managing each page and control separately. But in order to use ASP.NET Themes and ASP.NET skins, you should first create and ASP.NET Theme.

ASP.NET by default searches for available themes in a folder called App_Themes . The following steps show you how to create this folder and start a new theme, and design skins for two ASP.NET Controls.

  1. Right click the Project name in the Solution Explorer and select Add ASP.NET Folder - -> Theme from the Context Menu.

Adding App_Theme Folder
Adding App_Theme Folder

  1. Rename Theme1 to myTheme.

Renaming Custom ASP.NET Theme
Renaming Custom ASP.NET Theme

  1. Right Click the myTheme folder and add a Skin File named customSkin.skin. The customSkin.skin file will open with the default skin template.

Adding customSkin.skin File
Adding customSkin.skin File

  1. At the bottom of the customSkin.skin File, after the --%> markup, enter the following skin description code.
<asp:DropDownList runat="server"
    CssClass="myCustomStyle" >
    </asp:DropDownList>

<asp:Button runat="server"  BorderStyle="Dotted"
    CssClass="myCustomStyle" />
  1. Right Click on the myTheme folder and Add a new Style Sheet named myCustom.css to the Project.
  2. Add the following Style Class into the myCustom.css.
.myCustomStyle
{
      background-color:#ccffcc;
      font-style: italic;
      font-family: Arial, Tahoma, 'Trebuchet MS';
      font-size: xx-large;
}

Now you have successfully created a skin for an ASP.NET DropDownList Control and a Button Control. The content of the customSkin.skin declares that all controls of these types should use the CssClass called myCustom.css. The myCustomStyle class is in the myCustom.css.

The Button control has been programmed to use a dotted border style in the customSkin.skin. This property isn’t part of the style sheet and therefore applies only to buttons and not to the DropDownList control.

Table of Contents