Simple themes in ASP.net 2.0

•

What is DaniWeb IT Discussion Community?

You're currently browsing the Web Development category of DaniWeb, a massive community of 374,047 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,924 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our Web Development advertiser:

•

ManicCW's Blog

Web Development

Sep 9th, 2006, 5:08 am

Show Printable Version

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:
[HTML]
<asp:Image ID="imgLogo" runat="server" SkinID="Logo" />
[/HTML]

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:
[HTML]
<asp:Image SkinId="Logo" runat="server" ImageUrl="Logo.jpg" Tooltip="Our company logo" AlternateText="Logo" />
[/HTML]

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:

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

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:

Help with Code Tags

(Toggle Plain Text)

Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
        Session("Theme") = "Standard"
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:

Help with Code Tags

(Toggle Plain Text)

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:

Help with Code Tags

(Toggle Plain Text)

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.

Help with Code Tags

(Toggle Plain Text)

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.

This blog entry was written by ManicCW. It has received 5,573 views, 0 comments, and 8 linkbacks. 1 voter has rated this entry 5 out of 5 stars.