1. Introduction to Web Themes
A Web Theme allows setting the properties of server-side controls and by making use of themes one can provide consistency in the format of the entire website. That means all the controls maintain some uniformity; Say for example all the buttons in the website appears with a red border around it. A theme should have at least one Skin File in it. A website can have one or more themes, and by applying the theme, the entire website’s visual appearance changes in seconds. For example, let us say a website sells music CDs, and the website wants to change its appearance every Christmas and go back to normal after Jan-05. We can do this with two themes – Normal, Xmas.
2. Adding CSS and Skin Files
In ASP.net, we should organize all the themes under App_themes. To create a theme, right-click on your project name in the solution explorer, then pick theme under Add Asp.net Folder as shown in the below picture:
Creating Theme Folder
After creating the theme folder, we can add skin and Cascading Style-Sheet (CSS) files to it. The skin file supplies formatting advice for the server-side controls whereas cascading style sheet provides styling information for HTML elements. So, the server applies the formatting from the skin file for the server-side controls and Client browsers apply formatting from the CSS file. We can add CSS and skin files using the Add New item dialog, which is shown below:
Adding Skin and Style Sheet
The below video shows creating a Theme and CSS and assigning it to the Web Pages. This knowledge is required to proceed further with this example.
Video 1: Creating a Web Theme
3. Skin File with SkinId
In the previous video we saw, theme Normal is created and tested on the Default.aspx page. We placed three label controls on the web form and they have the same visual appearance. Suppose, if we want to add header label which appears different from all other labels in the same form, we should start using SkinId. A skin file can have only one formatting entry for a specific control type. That means formatting details for button, label and so on, appears once. To have two formatting entries for a specific control, we should use SkinIds. In our case, we want the Normal Theme should have the capability of holding two two kind of labels formatting one for header label and another one for normal labels. The control in the web page refers to this skin id to have specific formatting details from the skin file of the theme.
In the below video, we create a web page with three labels. One takes header label formatting from the skin file using SkinId and other two labels take common formatting detail.
Video 2: Using SkinId In the Skin File
4. About This Example
The screenshot of this article’s example application is shown below:
Example Pages with Web Themes settings
When we start this example website, it first displays the home page. We can select a product and submit it to move to the Order Confirmation page. The order confirmation page has labels to provide order confirmation and the same page also has a link called ‘Home’ to navigate back to the homepage. From the homepage, we can navigate to the Web Admin Page where we can set the theme for the entire website. We can select a theme in the web admin page and apply that theme to the whole site (In our case it contains only three pages) by clicking the ‘apply’ button. From the web admin page, we can go to the main web page by using the home link.
All three pages use two themes named Ocean and Desert. By default, when we launch the site for the first time, we do not apply any theme. So we should go to the web admin page and from there we can apply a theme. The code behind in the web admin page uses the session variable for demo purpose. You should use application variables for real websites.
5. Applying Web Themes
The Example website has three pages and two themes. We can apply these two themes dynamically to all three pages and thereby keeping the unity among the pages. Below picture shows Solution Explorer view of the Example:
Folders of the Example Web App
Note each theme contains a Skin file and cascading style sheet in it. The image folder contains images used by the default page. Making of these two themes and skin file is discussed in the below video:
Video 3: Making of Ocean and Desert Theme
6. Coding for Web-admin’s Web-Theme Page
6.1 Storing Web Theme Name in a Session Variable
In the handler code for the
CheckedChanged
event for the radio buttons, based on the check state of the radio buttons, we store the theme name in a Session variable called
PgTheme
. The session variable holds the value among the pages for the current web session. In real world, the website will store the theme on application global as it is a web setting set by the admin of the web page. The code for this is below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//Sample 1.0 : Set theme session variable when theme selected protected void radThemeOcean_CheckedChanged(object sender, EventArgs e) { if (radThemeOcean.Checked == true) { Session["PgTheme"] = "Ocean"; } else { Session["PgTheme"] = null; } } protected void radThemeDesert_CheckedChanged(object sender, EventArgs e) { if (radThemeDesert.Checked == true) { Session["PgTheme"] = "Desert"; } else { Session["PgTheme"] = null; } } |
6.2 Set SkinIds To Match Themes
The Web Theme page uses a function called
SetSkins
, which sets SkinId for the labels in this Web Admin webpage. We set these SkinIds based on the selected theme name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//4.0 Set SkinIds protected void SetSkins(String Theme) { if (Theme == "Ocean") { LblTitle.SkinID = "PT"; LblOcean.SkinID = "NormalLBL"; LblDesert.SkinID = "NormalLBL"; } else if (Theme == "Desert") { LblTitle.SkinID = "DPT"; LblOcean.SkinID = "DNormalLBL"; LblDesert.SkinID = "DNormalLBL"; } } |
6.3 Visualize Theme Change in Web Admin Page
When the Web Admin clicks the ‘Apply’ button, we make a call to the
Server.Transfer()
function. This function requests Asp.Net to re-execute the page and hence page life cycle starts again. When the page render happens, we will see the new theme in effect. Below is the code:
|
1 2 3 4 5 |
//3.0 Re-execute the current page protected void Button1_Click(object sender, EventArgs e) { Server.Transfer(Request.FilePath); } |
6.4 Set Theme in Page Pre-Initialization
Finally, we set the page theme and SkinIds to the page during the page Pre-Initialization. First, we make sure the session variable is not empty and then we set the theme name, taking it from the
PgTheme
session variable. After setting the theme, we set the Skin IDs by making a call to our
SetSkins
function.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//2.0 Set Page theme when before page initialized protected void Page_PreInit(object sender, EventArgs e) { if (Session["PgTheme"] == null) Page.Theme = null; else { String theme = Session["PgTheme"].ToString(); Page.Theme = theme; SetSkins(theme); } } |
7. Setting Theme For Other Two Pages
In the other two web pages, we are setting the theme during page pre-initialization. We take the theme from the current session variable PgTheme (For demo purpose) and applied to the page before actual page render happens. Below is the code for both Default.aspx and Confirm.aspx pages:
Default.aspx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public partial class _Default : System.Web.UI.Page { //5.0 Set Skin function for Default Page protected void SetSkins(String Theme) { if (Theme == "Ocean") { lblPageTitle.SkinID = "PT"; } else if (Theme == "Desert") { lblPageTitle.SkinID = "DPT"; } } //6.0 Set theme during page initialization protected void Page_PreInit(object sender, EventArgs e) { if (Session["PgTheme"] == null) Page.Theme = null; else { String theme = Session["PgTheme"].ToString(); Page.Theme = theme; SetSkins(theme); } } } |
Confirm.aspx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
public partial class Confirm : System.Web.UI.Page { //7.0 Set the the skin ids based on theme protected void SetSkins(String Theme) { if (Theme == "Ocean") { lblPageTitle.SkinID = "PT"; lblInformation.SkinID = "NormalLBL"; } else if (Theme == "Desert") { lblPageTitle.SkinID = "DPT"; lblInformation.SkinID = "DNormalLBL"; } } //8.0 Set theme during page initialization protected void Page_PreInit(object sender, EventArgs e) { if (Session["PgTheme"] == null) Page.Theme = null; else { String theme = Session["PgTheme"].ToString(); Page.Theme = theme; SetSkins(theme); } } } |
The below video shows how the site admin changes the Theme and how theme applies to all the pages.
Video 4: Dynamically changing Asp.Net Web Site Theme
Source Code : Download Dynamic Asp.Net Theme Example From Google Drive
Categories: Asp 2.0
Tags: CSS File, Server.Transfer(), Skin File
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.