Developing Websites using Themes (Named Skins to Themes): Part 3

Introduction

 

In the previous article part we have seen that how to create un-named that are simple skins. But now in this part we will be using Named Skins. Un-named skins are sometimes called Default skins. Default skins are applied to every instance of a TextBox that we have already discussed in previous part. We also have the option of creating a Named Skin. When we create a Named Skin, we can decide when we want to apply the Skin. For example, we might want required fields in a form to appear with a red border. In that case, we can create a Named Skin and apply the Skin to only particular TextBox controls. Here is the coded example given below.

 

TextBox.skin Code


<
asp:TextBox
    SkinID="DashedTextBox"
    BorderStyle="Dashed"
    BorderWidth="5px"
    Runat="Server" />

<asp:TextBox
    BorderStyle="Double"
    BorderWidth="5px"
    Runat="Server" />
 

The first TextBox in above example has Named Skin. Notice that it includes a SkinID property. The SkinID property represents the name of the Named Skin. We use the value of this property when applying the Skin in a page. Above file also includes a Default Skin for a TextBox control. The Default Skin does not include a SkinID property. If a TextBox control in a page is not associated with a Named Skin, then the Default Skin is applied to the TextBox.

A Theme can contain only one Default Skin for each type of control. However, a Theme can contain as many Named Skins as you please. Each Named Skin must have a unique name.
 

The page given above contains two TextBox controls. The first TextBox control includes a SkinID attribute. This attribute causes the Named Skin to be applied to the control. The second TextBox, on the other hand, does not include a SkinID property. The Default Skin is applied to the second TextBox control.

 

Default.aspx Code

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

<!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="txtFirstName"
        SkinID="DashedTextBox"
        Runat="server" />

    <br /><br />

    <asp:TextBox
        id="txtLastName"
        Runat="server" />

    </div>
    </form>
</body>
</
html>

 

When we open the above page, the first TextBox appears with a dashed border and the second TextBox appears with a double border as given below in figure.

 

1.JPG

That's pretty cool and most useful.

 

Note: Continue in next part.
 

HAVE A GREAT CODING!