DotNetStories
How to create selectable themes in your ASP.Net applications
In this post I am going to show you something that we see in most websites. When we visit a website we are given the choice through a control to select the theme(colors,font size,font family) that we want to be applied to the site.
In almost all asp.net web sites we define the look and feel of the site through Themes,skins,Master Pages and Stylesheets.
I assume that you know a little bit about CSS,XHTML. I assume that you have little knowledge of web forms and master pages.
Before you go on it will be useful if you have a look in this other post of mine.
1) Launch Visual Studio 2005/2008/2010. Express editions will work fine.
2) Create an empty asp.net web site. Choose an appropriate name. Choose VB.Net as the development language.
3) Add an item to your website, a master page. Name it Master.master.
4) Add an ASP.Net special folder to your site, "App_Themes". Add two Theme folders under it. Name the first Theme folder, "Gray" and the other one "Orange".
5) Add another item in your site, a stylesheet. Name it "Site.css".Place this .css file under the Gray Theme folder. The code for the site.css follows.
* {
margin: 0;
padding: 0;
}
body {
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode",
Verdana, sans-serif;
background-color:#D4D4D4;
text-align: center;
min-width: 760px;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#header {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#header h1 {
margin: 0;
color:#1c93c1;
}
#mainNav {
margin: 0;
padding: 0;
background: #2683AE;
list-style-type: none;
width: 180px;
font-size:1.4em;
font-family:Verdana;
float: left;
}
#mainNav a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-bottom: 1px solid #FFF;
}
#mainNav a:hover {
background: #C1C1C1;
color:red;
}
#mainNav #con a {
border: none;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
background: #fff url('../../Styles/images/bg-fixed.gif') repeat-y left top;
}
#content {
width: 520px;
float: right;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
clear: both;
color:Red;
font-family:Batang;
}
6) Place the site.css file under the Orange Theme folder as well. We will make some changes to the .css file so we give an "orangish" look and feel.Τhe only changes I have made to the original site.css are the following:(in bold are only the changes)
body {
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode",
Verdana, sans-serif;
background-color:#3b5998;
text-align: center;
min-width: 760px;
}
#header {
height: 50px;
background-color:#bdbdbd;
padding: 20px;
}
#header h1 {
margin: 0;
color:#e87a1b;
}
#mainNav {
margin: 0;
padding: 0;
background: #e87a1b;
list-style-type: none;
width: 180px;
font-size:1.4em;
font-family:Verdana;
float: left;
}
7) I have created the markup for the master page. It is simple HTML with the <@Master> directive on top and the ContectPlaceholder controls.We will have a dropdownlist web server control that the user will choose his desired theme.
<%@ Master Language="VB" CodeFile="Master.master.vb" Inherits="Master" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Nikolaos Kantzelis" />
<meta name="keywords" content="asp.net,css,jquery,javascript,mvc,LINQ,
Entity Framework" />
<meta name="description" content="ASP.Net is a framework developed By Microsoft
to create extensible,scalable,eye catching web applications." />
<meta name="robots" content="all" />
<title>ASP.Net Rules</title>
<asp:ContentPlaceHolder id="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<div id="wrapper">
<div id="header">
<h1>ASP.Net RULES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
</div>
<h3>Select your theme</h3>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem Value="Gray">Gray</asp:ListItem>
<asp:ListItem Value="Orange">Orange</asp:ListItem>
</asp:DropDownList>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div id="content">
<div id="Div1">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<h2>Ea commodo consequat</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
</p>
</div>
</div>
<ul id="mainNav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li id="con"><a href="#">Contact</a></li>
</ul>
<div id="footer">
<p>Copyright © 2011 by NKSolutions. All rights Reserved.
Site developed by NKSolutions</p>
</div>
</div>
</form>
</body>
</html>
8) Add another item to your site, a web form. Make sure you choose this master page.
In my case the markup for the default.aspx looks like this
<%@ Page Title=""Language="VB" MasterPageFile="~/Master.master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<p>
<center><em>THIS IS THE HOME PAGE</em></center></p>
</asp:Content>
This is the simplest of pages using a master page.Just make sure that the ContentPlaceHolder properties of the Content controls are set to the right values.
Usually we could have the functionality for selecting a desired theme from the user,(If we choose to implement the user selection per page-which would be wrong) in the Pre_Init event of the Page class.
But now, very wisely, we have the dropdownlist control on the master page.The problem with the master page is that is not actually a page. It does not inherit from the Page class, it inherits from the UserControl class.
Have a look at the MSDN documentation and you will see something like this.
Public Class MasterPage
Inherits System.Web.UI.UserControl
Member of System.Web.UI
Summary:
Acts as a template and merging container for pages that are composed only of System.Web.UI.WebControls.Content controls and their respective child controls.
************************************************
It is clear that we do not have a Pre_Init event in this case.Let me show you how we can solve that.
9) Add another item to your site,a class file. Name it PageClass.vb. We will make this class inherit from the Page class.
The code for this class follows:
Imports Microsoft.VisualBasic
Public Class PageClass
Inherits Page
Protected Overrides Sub OnPreInit(e As System.EventArgs)
MyBase.OnPreInit(e)
If (Not Request.Form Is Nothing And Request.Form.Count > 0) Then
Me.Theme = Request.Form(Me.Master.FindControl("DropDownList1").UniqueID)
End If
End Sub
End Class
I override the Pre_Init event of the base class and write my own custom code inside the overridable method.
I set the Theme property of the page (Me) by getting from the master page the UniqueID of the dropdownlist control.
10) The Default.aspx.vb must inherit fromt the PageClass class and not the Page class. So we must change that.
The whole code for the Default.aspx.vb follows.
Partial Class _Default
Inherits PageClass
End Class
11) Run your application.Initially we do not see any style applied to our page. Choose your theme, Gray or Orange and see the markup being styled accordingly.
All of the pages in your site must inherit from the PageClass class.
Drop me an email if you want the source code.
Hope it helps!!!!