ASP.NET Themes and Skins Guide

Themes and skins
When you build a Web application, it usually has a similar look - and - feel across all its
pages. Not too many applications are designed with each page dramatically different from
the next.
Generally, for your applications, you use similar fonts, colors, and server control styles
across all the pages. You can apply these common styles individually to each and every
server control or object on each page, or you can use a capability provided by ASP.NET 4
to centrally specify these styles. All pages or parts of pages in the application can then
access them.
Themes are the text - based style definitions in ASP.NET 4
USING ASP.NET THEMES
-Themes are similar to Cascading Style Sheets (CSS) in that they enable you to define
visual styles for your Web pages.
-Themes go further than CSS, however, in that they enable you to apply styles, graphics,
and even CSS files themselves to the pages of your applications.
-You can apply ASP.NET themes at the application, page, or server control level.
-Themes then are larger and more encompassing than CSS as they can also include CSS
as a major part of how they work.
WORKING WITH THEMES
You will find that creating themes in ASP.NET is a rather simple process — although
sometimes it does require some artistic capabilities. You can apply the themes you create
at the application, page, or server control level. Themes are a great way to easily apply a
consistent look-and-feel across your entire application.
CREATING THE PROPER FOLDER STRUCTURE
In order to create your own themes for an application, you first need to create the proper
folder structure in your application.Each theme folder must contain the elements of the
theme, which can include the following:
 A single skin file
 CSS files
 Images

1. Right-click on your project in Visual Studio and selecting Add ASP.NET Folder
➪Theme to add the APP_Themes folder. A subfolder named Theme1 is
automatically created inside the APP_Themes folder.
2. Right-click Theme1 folder and select the Add New Item option. The Add New Item
Dialog box appears.
3. Select the Skin File template option and specify the name of the skin as
Theme.skin and click the Add button.
4. Add the code to the Theme.skin file to define its style properties.
The Theme.skin file
<asp:Label runat="server" ForeColor="#004000" Font-Names="Verdana" Font-Size="X-
Small" />
<asp:Textbox runat="server" ForeColor="#004000" Font-Names="Verdana" Font-
Size="X-Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="#004000" Font-
Bold="True" />
<asp:Button runat="server" ForeColor="#004000" Font-Names="Verdana" Font-Size="X-
Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="#004000" Font-
Bold="True" BackColor="#FFE0C0" />
5. Add Web form in the application, default.aspx and modify its code
The Default.aspx file
<%@ Page Language="C#" AutoEventWireup="true" Theme="Theme1"
CodeBehind="WebForm1.aspx.cs" Inherits="themes.WebForm1" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<h1> ASP.NET Themes
<div>
<asp:Label ID="Label1" runat="server" Text="enter your name" />
<br />
<asp:TextBox ID="TextBox1" runat="server" > </asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Submit Your Name"/>
<br />
</div>
</form>

</body>
</html>
Including Css Files In Your Themes
Creating CSS files for your themes when using Visual Studio 2010 is rather easy.
 Right-click the theme folder and select Add New Item.
 In the list of options, select the option Style Sheet and name it. The
Stylesheet.css file should be sitting right next to your theme.skin file.
The Stylesheet.css file
body {color:#ffff00;
background-color:Aqua;
font-family:Comic Sans MS;
}
Defining Multiple Skin Options
Using the themes technology in ASP.NET, you can have a single theme; but also, within the
theme’s .skin file, you can have specific controls that are defined in multiple ways.
The Theme.skin file, which contains multiple versions of the <asp:Textbox> server
control
<asp:Label runat="server" ForeColor="pink" Font-Names="Arial" Font-ize="X-
large" SkinID="l1"/>
<asp:Label runat="server" ForeColor="#004000" Font-Names="Verdana" Font-
Size="X-Small" SkinID="l2" />
<asp:Textbox runat="server" ForeColor="#004000" Font-Names="Verdana" Font-
Size="X-Small" BorderStyle="Solid" BorderWidth="1px"
BorderColor="red" Font-Bold="True" />
<asp:Textbox runat="server" ForeColor="#000000" Font-Names="Verdana"
Font-Size="X-Small" BorderStyle="Dotted" BorderWidth="5px"
BorderColor="#000000" Font-Bold="False" SkinID="T1" />
<asp:Textbox runat="server" ForeColor="#000000" Font-Names="Arial"
Font-Size="X-Large" BorderStyle="Dashed" BorderWidth="3px"
BorderColor="#000000" Font-Bold="False" SkinID="T2" />
<asp:Button runat="server" ForeColor="#004000" Font-Names="Verdana"
Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px"
BorderColor="#004000" Font-Bold="True" BackColor="#FFE0C0" />
A sample default.aspx page that uses the theme.skin file with multiple text box
style definitions

<%@ Page Language="C#" AutoEventWireup="true" Theme="Theme1"
CodeBehind="WebForm1.aspx.cs" Inherits="themes.WebForm1" %>
<!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></title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<asp:TextBox ID="TextBox1" runat="server" >textbox
</asp:TextBox>
<br /><p>
<asp:Textbox ID="TextBox2" runat="server"
SkinId="T1">Textbox2</asp:Textbox>
</p><p>
<asp:Textbox ID="TextBox3" runat="server"
SkinId="T2">Textbox3</asp:Textbox>
</p>
<br />
<asp:Button ID="Button1" runat="server" Text="Submit Your Name" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="enter" SkinId="l1" />
<asp:Label ID="Label2" runat="server" Text="enter name"
SkinId="l2" />
</div>
</form>
</body>
</html>

