Table of contents
Introduction
Master Pages in ASP.NET allow you to control the layout, design, and common controls of all pages in a website/web application.
With a single master page, you can define the look and feel of your application which includes multiple content place holders. Along with Master Pages,
you can work with themes to provide the user with a great User Interface. In this article, we will see an overview of how to:
- Create a Master Page with single and multiple content place holders
- Add Content Pages
- Nested Master Pages
- Programming the Master Page
- Creating themes for the application.
- Finally we will see how we can work with multiple themes.
Creating a Master Page
Creating a master page is very simple. In your website, right click on Solution Explorer, select Add New Item, and then select the Master Page from
the pop up window, as shown in the figure. The Master Page comes with the extension .master which consists of all the common elements (a template/layout) for the site.
By default the Master Page comes with two content place holders placed in it. The code for the Master Page is as follows:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
In the above, the @ Master directive identifies it as a master page, whereas all other pages have an @page directive.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="content" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The content place holders in the above are used to place static content or dynamic content by using ASP.NET server controls in the site.
The content place holder is placed in the header section and in the form tags which in general allows users to place page content in the header and body part,
but there is no such restriction to place a content placeholder under a particular tag nor is there any restriction on the number of content placeholders to be used.
In the latter part of the article, we will see in detail about the layout and usage of the content placeholder.
Content placeholders allow the user to flexibly maintain site content with a common page layout.
Adding a Content Placeholder
We have now created a Master Page, we now need to add a content placeholder to the site. Right click on Solution Explorer,
select Add New Item, and select a content place holder from the pop up window:
This adds the content place holder to the site with the following code incuded in the page:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Creating a Nested Master Page
In order to create a nested master page, follow the below steps. Repeat the above steps to add a Master Page and then right click on Solution Explorer
and select Add New Item and select Master Page from the installed templates and then select the ‘Select Master Page’ checkbox and name the master page nestedmaster.master,
as shown in the below figure.
From the below code, we can observe the differences in the code for a master page, content page, and nested master page.
Master Page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
Nested Master Page:
<%@ Master Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="NestedMaster.master.cs" Inherits="NestedMaster" %>
Content Page:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
By this, we have created a nested master page for the site. Now we need to design the child master page.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<h1>Image Slide Show</h1>
<h3>Product's Show Case:</h3>
<asp:Image ID="Image1" runat="server" ImageUrl ="~/Blue hills.jpg" Height="173px"
Width="287px" />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</asp:Content>
Activity: Developing a Theme Manager Application
Creating the Page Layout
We have already seen how to create a Master Page for our application. We will start
now with creating a page layout. We can create a page layout by using different
techniques and tools. We can create the Page Layout by using HTML and CSS or by using a web design tool like Photoshop. In our example we will create
a page template by using HTML and CSS. We can create a simple two column page layout by using either
div tags of HTML or in the Design view just by dragging
a table from the toolbox. The latter one you can try by yourself. Here we will design the page layout by using
div tags and CSS. The following HTML code shows
you a two column page layout and the design effects for the layout are applied
by using CSS code as shown below:
HTML Layout
<div id = "Container">
<div id ="Container">
<div id="header">
</div>
<div id="SideBar">
</div>
<div id="Content">
</div>
<div id="Footer">
</div>
</div>
From the div tags, it it is clear that now we have a header, side navigation, content, and footer.
- Now by using the following CSS, we can arrange the
divs in the
page.
- Right click on Solution Explorer, select Add New Item, and then select StyleSheet from the popup window.
- Name the file as ‘AcquaStyleSheet.css’.
- Copy and paste the below code to your stylesheet.
CSS Code
body
{
margin:20px 20px 20px 20px;
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
color: black;
width: 960px;
border-right: 1px solid black;
background-color:#98B3F6;
}
#header
{
background-color:#1B7DCE;
margin:10px 10px 0px 10px;
height:120px;
overflow:hidden;
}
#SideBar
{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
height:900px;
}
#Content
{
padding-top: 1em;
margin: 0 12px 0 180px;
background-color:White;
overflow:hidden;
}
#Footer
{
clear: both;
background-color: #62645C;
padding-bottom: 1em;
border-top: 1px solid #333;
padding-left: 200px;
}
Now moving further, we add some more common features that we will make available through the website, the title, tag-line, and
menu.
Title and Tag Line
Add the following HTML code inside the header div tag which displays the title and tag line of your site.
<h1 class ="Title">Mysite Title</h1>
<span class ="TagLine">Mysite Tag LIne</span>
and the CSS code goes here:
#header .Title
{
color:White;
}
#header h1
{
margin:10px 40px 10px 40px;
}
#header .TagLine
{
color:White;
margin:40px 40px 10px 70px;
}
Creating the Navigation and Menu for the Site
ASP.NET provides a wide range of controls for site navigation, you can directly use them for your site or use the simple
HTML tags to design the navigation for your site.
Designing the Menu
<ul class ="Menu">
<li><a href ="#">Home</a></li>
<li><a href ="#">AboutMe</a></li>
<li><a href ="#">Articles</a></li>
<li><a href ="#">ContactUs</a></li>
</ul>
CSS Code
.Menu li
{
display:inline;
margin:0px;
}
.Menu a
{
text-decoration:none;
background-color:Blue;
padding:5px;
color:White;
border-right:4px solid Maroon;
margin:0px;
border-left:none;
}
.Menu a:hover
{
background-color:Maroon; padding:5px;
border-right:4px solid Blue; margin:0px;
}
Finally, you can also apply the CSS style for the Grid control. The CSS code shown here can be applied to the ASP.NET
Grid control.
.gridAlternatingRowStyle
{
background-color:White;
}
.gridEditRowStyle
{
background-color:#2461BF;
}
.gridFooterStyle
{
background-color:#98B3F6;
color:White;
font-weight:bold;
}
.gridHeaderStyle
{
background-color:#1B7DCE;
font-weight:bold;
color:White;
}
.gridPagerStyle
{
background-color:#98B3F6;
color:White;
text-align:center;
margin:20px;
border:1px solid black;
background-image:url(Images/abc.gif);
}
.gridRowStyle
{
background-color:#EFF3FB;
}
.gridSelectedRowStyle
{
background-color:#D1DDF1;
color:#333333;
}
.grid
{
border:none;
width:100%;
}
The GridView code goes here:
<EditRowStyle CssClass ="gridEditRowStyle" />
<FooterStyle CssClass="gridFooterStyle" />
<HeaderStyle CssClass ="gridHeaderStyle" />
<PagerStyle CssClass="gridPagerStyle" />
<RowStyle CssClass ="gridRowStyle" />
<SelectedRowStyle CssClass ="gridSelectedRowStyle" />
Using a Skin File to Apply Style
Using a skin file you can apply styles to server controls. The following samples show the usage of a skin file. The code in
the skin file is the same as the server control
syntax except that the ID attribute is eliminated for the control.
<asp:TextBox ID="TextBox1" runat="server" BorderColor="#FFFFB7" Width="288px">
</asp:TextBox>
<asp:Button ID="Button1" runat="server" BackColor="#FF9933"
ForeColor="White" Text="Button" Width="119px" />
<asp:GridView ID="GridView1" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1B7DCE" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#98B3F6" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" ForeColor="#333333" />
</asp:GridView>
Adding Some Styles for the Home Page (Content Pages)
As we have seen how to use skin files, now in our application we will add a Feedback form using the above skin file styles. The above style defined for textbox
and button will be applied to all controls in our feedback form. But if we want to be more specific, for each individual textbox, we can use the SkinID property
in the skin file for the controls as shown below: coming back again, we'll define some more styles in the
CSS page for "Quotes" and "Images".
The following code shows code for displaying images.
.imagecells img
{
width:140px;
height:100px;
border:2px solid Gray;
padding:15px;
margin:15px;
background-color:#98B3F6;
border-style:inset;
}
The following CSS can be used to display quotations.
.quotehomepage blockquote {
font: italic 1em/1.6em Georgia, "Times New Roman", Times, serif;
width: 300px;
background: url(/ThemeManager/Images/closequote.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
float: right;
margin: 20px 0 10px 10px;
color: #999999;
}
.quotehomepage blockquote:first-letter {
background: url(/ThemeManager/Images/openquote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
We can define styles for the span tag which can be used to highlight the elements:
.welcome span
{
color:#98B3F6;
}
Themes in ASP.NET
The styles we have created till now can be applied as a theme for the application. We can create more
CSS styles as the one we have created above and we can allow
the user to select one. ASP.NET provides you with a flexible way to achieve this. Follow the below steps to create themes in your application: The theme folder consists
of the skin files and cascading stylesheets.
As we have seen how to create stylesheets and skin files, now we will see how to use them for themes. The
skin files allow you to apply styles same
as the cascading style for the application. You can apply styles to the site by either using
a CSS stylesheet or a skin file or both. Mainly you can use the skin file
to apply styles to server controls.
Adding the Themes Folder
- Right click on Solution Explorer and select 'Add ASP.NET Folder' and then select 'Theme'. This adds the
theme folder to the application.
- In App_Theme, add a new theme folder and you can give your own name for the folder.
- In the theme folder, add CSS and skin files.
- By repeating the above steps, you create as many themes for the application.
Theme Settings
To apply the theme for the application, apply the following settings in the web.config.
<pages theme ="Acqua">
</
Page Level Settings
To apply the theme settings at page level, set the theme attribute to the theme name
in the @ page directory as shown:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" Theme ="Acqa"
Dynamic Themes
Before I could discuss about the code for managing dynamic themes, I want you to refer
to this excellent article about dynamic themes in CodeProject:
Dynamic themes.
Here we'll see an alternate method to achieve the same: the following code shows you
how to select dynamic themes from the available themes:
DropDown control
< asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="Select Any Theme">Select Any Theme</asp:ListItem>
<asp:ListItem Value="Acqua">Acqua</asp:ListItem>
<asp:ListItem Value="Marine">Marine</asp:ListItem>
</asp:DropDownList>
C# code:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Configuration config = WebConfigurationManager.OpenWebConfiguration("~/");
PagesSection pages = (PagesSection)config.GetSection("system.web/pages");
pages.Theme = DropDownList1.SelectedItem.Text.ToString();
if (!pages.SectionInformation.IsLocked)
{
config.Save();
Response.Redirect("Default.aspx");
}
else
{
Response.Write("<script>alert('Could not save configuration')</script>");
}
}
Conclusion
In this article, we learned about the Master Pages and Themes. Hope you have enjoyed reading this article and the content in the article has helped in your assignments.
Any suggestions or feedback are welcome.
