Simple themes in ASP.net 2.0

[ManicCW]

ASP.net 2.0 introduced themes. Theme consists of several files: CSS styles, skin file and images. You create theme by adding App_Themes folder in your project in solution explorer panel.

Right click on project - Add ASP.net folder - Theme

Now that we created theme we can add files into it. The best practice is to add only one CSS file to lower bandwidth usage.

When you add asp.net control in asp.net page or user control you can set up SkinId property of the control. Here is the example of how to customize logo for themes:

aspx page:

<asp:Image ID="imgLogo" runat="server" [B]SkinID="Logo"[/B] />

Now we need to create new skin file. Right click on Theme folder and choose Add New Item - Skin File.
In skin file you can add elements and give them properties like:

skin file:

<asp:Image SkinId="Logo" runat="server" ImageUrl="Logo.jpg" Tooltip="Our company logo" AlternateText="Logo" />

Now you need to create Logo.jpg file and put in in Theme folder.
To apply default theme put StylesheetTheme and Theme properties in Page declaration of the aspx page like:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"
    StylesheetTheme="Standard" Theme="Standard" %>

Test it and see that theme is applied to page.

How to set up theme runtime?

There are many ways to set up theme depending on user choise. I have set up page where user can choose theme from dropdownlist. First I have added default theme in Global.asax file, like:

Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
        [B]Session("Theme") = "Standard"[/B]
End Sub

In aspx page I have one dropdownlist which is filled with Theme names. Here is the sub to fill dropdownlist with theme names:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack = False Then
            Dim dirs As String() = IO.Directory.GetDirectories(Server.MapPath("~/App_Themes/"))
            For Each dir As String In dirs
                Me.cmbTheme.Items.Add(dir.Substring(dir.LastIndexOf("\") + 1))
            Next
            'set current settings
            Me.cmbTheme.SelectedValue = Me.Page.Theme
        End If
    End Sub

When you choose theme from list you need to click button "Save settings" to set theme:

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
        Session("Theme") = Me.cmbTheme.SelectedValue
End Sub

For all this to work you need to add this code in PreInit event of the page you are setting theme for.

Me.Page.Theme = Session("Theme")

To see how all this works go to http://www.akcija.ba and click on link "Postavke", there choose a theme (Standard or Ocean) and click button "Spremi". IF you want your setting permanently saved check "Trajno spremi moje postavke" option.