Themes, Skins in Asp.Net
A Theme is able to define look and feel of your website. Themes are able to controls the appearance of content or controls for a web page.
A skin file can enable you to modify the properties of any Asp.Net control. Style sheets are also same as skins, they can able to modify the properties of any control including Asp.Net and HTML controls.
Creating the Theme in ASP.NET is very easy, just add the folder to the App_Themes folder in your application. If App_Themes folder does not exists in your application root directory, then one new folder and name it as App_Themes.
After creating the theme folder in App_Themes folder, add skin file or CSS file to that folder.
Theme With Skin:
After creating App_Themes folder , right click on this and click on Add Asp.Net folder and select Theme and name it as Simple(theme name).
Then add skin file to the Simple Theme. For that right click on Simple theme folder and select Add New Item, from the panel select skin file and name it(here SimpleSkin.skin).
Now you are ready to apply the styles to Asp.Net Page. Add following line of code in SimplSkin.skin file.
<asp:TextBox ID="TextBox1" BackColor="yellow" ForeColor="red" runat="server"/>
Here I just gave the back ground color as yello and forecolor(font color) as red for the textbox.
Here I just added the properties to the textbox, if you want you can add properties to any Asp.Net control.
Your theme is ready to use. Then you need to apply Simple theme to your webpage.
The following code gives how to apply theme to web page in ASP.NET.
<%@ Page Language="VB" AutoEventWireup="false" Theme="Simple" CodeFile="Default.aspx.vb" 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>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txt1" runat="Server" ></asp:TextBox> </div> </form> </body> </html>
In the above code you can observe that for the page directive we gave the Theme value as Simple that means we applied Simple theme for the particular page.
When you execute this page , you can find background of textbox as yellow and if you type, you can find font color as red.
Themes are able to override the properties of Asp.Net controls i.e, if you assign the textbox property Backcolor as green then apply Simple theme, you observed that the textbox backcolor is in yellow only because we mention the backcolor as yellow in Theme.
If you don’t want to override the existing properties of Asp.Net controls, you can do with simple changes in your page.
Observe below code.
<%@ Page Language="VB" AutoEventWireup="false" StylesheetTheme="Simple" CodeFile="Default.aspx.vb" 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>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txt1" BackColor="green" runat="Server" ></asp:TextBox> </div> </form> </body> </html>
In the above code we assign the theme name Simple to the StylesheetTheme attribute of Page directive. Then apply the Backcolor as green to the textbox and execute the page. You observe that textbox backcolor displayed as Green instead of Yellow(what we mentioned in Simple Theme).
Instead of applying the themes to each page you can mention it in web.config file for entire application.
<configuration> <system.web> <pages theme="Simple"> <namespaces> </namespaces> </pages> <system.web> <configuration>
In web.config file, for page tag you can set the theme value. You can observe above code, in that we assign the Simple theme to the theme attribute of pages tag.
In this way you can apply themes to particular page or for all pages in your application depending on your requirement.
Download source code here
