Asp.net Themes and Skins

Introduction to ASP.NET 2.0 Themes
6/7/2006 9:02:58 AM

In this article we will try to cover one great feature of ASP.NET 2.0, i.e. Themes. Themes are the great way to customize user-experience in the web application. Themes are used to define the look and feel of the web application, similar to the use of Cascading Style Sheets (CSS). Unlike CSS, themes can specify the look of the server-side control like a tree-view control, how they will appear when they are rendered by the browser.

In this article we will try to cover one great feature of ASP.NET 2.0, i.e. Themes. Themes are the great way to customize user-experience in the web application. Themes are used to define the look and feel of the web application, similar to the use of Cascading Style Sheets (CSS). Unlike CSS, themes can specify the look of the server-side control like a tree-view control, how they will appear when they are rendered by the browser.

A theme once they are created can be used in one of the following two ways.

1. Themes can be used as a style sheet, which is similar in nature as the regular CSS,
2. Themes can be used as customized themes, which change the order of preference for style rules, and will specify the style to use for each element, overriding any style preference specified in a separate style sheet, or even in the style attribute of an element.

The process of creating a theme involves creation of .skin file which have the definition of appearance of each element on the page, and ASP.NET puts this skin file within a folder name of which specifies the name of the theme. All the themes created are placed under a folder named App_Themes with in your application folder.

Let us do some hands on to get a feel of the same. But Make sure SQLSERVER 2005 EXPRESS is installed and running.

To Create a theme, right-click solution explorer, or the root folder, and select Add ASP.NET Folder [ Theme (see Figure 1).

Figure 1 - Creating a Theme

This will create an empty folder within the APP_Theme folder. Let us re-name the folder as Blue Theme. By Right clicking the App_Theme Folder and selecting Add ASP.NET Folder, create another theme folder named Red Theme.

Now Right –Click the Blue theme folder and select Add New Item. In the Dialog box select Skin File and name it as MyBlueSkin (see Figure 2).

Figure 2 - Naming a Theme

<%--
Default skin template. The following skins are provided as examples only.

1. Named control skin. The SkinId should be uniquely defined because
duplicate SkinId's per control type are not allowed in the same theme.





2. Default skin. The SkinId is not defined. Only one default
control skin per control type is allowed in the same theme.

In the same way create the MyRedSkin skin file in the Red Theme Folder.

Now let us add one web page and name the same as StyleSheetDemo.aspx. In the page we add one label control, name it as label1 and one textbox control name it as TextBox1.

The page will look like Figure 3.

Figure 3 - The Style Sheet Demo Page for the Theme

Now we will add some code in the MyBlueSkin skin file which we created earlier.

The code will be as follows:

<asp:Label runat="server" backcolor="blue" forecolor="red" font-size="xx-large" font-names="arial" />
<asp:TextBox runat="server" backcolor="cyan" forecolor="blue" font-size="xx-large" font-names="arial" />

Now double-click the web.config file and put a section as follows:

xml version="1.0"?>
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation debug="false" strict="false" explicit="true" />
<pages theme ="Blue Theme" />
<authentication mode="Windows" />
system.web>
configuration>

Now save the web.config and put a little code in Page_Load Method of the StyleSheetDemo.aspx

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Label1.Text = "Theme demo"
TextBox1.Text = "My Blue Theme"
End If
End Sub

Now run the page by right clicking it and selecting View in Browser. The page will be like Figure 4:

Figure 4 - The Themed Web Page

Now in the same way add a skin file in the Red Theme folder and name it as MyRedSkin.skin. Then add the following code in the skin file.

<asp:Label runat="server" backcolor="red" forecolor="blue" font-size="small" font-names="arial" />
<asp:TextBox runat="server" backcolor="blue" forecolor="white" font-size="small" font-names="arial" />

Change the web.config file as follows:

<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation debug="false" strict="false" explicit="true" />
<pages theme ="Red Theme" />
<authentication mode="Windows" />

Now run the page in the browser and will find the similar result as in Figure 5.

Figure 5 - Results of web.config change

With the profile you can allow the user to select the themes.

We will create another demo web site to see the same.

Open Visual Studio 2005 or Visual Web developer 2005 Express and select Open Web Site. Click the new folder Icon and type in ProfileandThemes (see Figure 6) and then click Open. This will create an empty web site, where we can put anything as we wish.

Figure 6 - Creating a new folder for a Web site.

Now we will put a web.config into the we site by right-click the web folder and then selecting Add New Items. In the dialog box (see Figure 7) select Web Configuration File and click add.

Figure 7 - The Add New Item Dialog

Delete the content of the web.config file to match up what is displayed in Figure 8.

Figure 8 - The web.config file

Now put the following code between

<anonymousIdentification enabled ="true" />
<profile>
<properties>
<add name="UserName" defaultValue="MyUserName" allowAnonymous ="true"/>
properties>
profile>

Now create a web page and name it as ProfileTheme.aspx

Set the page as shown in Figure 9.

Figure 9 - Creating a page with a label and theme.

Now add another page and name it as Settings.aspx In the source view mode of the ProfileTheme.aspx, type in the following code just after the label control.

<strong>Welcomestrong>
<asp:Label ID="Label1" runat="server" Text="Label" Width="208px" Font-Bold="True">asp:Label>
<a href="Settings.aspx">Settings.aspxa>

This create as hyperlink for the settings page in the profilethemes page.

Now put some controls in the settings page. The page should look like Figure 10:

Figure 10 - Settings.aspx page with textbox and Save button.

Now we need to put some code. Double click the Button and in the click event write the following code:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Profile.UserName = TextBox1.Text
Response.Redirect("ProfileTheme.aspx")
End Sub

Mdify the ProfileTheme.aspx page and add a textbox control there. And add a little bit of code in the page load event:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
Label1.Text = Profile.UserName
TextBox1.Text = "Themes with Profiles"
End If
End Sub

Now create the two themes in the same way we discussed earlier. This because in this demo I am going to use the same themes. Now in the web.config file add the following property:

<profile>
<properties>
<add name="UserName" defaultValue="MyUserName" allowAnonymous ="true"/>
<add name ="MyThemes" defaultValue ="Blue Theme" allowAnonymous ="true" />
properties>
profile>

And we will make some more changes in the Settings page now, to allow the user to select a theme. Add a dropdowncombo and Enter the theme names in the items box. The page should look like Figure 11:

Figure 11 - Page now with DropDownCombo control added.

Add the following code in the Page load event of the settings page:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
DropDownList1.Items.FindByValue(Profile.MyThemes).Selected = True
End If
End Sub

And also modify the Click Event of the Save button.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Profile.UserName = TextBox1.Text
Profile.MyThemes = DropDownList1.SelectedValue
Response.Redirect("ProfileTheme.aspx")
End Sub

In the ProfileThemes.aspx page add the following code:

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs)
Page.Theme = Profile.MyThemes
End Sub

Now run the application. This will create a SQL SERVER database file automatically and will store all the information regarding a User Profile.

So whenever the user log on to the website, he will find his settings intact (see Figure 12).

Figure 12 - Final page

In this demo I have used lot of modifications in the source and code. This could have been avoided. But If you follow all the steps and at any point of time try to test the application you can do that. I have also included some overview about the profiles to make you understand how the user settings area stored.