Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

Dynamically Changing Web Themes In Asp.Net

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

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

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

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

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:

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.

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:

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.

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

Confirm.aspx

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

Tags: , ,

Do you like this Example? Share your thoughts!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.