Themes in ASP .NET

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.


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.