Introduction of Skins and Themes in ASP.NET

1K

As we see, many of the Websites, Applications are using different graphics, color schema. We can define Skin as set of combination of Graphics, Color and other display properties. This is dependable on CSS, Images and Skin file available on ASP.NET.

Today we will be talking about Skins and themes in ASP.NET here. As we see, many of the Websites, Applications are using different graphics, color schema.

We can define Skin as set of Combination of Graphics, Color and other properties. This is dependable on CSS, Images and Skin file available on ASP.NET.

Be clear, Skins have nothing to do with Back-end code and functionality of Web Application. This is only responsible for visual Interface that is presented to user.

Requirement:

• Visual Studio or Visual Web Developer
• Basic Knowledge of ASP.NET, CSS and HTML.

Process for using Skins & Themes in ASP.NET:

Lets start with new website project in Visual Studio. Create a New Web Site by Choosing Empty website. Add following Items in Empty solution.

• App_Theme folder
• Add a new folder inside App_Theme folder. We have named it myTheme.
• CSS file in myTheme folder
• Skin file in Theme1 folder.
• An Web Form (Page) on Root of Solution

Here is how it look after adding the items mentioned above.

Type of Skins in ASP.NET

Skins are of two types:

Names Control Skin : “The SkinId should be uniquely defined because duplicate SkinId’s per control type are not allowed in the same theme.” This is the Definition at Skin File by Developers.
In this case we have to provide ID to separate multiple Skins of same control.

Default Control Skin : “The SkinId is not defined. Only one default control skin per control type is allowed in the same theme.”. If we do not provide any ID to control, this is only control in Skin file.

Let’s Make some changes in our Skin File. I am adding skins for Textbox, H1 element in Skin file. Simply I added a Textbox style, Then Button and a Gridview with Simple Style.

<asp:TextBox runat="server" BackColor="#ccccff" ForeColor="Black" Font-Bold="true" BorderWidth="2px" BorderStyle="Solid"></asp:TextBox>

<asp:Button runat="server" BackColor="#ccccff" ForeColor="Black" Font-Bold="true" BorderWidth="2px" BorderStyle="Solid" />

<asp:GridView runat="server" HeaderStyle-BackColor="#33cccc" AlternatingRowStyle-BackColor="#ffccff"></asp:GridView>

Please note, there is no ID associated in above code.

Stylesheet

I have added a H1 and H3 tag, so I have made some changes in our style sheets.

h1 {
    font-family:Mistral;
    color: yellowgreen;
}

h3 {
font-family:'Segoe UI';
color:#808080;
font-weight:bold;
}

Web.config

Now the important thing we need to do is Put a Element in web.config to apply theme. In the root of your configuration file, go to system.web node and add a element called Pages.

 <pages theme="myTheme"></pages>

Now, all the Pages in your Solution has this theme applied. All the controls in your pages will look alike according to skin.

ASPX Page

Let’s add some code in Default.aspx page which we have already added in our solution. Skipping regular HTML tags, lets directly move inside Body Tag of Default.aspx.

<div align="center">
            <h1>Customer Search</h1>
            Name :
            <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
           <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
            <br />
            <h3>Customers</h3>
            <asp:GridView ID="GridView1" runat="server" Width="447px" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
                    <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                    <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                    <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
                    <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
                    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                    <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" />
                    <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
                    <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
                    <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                    <asp:BoundField DataField="Fax" HeaderText="Fax" SortExpression="Fax" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers] WHERE ([ContactName] LIKE '%' + @ContactName + '%')">
                <SelectParameters>
                    <asp:ControlParameter ControlID="txt1" Name="ContactName" PropertyName="Text" Type="String" />
                </SelectParameters>
            </asp:SqlDataSource>
        </div>

This above code will produce below design.

Great, Let’s add code for Button Click event also.

GridView1.DataBind();

As you can see, we have created DataSource using Northwind database and where clause is using LIKE statement from TextBox to match with ContactName field.

Now While accessed this page from Browser and Clicked Button, below is output.

Please provide your valuable feedback or suggestion.

This article is first written by me on DotNetSpider.com.