Themes in ASP .NET

A theme is simply a collection of files that define the look and feel of a website. It may contain some CSS, JavaScript, Image or video files. This post demonstrates how to use themes in ASP .NET.

In ASP .NET, we place our themes in App_Themes folder. To create a theme folder, Right-click on your project->Add->ASP .NET Folder->Theme.

By default, when you create the App_Themes folder, a sub folder named Theme1 is also created. This will be the name of the theme. To change the name of your theme, right-click on the Theme1 folder and select rename.

Adding theme files

If you are using a template, copy all the files of your template to the template folder.

If you are not using a tempate, create a CSS file theme1.css in the Theme1 folder (Right-click->Add->Style Sheet) and place the following code.

body
{
background-color: black;
color: white;
}

Applying themes

You can specify theme in any of the following ways:

1 ) Setting theme in web.config:

Theme specified in the web.config file is applied to all pages of the site. To specify theme in web.config, modify it’s content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<pages theme="Theme1"></pages>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>

2) Setting the theme in each pages
Add theme attribute to the page directive of the page as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ASP_Themes.WebForm1" Theme="Theme1"%>

3) Setting the theme programmatically

You can also set the theme programmatically in the Page_PreInit event by adding the following code to the cs file of the page.

protected void Page_PreInit(object sender, EventArgs e)
{
	Page.Theme = "Theme1";
}

4) Run the project and you will see that the style specified in the theme1.css file is applied to the page.