4.1 Creating an ASP.NET Theme

« Previous Chapter

Next Chapter »

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

2. Rename Theme1 to “myTheme”.

Renaming Custom ASP.NET Theme

3. 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

4. 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" />

5. Right Click on the “myTheme” folder and Add a new Style Sheet named “myCustom.css” to the Project.
6. 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.

« Previous Chapter

Next Chapter »

Table of Contents

Chapter 1 - Placing Style Rules
        Chapter 1.1 - Visual Studio Auto Format
        Chapter 1.2 - Inline/Hardcoding Styles
        Chapter 1.3 - Local Style Tag
        Chapter 1.4 - ASP.NET External CSS
Chapter 2 - Visual Studio Style Sheets Tools
        Chapter 2.1 - Using ASP.NET External CSS
        Chapter 2.2 - Generated Styles
Chapter 3 - Styling with Master Pages
        Chapter 3.1 - Creating Styled ASP.NET Master Page
        Chapter 3.2 - Connecting Styled ASP.NET Master Page to Regular Page
Chapter 4 - ASP.NET Themes and Skins
        Chapter 4.1 - Creating an ASP.NET Theme
        Chapter 4.2 - Applying Theme to a Web Site
        Chapter 4.3 - Applying Theme to a Page

[top]