Themes and Skins in ASP.Net 2.0

To add a theme for a particular page you have to use the ‘Theme’ attribute in the Page directive of an .aspx page. For example, if you want to add the BasicBlue theme for a particular page, the page directive for that page would look like,

<%@Page Language="VB" Theme="BasicBlue" %>

The above line of code makes all the controls in a particular page follow the theme BasicBlue. It is also possible to make all the pages of a web application to have a consistent look. A theme can also be applied to all the applications in a server. To apply a theme for all the pages of an application the theme has to be declared in the web.config file of the application. The following code in the web.config file applies the theme BasicBlue at the application level, for all the pages of the application.

<configuration>
<system.web>
<pages theme="BasicBlue" />
</system.web>
</configuration>

Once you state the theme at the application level in the web.config file, it is not necessary to give it in all the pages of the application. If you do not want the theme to be applied to a particular page, you can do so, by disabling the theme for that particular page alone. This can be done by making the ‘EnableTheming’ attribute of the page directive to False.

To apply theme for all the applications in a server, you need to declare the theme in the machine.config file. Declaring a theme in the machine.config file applies that theme to all the applications in the server. The code below shows, how to apply the theme for all the applications in a server. This code has to be there in the machine.config file.

<pages ...
...
...
theme="BasicBlue" >...
</pages>

If you want to avoid applying a theme, declared in the machine.config file, for a particular application, you can do so by using the following code in the web.config file for that application.

<configuration>
<system.web>
<pages theme="" />
</system.web>
</configuration>

You can create your own themes for an application. To create your own theme, you need to create skins. Skins are just CSS applied to the controls in a page. The file in which the CSS for the controls are given, should have an extension “.skin”. Skins are usually created in a Themes folder within the projects folder for an application. You can see the Themes folder in the Solution Explorer in Visual Studio .Net. The themes folder will have a folder icon with a brush. Within the Themes folder you can create different themes in separate sub-folders which contain the .skin files.

To create a skin for a label control, the skin file would have the code like,

<asp:Label Runat="server" ForeColor="#0000FF" Font--Names="Arial"
Font-Size="Small" />

The above will make a label control to have Blue color fonts in it and the Font type would be Arial and of size Small. To apply this skin to all the label controls of a particular page you have to declare the theme of this skin at the page level in the page directive. If you have many skins for a particular theme and you want to apply a particular skin for a single label control, you can do so by using the SkinID attribute of that control. The following code applies a skin for a single textbox control:

<asp:Textbox ID="TextBox1" Runat="server"
SkinId="SkinName">Textbox1</asp:Textbox>

Apart from applying themes at the page level, application level, and server level in design time, ASP.Net 2.0 allows you to apply themes to your aspx pages during runtime. You can access the Page.Theme property in your code to specify a particular theme during runtime. If you are changing the theme for a particular page during runtime, it is advised to change the theme in the Page_PreInit event, as themes are applied to the page before the occurrence of the post back event for that page.

Useful Resource: CSS Video Tutorial