Skins in ASP.Net and how behind I am

So something that has been around for while that I just stumbled upon is Skinning. Basically, this allows you to sent a certain look (using style sheets) for every control in the site. This even includes the built in controls like Tables and Textboxes. How is this done? Well maybe I can tell you.

First you have to go to your project and right click (yes I could make images, but honestly that’s more work than needed.) the project itself. Add -> Add Asp.net Folder -> Theme.

Yay, you have a folder. Sweet. Now you actually have to add the skin itself. Guess what you have to right click? Yes, the new folder. Add -> New Item -> Skin File. Name it whatever (I say you call it Basic because that’s what I called it for this example) and open it up.

Now you have to create a .css file, if you don’t already have one, and for this example let’s say you make one called SkinMe.css. Now you get to add these meaningless classes:

.defaultTable
{
    width:500px;
    border-color:Black;
    border-style:solid;
    border-width:thin;
}

.defaultTable tr
{
    width:500px;
    background-color:Navy;
}

.defaultTable td
{
    color:Red;
}

.nonDefaultTable
{
    width:300px;
    border-color:Black;
    border-style:dotted;
    border-width:thick;
}

.nonDefaultTable tr
{
    width:500px;
    background-color:Navy;
}

.nonDefaultTable td
{
    color:Red;
}

Basically, I have two different classes for tables, with really only one difference. (border-style:dotted) Now you need that actual markup file to hold these wonderful tables:

    <asp:Table ID="tableSkinDefault" runat="server">
        <asp:TableRow ID="tableRowSkinDefault" runat="server" >
            <asp:TableCell ID="tableCellSkinDefault" runat="server" >
                hihihi
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>

    <asp:Table ID="tableNonDefault" runat="server" SkinID="nonDefaultSkin" >
        <asp:TableRow ID="tableRowNonDefault" runat="server" >
            <asp:TableCell ID="tableCellNonDefault" runat="server" >
                hihihi
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>

Now you might notice that the second table is using the SkinID tag. This will make sense in the next part. Have your skin file open? Gooood. Now just paste this into it:

    <asp:Table runat="server" CssClass="defaultTable" />
    <asp:Table runat="server" CssClass="nonDefaultTable" SkinId="nonDefaultSkin" />

Now it might be making more sense. Once I added the SkinId tag to the skin file, this allowed me to have the same control take on two different classes. Now, you can only have one default (The first one as it doesn’t have the SkinId tag) and any others for the same control have to use the SkinId tag.

Now go back to the two tables and once again you’ll see there is one with a SkinId tag and one without. The one without will take the default look and the one with will take the named look. Pretty simple, right? Well we’re not completely done yet. Two more small steps:

Be sure to remember to link the style sheet on the page with the tables:

    <link href="../CSS/SkinMe.css" type="text/css" rel="stylesheet" />

And you have find the “pages” section of the web.config and add a tag:

    <pages styleSheetTheme="Basic">

And now you have the ability to set every table’s class in the entire site. Best thing is, this can be used for other properties too. Say you have a name property on some usercontrol (We’ll call it MapControl). You can do this:

    <%@ Register Assembly="Some.Control.Assembly" Namespace="Some.Control.Assembly.Controls" TagPrefix="someControl" %>

    <someControl:MapControl Name="Hi" />

And now every MapControl will have the Name property set to “hi”. Kind of nice.