You are on page 1of 32

Master Pages, Skins And Themes

Consistent look and feel


• A web site pages must have consistent look and
feel.
• The look and feel for the page must be kept
separate from the actual pages in the form of
template so that once the template is applied, it
affects all the pages.
• Design of a page involves two distinct features:
• The layout of the page (sections of the page
header, footer, right pane, left pane etc.)
• The look and feel of the controls or text in the
page
ASP.NET look and feel
components
• Master pages
• To create reusable page templates
• Themes
• To define the formatting details for various
controls
• Skins
• To define your own theme
Master Pages
• Master Pages is created using @Master
directive.
• This directive enables the creation of same look
and feel and standard behaviour for all pages in
an application.
• First a single master page defines the look and
feel and standard behaviour .
• Then individual pages are configured to the
master page to produce a page when the
request arrives.
• A master page is an ASP.NET file with the
extension .master and is identified by the
@Master directive.
Steps to create a master page

Right click on the project folder in the Solution Explorer.


Select Add New Item and then Select Master Page.
Automatically generated code
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >


<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1"
runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
Let us change this part of the code
… Changed code
<head id="Head1" runat="server">
<title>My new site</title>
</head>
<body bgcolor="#99cc99">
<table border=1 cellpadding=0
cellspacing=0 width="70%">
<caption>
<asp:contentplaceholder id="Title"
runat="server"/>
</caption>
<tr><td>
<asp:contentplaceholder id="Body"
runat="server"/>
</td></tr> </table>

You could also specify some default content within these tags by making the tags
container tag instead of empty tag.
Adding a new page – way 1

Right click on the master page


and select Add Content Page

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"


AutoEventWireup="true" CodeFile="Default4.aspx.cs"
Inherits="Default4" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Title"
Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Body"
Runat="Server">
</asp:Content> Code automatically generated
Adding a new page – way 2
Add content

•Add content by clicking into each of the compartments


created as a result of <asp:Content> tag
•View the page in the browser to test
Code behind
<%@ Page Language="C#"
MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs"
Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="Title" Runat="Server">
Register Online
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Body"
Runat="Server">
<form runat="server">
Name: &nbsp; <asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox><br />
E-Mail:&nbsp;<asp:TextBox ID="TextBox2"
runat="server"></asp:TextBox><br />
Phone &nbsp;&nbsp;<asp:TextBox ID="TextBox3"
runat="server"></asp:TextBox><br />
<br /><asp:Button ID="Button1" runat="server"
Text="Button" />
</form>
</asp:Content>
What happens when you execute

MasterPage.master Default2.aspx

Combined Page
Default2.aspx
Specifying individual page title
• Using Title attribute of the Page directive the page title
can be customized for every page
<%@ Page Language="C#"
MasterPageFile="~/MasterPage.master"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2" Title=“Register
Online" %>
• Without the title attribute every page will get the same
title as the master page title.
• The page title can be changed programmatically also by
setting
• Master.Page.Title=“XYZ”;
Nesting
• A master page can inherit from another master
page thereby creating nested master pages.
• Create a master page item and set the
MasterPageFile attribute.
<%@ Master
MasterPageFile="~/MasterPage.master"
Language="C#" %>
• There is however one problem that you have
with this
Caching
• To increase the performance aspx
generated page it can be cached in the
server for the specified interval of time.
• <@ OutputCache Duration=“30”
Varybyparam=“None” %>
• This caches the page for 30 secs in the
server.
• This directive can be put only for aspx
page.
Setting the Master Page for all the
page in the application

• To apply the master page by default to all


the pages in the application following
needs to be made in web.config file.
• <pages
masterPageFile="~/MasterPage.ma
ster" />
Themes
• Themes are used to specify styles for the
controls and text of the page.
• It can be compared to CSS.
• Styles can be specified in one place and
can be used for all the pages of the site.
Setting styles to controls in a page

• To set the theme to the page set the Theme


attribute of the page to some existing themes.

<%@ Page Theme= “sometheme”..>

• But before we can do this, we need to create


some themes.
Creating a Theme
• Themes are created and kept generally in a
folder called “App_Themes”.
• For each theme a folder must be created inside
the App_Theme.
• Every theme folder must have style elements
which could be either
• A single skin file
• CSS files
• Images
Skins
• Skins are created to apply style to the server
controls.
• Skin file has extension .skin.
Creating skin page
• Open the skin page and set the style for
the controls
• Easy way to this is to set the style visually
for the control in a aspx page and then
copy paste the code into the skin file.
• The controls must have EnableTheming
property set as true.
• Next slide demonstrates this.
• Open a page. Drop a control for which you want
to set the style. Select the control you dropped
(say a Textbox) and set the properties to give it
the look and feel that you desire.
• Open the source. Copy the <asp:TextBox> tag for which
you configured the style.
• Paste it in the skin file. Remove the ID attribute.
• Do the same for the other controls also fro which you
want to set the style.
• Delete the controls that you dropped to create the style.
• Skin file:
<asp:TextBox runat="server"
BackColor="#FFFFC0"
BorderColor="#404000"
BorderStyle="Groove" BorderWidth="1px"
Font-Size="X-Small"
ForeColor="#C000C0"/>

<asp:Button runat="server" Text="Button"


BorderColor="#C04000"
BorderStyle="Ridge" ForeColor="#804000"
/>
Page with theme in execution
• Set the Theme attribute of the page to “Fresh”
(the name of the theme).
• <%@ Page Theme="Fresh“…
• And execute
Setting style through CSS
• To set the style for html elements we can use
CSS file  W3C standard
• Create a CSS file in the Fresh theme.
css file content
body
{
font-size:medium;
font-family:Trebuchet MS;
color:Navy;
}
caption
{
font-family:Verdana;
font-size:large;
color:Fuchsia;
}
Executing
Setting the theme for all the page in
the application

• To apply the master page by default to all


the pages in the application following
needs to be made in web.config file.
• <pages theme="Fresh" />
Defining multiple skins for the same
control
• What if you want to specify more than one skin
for a single control?
• This can be done by specifying the control with
SkinID attribute in the skin file.
• For instance let us say that we want a a different
look for password field in our form.
• First step would be to create the control style in
the skin file.
• Then for the controls in the page SkinID attribute
needs to be set.
<asp:TextBox runat="server"
BackColor="#FFFFC0"
BorderColor="#404000"
BorderStyle="Groove" BorderWidth="1px"
Font-Size="X-Small"
ForeColor="#C000C0"/>
<asp:TextBox SkinID="PWD" runat="server"
BackColor="#C0C000" BorderStyle="Groove"
Font-Size="X-Small" ForeColor="#C00000"
/>
<asp:Button runat="server" Text="Button"
BorderColor="#C04000"
BorderStyle="Ridge" ForeColor="#804000"
/>
Setting skin to individual controls
Assigning skin, theme and master
page at runtime
<script runat=“server”>
Protected void Page_PreInit(object
sender, System.EventArgs e){
Page.MasterPageFile
=“~/MasterPage.master”;
Page.Theme
=Request.QueryString(“Theme”);
TextBox1.SkinID=“PWD”
}
</script>