4 MasterPages,SkinsAndThemes

8/14/2019 4 MasterPages,SkinsAndThemes

http://slidepdf.com/reader/full/4-masterpagesskinsandthemes 1/32

Master Pages, Skins And Themes



Consistent look and feel

• A web site pages must have consistent look andfeel.

• 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 lookand feel and standard behaviour for all pages in

an application.• First a single master page defines the look andfeel and standard behaviour .

• Then individual pages are configured to the

master page to produce a page when therequest arrives.

• A master page is an ASP.NET file with theextension .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



… <head id="Head1" runat="server">

<title>My new site</title>

</head> <body bgcolor="#99cc99">

<table border=1 cellpadding=0cellspacing=0 width="70%">

<caption> <asp:contentplaceholder id="Title"runat="server"/>

</caption> <tr><td>

<asp:contentplaceholder id="Body"runat="server"/>

</td></tr> </table> …

Changed code

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

<%@ 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

Right click on the master pageand select Add Content Page



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: <asp:TextBox ID="TextBox1"runat="server"></asp:TextBox><br /> E-Mail: <asp:TextBox ID="TextBox2"

runat="server"></asp:TextBox><br /> Phone <asp:TextBox ID="TextBox3"runat="server"></asp:TextBox><br /> <br /><asp:Button ID="Button1" runat="server"Text="Button" /> </form>

</asp:Content>





Specifying individual page title

• Using Title attribute of the Page directive the page titlecan be customized for every page

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" Title=“RegisterOnline" %>

• Without the title attribute every page will get the sametitle as the master page title.

• The page title can be changed programmatically also bysetting• Master.Page.Title=“XYZ”;









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 Themeattribute of the page to some existing themes.

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

• But before we can do this, we need to createsome 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 wantto 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 whichyou 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 fileW3C 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 differentlook 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.

< T tB t " "



<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(objectsender, System.EventArgs e){

Page.MasterPageFile=“~/MasterPage.master”;

Page.Theme=Request.QueryString(“Theme”);

TextBox1.SkinID=“PWD”} </script>

Date post:	30-May-2018
Category:	Documents
Upload:	suresh1130
View:	218 times
Download:	0 times

4 MasterPages,SkinsAndThemes

Documents