Applying built-in themes for Webpage design is quite easy, as you just need to specify the name of the theme with the theme attribute of the Page directive. However, you can also apply custom themes to Web pages. For this, you need to create a theme first. To demonstrate how to create themes. Let's create a Web Application Custom theme.
First we need to add the App_Theme folder to our application and perform the following steps for it:
1. Right click on website name in the Solution Explorer window and select Add ASP.NET Folder->Theme from the shortcut menu to add the App_Theme folder. A subfolder named Theme1 is automatically created inside the App_Themes folder.
2. Right-click the Theme1 folder and select the Add New Item option from the context menu to display the Add new Item dialog box.
3. Select the Skin file template option and specify the name of skin as red.skin, and click on Add button. The red.skin file is added to the Theme1 folder in the solution explorer window.
4. After creating a new skin file, add the below code to the red.skin file to define its style properties.
<asp:Button runat="server" BackColor="#336699" ForeColor="White"
Height="36px" Width="109px" />
<asp:Label runat="server" BackColor="#336699" ForeColor="White"
Height="50px" Width="199px"></asp:Label>
<asp:TextBox runat="server" BorderColor="#336699"
BorderStyle="Solid" BorderWidth="2px" Height="33px" Width="196px"></asp:TextBox>
In the preceding code, we have defined style properties for three controls, a Label, a Button, and a TextBox.
5. Now to test the skin, add a Label control, a Button control, and a TextBox control in the Default.aspx page as added by the following code.
<%@ Page Language="C#" Theme ="Theme1" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<div>
</div>
<asp:Button ID="Button1" runat="server" Height="49px" Text="Button"
Width="132px" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
</form>
</body>
</html>
After writing this code, Run default.aspx page and it will show the controls according to style added in skin file.
If you want to implement SkinId in your skin file , this video cover skinId property
First we need to add the App_Theme folder to our application and perform the following steps for it:
1. Right click on website name in the Solution Explorer window and select Add ASP.NET Folder->Theme from the shortcut menu to add the App_Theme folder. A subfolder named Theme1 is automatically created inside the App_Themes folder.
2. Right-click the Theme1 folder and select the Add New Item option from the context menu to display the Add new Item dialog box.
3. Select the Skin file template option and specify the name of skin as red.skin, and click on Add button. The red.skin file is added to the Theme1 folder in the solution explorer window.
4. After creating a new skin file, add the below code to the red.skin file to define its style properties.
<asp:Button runat="server" BackColor="#336699" ForeColor="White"
Height="36px" Width="109px" />
<asp:Label runat="server" BackColor="#336699" ForeColor="White"
Height="50px" Width="199px"></asp:Label>
<asp:TextBox runat="server" BorderColor="#336699"
BorderStyle="Solid" BorderWidth="2px" Height="33px" Width="196px"></asp:TextBox>
In the preceding code, we have defined style properties for three controls, a Label, a Button, and a TextBox.
5. Now to test the skin, add a Label control, a Button control, and a TextBox control in the Default.aspx page as added by the following code.
<%@ Page Language="C#" Theme ="Theme1" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<div>
</div>
<asp:Button ID="Button1" runat="server" Height="49px" Text="Button"
Width="132px" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
</form>
</body>
</html>
After writing this code, Run default.aspx page and it will show the controls according to style added in skin file.
If you want to implement SkinId in your skin file , this video cover skinId property
