Themes and 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.

Next >>

Codedefiner

.Net Tutorials | Vb.Net Tutorials | C#.Net Tutorials | Sharepoint Tutorials

Themes and Skins in ASP.NET

Select