Author: Sharad Pyakurel
Master Page in ASP.NET
The master page is an ASP.NET file with the extension. master with a predefined layout that can
include sta c text, HTML elements, and server controls. Master Page is a template that allows us
to create a common layout for mul ple web pages within the applica on. Master pages are used
to create consistency from page to page in an applica on. It provides a way to create a consistent
look and feel across different pages by defining shared content and layout elements.
A single master page defines the look, feel and standard behavior for all the pages in an
applica on.
- The Master Page typically contains the common HTML structure, layout, and design
elements that are to be shared across mul ple pages.
- It can include placeholders, called content placeholders.
A default design structure of a master page will be as following:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs"
Inherits="MyWebApp.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
< tle></ tle>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Similarly, the design structure of the content page referring above master page will be as
following:
Author: Sharad Pyakurel
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="MyContentPage.aspx.cs" Inherits="MyWebApp.MyContentPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
- We can define one or more content placeholders using the <asp:ContentPlaceHolder>
control within the Master Page.
- Content placeholders are iden fied by a unique ID that is referenced by the content pages
when defining their content.
- The master page can be applied to the content page by using the MasterPageFile a ribute
in the @Page direc ve of the content page.
Theme in ASP.NET
Theme in ASP.NET Web Forms applica on refers to a set of predefined styles, skins, and images
that can be applied to the user interface elements of a web applica on. It allows developers to
create a consistent look and feel across mul ple pages by applying a theme to the en re
applica on or individual pages.
Themes separate the design elements from the applica on logic, enabling designers and
developers to work independently. Developers focus on the func onality and behavior of the
applica on, while designers can concentrate on crea ng visually appealing styles.
Skins are a part of themes and define the appearance of individual controls. They allow you to
change the look and feel of specific controls without modifying the underlying code. Skins can be
applied to controls at the page level or in a central loca on, affec ng all instances of the control
throughout the applica on.
Themes o en use CSS to define the styles and layout. CSS provides powerful capabili es to
control the appearance of HTML elements, including fonts, colors, margins, and more. By
leveraging CSS within themes, you can easily modify the styles and achieve a consistent design.
Themes are typically stored in separate files that contain the style defini ons and images. These
files can be organized into a folder structure to accommodate different themes and varia ons.
Author: Sharad Pyakurel
ASP.NET Web Forms applica ons usually have a "App_Themes" folder where theme files are
stored.
You can apply a theme to an ASP.NET Web Forms applica on or individual pages by specifying
the theme in the applica on's configura on file or in the "@Page" direc ve of each page. Themes
can be set programma cally as well, allowing dynamic theme switching based on user
preferences or other condi ons.
Following is the procedure for crea ng and applying theme in asp.net.
1. Create a Theme Folder:
First, create a folder in your ASP.NET Web Forms applica on to store your theme files.
Conven onally, this folder is named "App_Themes" and is placed at the root level of your
applica on.
2. Define the Theme:
Inside the "App_Themes" folder, create a subfolder for your theme. Let's call it
"MyTheme." In the "MyTheme" folder, you can add CSS files, images, and skin files that
define the styles and appearance of your theme.
3. Create a CSS File:
Create a CSS file, such as "styles.css," inside the "MyTheme" folder. This file will contain
the CSS rules that define the styles for your theme. For example, you might have the
following CSS rules:
/* styles.css */
/* Body styles */
body {
background-color: #F2F2F2;
font-family: Arial, sans-serif;
}
/* Header styles */
h1 {
color: #333333;
font-size: 24px;
margin-bo om: 10px;
}
/* Bu on styles */
Author: Sharad Pyakurel
.bu on {
background-color: #FF0000;
color: #FFFFFF;
padding: 10px;
border: none;
cursor: pointer;
}
.textbox{
border:solid 1px #5937de;
background-color:#ffffff;
font-size:11pt;
color:#25368b;
}
4. Create a Skin File:
If you want to customize the appearance of specific controls, you can create a skin file.
Create a skin file, such as "CustomBu on.skin," inside the "MyTheme" folder. In this file,
you can define the skin for the Bu on control. For example:
<asp:Bu on runat="server" CssClass="bu on" />
<asp:TextBox runat="server" CssClass="textbox" />
5. Apply the Theme:
To apply the theme to your ASP.NET Web Forms applica on or individual pages, you need
to specify the theme in the applica on's configura on file or in the "@Page" direc ve of
each page.
To apply the theme globally to the en re applica on, open the "Web.config" file and add
the following code inside the <system.web> sec on:
<system.web>
<pages theme="MyTheme"></pages>
</system.web>
- To apply the theme to an individual page, open the desired page's markup file (e.g.,
"Default.aspx") and add the following direc ve at the top:
<%@ Page Theme="MyTheme" %>
- The theme also can be applied from code behind file programma cally as follows:
Author: Sharad Pyakurel
protected void Page_PreInit(object sender, EventArgs e)
{
// Set the theme dynamically
Page.Theme = "MyTheme";
}
