Introduction
This article talks about ASP.NET themes. When do we need to have themes in our
application. How can we implement themes and let the user change themes.
Background
Web applications mainly has two major aspects. One is functionality and other is usability.
Functionality is the core set of features that the web application provide to the user. Usability
is how easy and convenient it is for the user to use the web site.
There is one more aspect that most web developers tend to overlook. Developers mostly
get so involved in implementing the functionality and usability of a web application that
they forget about the appearance of the web site i.e. look and feel of the website.
The web site appearance is also an important aspect. The appearance can then further have two aspects.
One is that the user should be able to have a personalized web site. Secondly, if the website caters to
multiple type of users then the appearance should change according to the user.
To achieve these two ASP.NET provides
- ASP.NET Themes: This let the developer to create separate predefined themes for the application. This
can be used to show provide different appearance to different category of users and also to let the
user choose a theme from the predefined themes.
- Personalization using User Profiles: Using this we can have users specify there own preferences for appearances. This is
also used to remember the returning users.
In this article we will be discussing about the ASP.NET Themes. The personalization and user profiles needs a separate
discussion altogether and perhaps I will write a separate article for that.
Using the code
Typically a web application contains various pages. each page can have a lot of
server controls. The basic idea behind ASP.NET themes is that the web site is developed in
such a way that making a change in one place will result an appearance change across all the pages and
all the controls.
How do we specify the appearance of controls
There are two ways we can specify the appearance of our web pages and controls.
- Using controls' markup - Here the asp.net server control contains the appearance specific attributes
- Cascading style sheet(CSS) - Using
CSS
to control the appearance of rendered HTML page.
Along with these we will have graphics on our web pages. Typically these graphics will be in form of
images that will be used in the web pages.
Now lets say we are using all these above mentioned ways to have the desired appearance
on our web page. If we want the user to give a possibility to change the appearance, do we
have to change all these things dynamically in the complete code-base. Or is there a better way?
ASP.NET Themes to the rescue
To facilitate the dynamic change of appearance ASP.NET make use of themes. The basic idea of themes
is to externalize the appearance related logic from web pages. We put all the appearance related code
for all the pages and controls in a single location and call this it a theme.
Now if we need multiple set of appearances, we can have multiple themes. All the themes will
specify separate appearance for the controls and pages of our websites. to change the appearance of the
website we just need to change the theme and the change will effect the entire website automatically.
We can create an APP_Themes
folder in the web site to contain the the themes. Every theme folder could
contain three type of things.
Skins
- These will be used to configure the appearance that user specified in server controls
CSS
files - These will be used to configure the appearance attributes that are expecting CSS
style.
- Images and other resources - Every theme could have separate set of resources so that the page
graphics will change as the theme is changed.
Implementing Themes
Let us now try to implement themes in a small dummy application. We will create a single page
website that will contain a company Logo, a website heading and some static text in the page.
We will create two themes for this website. One Light
theme and another Dark
theme.
The image for the logo will be specified in a Skin
file. The appearance of the heading will also come from the Skin
file. The web page background and foreground text appearance will be specified in
a CSS
file.
SO with all the above requirements we will need 2 themes - "Light
" and "Dark
". These themes will
contain Skin files to specify logo image and heading's appearance. Each theme will contain a CSS
file
containing the background color and foreground text colors. finally each theme will have the logo
image specific to the theme.
Let us look at the skin
file of each theme.
<%--Skin file of Dark Theme--%>
<asp:Image runat="server" ImageUrl="dummy-logo.png" Height="100px" Width="100px"/>
<asp:Label runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="White"></asp:Label>
<%--Skin file of Light Theme--%>
<asp:Image runat="server" ImageUrl="dummy-logo.png" Height="100px" Width="100px" />
<asp:Label runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="Black"></asp:Label>
Let us look at the CSS
file inside each theme
table
{
background-color<span class="code-none">:Black<span class="code-none">;
color<span class="code-none">: White<span class="code-none">;
<span class="code-none">}
td
<span class="code-none">{
border<span class="code-none">:Solid 1px White<span class="code-none">;
border-collapse<span class="code-none">:collapse<span class="code-none">;
<span class="code-none">}
<span class="code-comment">
table
{
background-color<span class="code-none">:Silver<span class="code-none">;
color<span class="code-none">: Black<span class="code-none">;
<span class="code-none">}
td
<span class="code-none">{
border<span class="code-none">:Solid 1px Black<span class="code-none">;
border-collapse<span class="code-none">:collapse<span class="code-none">;
<span class="code-none">}
</span></span></span></span></span></span></span></span></
Applying Themes
Themes can be applied in a number of ways. Let us first look at the non Programmatic ways of
applying themes. This way will be useful if we want to show any particular theme to a particular
category of users.
- Specifying theme in
@Page'
s Theme
attribute - This will effect the current page only.
- Applying themes in
<pages Theme="">
inside web.config
- This will apply to all pages in the website.
- Specifying theme in
@Page
's StyleSheetTheme
attribute - This will effect the current page only.
- Applying themes in
<pages StyleSheetTheme="">
inside web.config
- This will apply to all pages in the website.
If there are muliple places themes are specified, the first one will take precedence over the second one
(considering the order mentioned above).
For now let us go ahead and specify the default theme in our web.config
as
<pages theme="Light"></pages>
Now when we run the application we will see the default theme as "Light
" theme.
Programmatically Changing Themes
If we need the user to have an option for changing themes then we need to change the
theme through code. To do that we have to provide some way for the user to change the theme.
Then once we get the theme change request we need to change the Page.Theme property in the Pre_Init
of the page.
Let us have a dropdowm
for the user using which he can switch themes. the code behind for the
page will look like
protected void Page_PreInit(object sender, EventArgs e)
{
string theme = Session["theme"] as string;
if (theme != null)
{
Page.Theme = theme;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
DropDownList1.SelectedValue = Page.Theme;
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Session["theme"]= DropDownList1.SelectedValue;
}
Note: Here I have set the autopostback
property of drop down to true
and used Session
variables to
store the newly selected theme. there are other much more elegant ways of doing this. I have written
this way just to keep it simple and illustrate that Pre_init
method is the only place where themes
can be changed.
Let us now change the theme to Dark and see the result.
Points of Interest
Nowadays most websites use CSS
to control the appearance of the websites. Still understanding and
knowing themes has its benefits. I can have multiple CSS
files and still use themes to control the
appearance of the website. The other aspect of appearance is the personalization using User Profiles
. Perhaps I will
create a separate article for that. This article was written from
the perspective of an absolute beginner. I hope this article has been informative.
History
- 09 July 2012: First version.