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.
