ASP.NET Themes and Skins

ASP.NET Themes and ASP.NET skins are another method of adding style and consistency to ASP.NET pages without managing each page and control separately. Themes and skins are an alternative to using Master Pages.

ASP.NET themes are a unified look which can be applied to every page in a web site. ASP.NET skins are also like a theme, but it can be applied to Controls like Buttons Controls, DropDownList Controls. The following ASP.NET tutorial helps you learn the basics on ASP.NET Themes and ASP.NET Skins with a sample Theme you can build on.

Creating an 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.

 

2.    Rename Theme1 to “myTheme”.

 

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.

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.

Applying Theme to a Web Site

The best and the fastest way to tell every page and every control in a web site to use a given theme is to code it in the “web.config” file. The following steps show you how to make a theme available site wide.

1.    Open the “web.config” file from the Solution Explorer.

Note:  If you do not have a “web.config” file, run the application for the first time, and it will ask whether to create one or not.

2.    Go to the element starting with “<pages” within the “<system.web>” section.

Note:  If the “web.config” file does not have “<pages” just type in this tag, and Visual Studio will suggest and help you auto fill it.

3.    Add the following code snippet after the “<pages” for the “theme” attribute.

<pages theme="myTheme">

</pages>

At runtime, every page in the web site now knows to use the “myTheme” ASP.NET theme. This ASP.NET theme makes the DropDownList and the Button Controls within the pages to use the “myTheme” ASP.NET theme styles.

You also can use the “styleSheetTheme” attribute instead of the theme attribute. The “styleSheetTheme” attribute allows local setting to override the global theme.

<pages styleSheetTheme="myTheme">

</pages>

Applying Theme to a Page

You also have the capability of setting a theme for an individual page alone by configuring its “theme” or “styleSheetTheme” settings. This allows different themes on different pages. The following steps show you how to apply a theme to an individual page.

1.    Remove any themes assigned in the “web.config” file. (Check Assigning a theme to the whole Web Site). This is because if you leave the theme declared in the “web.config” file, it effects for whole site, thus it overrides any theme applied to an individual page locally.

2.    Go to the Design View of the ASP.NET page.

3.    Select the page by clicking on the blank area and go to the Properties Window of the Document Object (You can also press F4).

4.    Set the “StyleSheetTheme” property to the name of you preferred theme (“myTheme”).

5.    Drag and drop a DropDownList and a Button Control on the page and you will see how the IDE looks up the “myTheme” ASP.NET theme and applies the style information in the Design View.