Developing Websites using Themes (Adding Simple Skins to Themes): Part 2

This is my series of articles on Theme based web developments and in this article part we will add skin file to App_Themes folder and will talk about coding procedures.

Introduction

 

As we know any Theme can contain more than one skin files. Skins always enable us to modify properties of any ASP.Net control and let that control look better than before. Assume an example, we want to change the appearance of each and every TextBox exist on ASP.Net web page. In the example given below we will be changing appearance with a red blue background and a dotted border.

 

Steps to Add Skins

To add skins we have to create a folder on root named App_Themes\Simple. After adding such folders add a file named TextBox.skin inside Simple folder and write the following codes given below. We can name a Skin file anything we want. I recommend following a naming convention in which we name the Skin file after the name of the control that the Skin modifies.

 

TextBox.skin Codes

<asp:TextBox
    BackColor="Green"
    BorderStyle="Dotted"
    Runat="Server" />

 
A Theme folder can contain a single Skin file that contains Skins for hundreds of controls. Alternatively, a Theme can contain hundreds of Skin files, each of which contains a single Skin. It doesn't matter how we organize our Skins into files because everything in a Theme folder eventually gets compiled into one Theme class. Above TextBox.skin file contains a declaration of a TextBox control. Notice that the TextBox control includes a BackColor property that is set to the value Green and a BorderStyle property that is set to the value Dotted. We also notice that the TextBox control includes a Runat="Server" attribute, but it does not include an ID attribute. We must always include a Runat attribute, but we can never include the ID attribute when declaring a control in a Skin. We can't create a Skin that applies to the properties of a User Control. However, we can Skin the controls contained inside a User Control.

Default.aspx Code

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="Simple"%>

<!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>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</
html>

Notice that the code given above includes a Theme attribute in it's <%@ Page %> directive. This attribute causes the Simple Theme to be applied to the page. Now when we open the page the TextBox control appears with a green background color and dotted border. Only certain control properties are "themeable." In other words, we can create a Skin file that modifies only certain properties of a control. In general, we can use a Skin to modify properties that have an effect on a control's appearance but not its behavior. For example, we can modify the BackColor property of a TextBox control but not its AutoPostBack property. By default, all control properties are theme able (can be modified in a Skin file). However, certain control properties are decorated with the Themeable(False) attribute, which disables theming.

 

1.JPG
 

 Note: Please learn next part for coding.

HAVE A GREAT CODING!