What is Web Service?
A Web Service is a reusable piece of code used to communicate among Heterogeneous
Applications.
Once a web service is created and hosted on the server in the internet it can be consumed
by any kind of application developed in any technology.
Web service can be accessed by any application regardless of the software and hardware
platform on which the application is running because web service complies with common
industry standards such as simple object access protocol(SOAP) and web service
description language (WSDL)
A web service is a web-based functionality accessed using the protocols of the web to be
used by the web applications. There are three aspects of web service development:
-Creating the web service
- Consuming the web service
- Creating a proxy
1) Creating the web service
How to create a Web Service
Step 1
Go to Visual Studio then click on "File" -> "Website" -> "ASP.NET empty website template".
Then provide the website name (for example: WebServiceSample).

Step 2: Add a Web Service File
Go to Solution Explorer, then select the solution then click on "Add new item".
Choose the Web Service template.
Enter the name (for example: Airthmatic.cs) then click on "Add".

This will create the following two files:
1. Airthmatic.asmx (the service file)
2. Airthmatic.cs (the code file for the service; it will be in the "App_code" folder)
Open the file Airthmatic.cs and write the following code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// used for Airthmatic calculation
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class Airthmatic : System.Web.Services.WebService
{
public Airthmatic() {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public int Add(int x, int y)
{
return x + y;
}
[WebMethod]
public int Sub(int x, int y)

{
return x - y;
}
[WebMethod]
public int Mul(int x, int y)
{
return x * y;
}
[WebMethod]
public int Div(int x, int y)
{
return x / y;
}
}
Attaching the WebMethod attribute to a Public method indicates that you want the method
exposed as part of the XML Web service. You can also use the properties of this attribute to
further configure the behavior of the XML Web service method.
.
Step 3
To see whether the service is running correctly go to the Solution Explorer then open
"Airthmatic.asmx" and run your application.
Now you will find all the method names in the browser.

To see the WSDL format click on the service description link or add "?WSDL" to the URL.
Example: http://localhost:65312/WebServiceSample/Airthmatic.asmx?WSDL
It will show the WSDL.

To determine whether the functions are working, click on one of the functions (for example:
"Add").
Now you will see two TextBoxes for checking. Enter the value for x and y and click on the
"Invoke" button.
Now you will see the result in an open standard form (XML).

Now your service is ready for use.
2) Consuming the web service
Step 4: Creating the client application
Now create a website and design your form as in the following screen.
Or you can copy the following source code.
<body>
<div>
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<td align="right">
<asp:Label ID="Label1" runat="server" Text="Enter 1st Number"></asp:Label>

</td>
<td align="left">
<asp:TextBox ID="txtFno" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="Label2" runat="server" Text="Enter 2nd Number"></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtSno" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="Label3" runat="server" Text="Result"></asp:Label>
</td>
<td align="left">
<asp:Label ID="lblResult" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnAdd" runat="server" Text="Add(+)" OnClick="btnAdd_Click" />
</td>
<td align="center">
<asp:Button ID="btnSub" runat="server" Text="Sub(-)" OnClick="btnSub_Click" />
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="BtnMul" runat="server" Text="Mul(*)" OnClick="BtnMul_Click" />
</td>
<td align="center">
<asp:Button ID="btnDiv" runat="server" Text="Div(/)" OnClick="btnDiv_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>

3) Creating a proxy
Step 5: Add a web reference to the Website
Go to Solution Explorer then select the solution then click on "AddWeb Reference" then
within the URL type the service reference path.
(For example: http://localhost:65312/WebServiceSample/Airthmatic.asmx) then click on the
"Go" button.
Now you will see your service methods. Change the web reference name from "localhost" to
any other name as you like (for example: WebAirthmatic).
Click on the "Add Reference" button. It will create a Proxy at the client side.
Now go to the cs code and add a reference for the Service.

Example: using WebAirthmatic;
Write the following code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebAirthmatic;
public partial class _Default : System.Web.UI.Page
{
Airthmatic obj = new Airthmatic();
int a, b, c;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnAdd_Click(object sender, EventArgs e)
{
a = Convert.ToInt32(txtFno.Text);
b = Convert.ToInt32(txtSno.Text);
c = obj.Add(a, b);
lblResult.Text = c.ToString();
}
protected void btnSub_Click(object sender, EventArgs e)
{
c = obj.Sub(a, b);
}
protected void BtnMul_Click(object sender, EventArgs e)
{
c = obj.Mul(a, b);
}
protected void btnDiv_Click(object sender, EventArgs e)
{

c = obj.Div(a, b);
}
}
Now first run the Web service then the application.

web service for Celsius to fahreheit
VB
[System.Web.Services.WebMethod()]
public double FahrenheitToCelsius(double Fahrenheit)
{
return ((Fahrenheit - 32) * 5) / 9;
}
[System.Web.Services.WebMethod()]
public double CelsiusToFahrenheit(double Celsius)
{
return ((Celsius * 9) / 5) + 32;
}
VB
protected void ConvertButton_Click(object sender, EventArgs e)
{
localhost.Convert wsConvert = new localhost.Convert();
double temperature =
System.Convert.ToDouble(TemperatureTextbox.Text);
FahrenheitLabel.Text = "Fahrenheit To Celsius = " +
wsConvert.FahrenheitToCelsius(temperature).ToString();
CelsiusLabel.Text = "Celsius To Fahrenheit = " +
wsConvert.CelsiusToFahrenheit(temperature).ToString();
}

ASP.NET Themes and Skins Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to ASP.NET Themes and Skins Guide

Similar to ASP.NET Themes and Skins Guide (20)

More from Paneliya Prince

More from Paneliya Prince (20)

Recently uploaded

Recently uploaded (20)

ASP.NET Themes and Skins Guide