Click here to Skip to main content
Click here to Skip to main content

Master Pages and Themes

, 9 Apr 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
With a Master Page you can define the look and feel of your application which includes multiple content placeholders. Along with Master Pages, you can work with themes to provide the user with a great User Interface.

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:

  1. Create a Master Page with single and multiple content place holders
  2. Add Content Pages
  3. Nested Master Pages
  4. Programming the Master Page
  5. Creating themes for the application.
  6. 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.

MasterPage

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:

AddContentPage

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.

NestedMasterPage

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.

  1. Now by using the following CSS, we can arrange the divs in the page.
  2. Right click on Solution Explorer, select Add New Item, and then select StyleSheet from the popup window.
  3. Name the file as ‘AcquaStyleSheet.css’.
  4. Copy and paste the below code to your stylesheet.

AddingStylesheet

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.

ThemeFolder

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

  1. Right click on Solution Explorer and select 'Add ASP.NET Folder' and then select 'Theme'. This adds the theme folder to the application.
  2. In App_Theme, add a new theme folder and you can give your own name for the folder.
  3. In the theme folder, add CSS and skin files.
  4. By repeating the above steps, you create as many themes for the application.

AddThemeFolder

Theme Settings

To apply the theme for the application, apply the following settings in the web.config.

<pages theme ="Acqua">
</pages>

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("~/");
    //Get the required section of the web.config file by using configuration object.
    PagesSection pages =  (PagesSection)config.GetSection("system.web/pages");
    //Update the new values.
    pages.Theme = DropDownList1.SelectedItem.Text.ToString();
    //save the changes by using Save() method of configuration object.
    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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

S V Saichandra
Software Developer GSS Infotech Ltd.
India India
S V Sai Chandra is a Software Engineer from Hyderabad Deccan. He started Embedded Programing in his college days and now he is a Web Developer by Profession. He Loves coding and his passion is always been towards Microsoft Technologies. Apart from coding his other hobbies include reading books, painting and hang out with friends is his most favorite past time hobby.
He blogs at
http://technowallet.blogspot.com
Technical Skills:
C#,Ado.Net,Asp.Net,Sql Server,JavaScript,XML,Web services.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralGood article PinmemberOmmrudraksha Shri31-Oct-12 2:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 9 Apr 2012
Article Copyright 2012 by S V Saichandra
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid