ARTICLE

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

Posted by Abhimanyu Kumar Vatsa in Articles | ASP.NET using VB.NET on August 13, 2010

Tags: default skins, named skins in website, Named Skins to Themes, skins, themes, website skins

This is my series of articles on Theme based web developments and in this article part we will use Named Skins to Themes as we have seen in previous that were un-named skins.

Reader Level: Beginner

HTML clipboard

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">

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

That's pretty cool and most useful.