Master Pages and Themes

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.

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:

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:

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.

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:

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.

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.

We can define styles for the span tag which can be used to highlight the elements:

.welcomespan
{
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.

<pagestheme ="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:

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:DropDownListID="DropDownList1"runat="server"AutoPostBack="True"onselectedindexchanged="DropDownList1_SelectedIndexChanged"><asp:ListItemValue="Select Any Theme">Select Any Theme</asp:ListItem><asp:ListItemValue="Acqua">Acqua</asp:ListItem><asp:ListItemValue="Marine">Marine</asp:ListItem></asp:DropDownList>

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.

Share

About the Author

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 has 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 athttp://technowallet.blogspot.comTechnical Skills: C#,Ado.Net,Asp.Net,Sql Server,JavaScript,XML,Web services.