Simple Theme Example (aka StyleSheetTheme)

  • Article

One of the little projects that I've been working on lately is theme's and trying to start building a theme library for controls.  So, to start that, I've created the following theme that you can use as a starting point, and from here, can start building your own themes for your websites.  Eventually, I'd like to build a community driven theme library, but thats a bit of a ways off yet.

So lets start.  First, in our web application, we need to add a theme folder.  You can do that by adding an "ASP.NET Folder", then Theme to your application.

Let's create a CSS style sheet first:

 body 
{
    background-color: Blue;
    color: Silver;
}

Notice, the css is pretty simple here, it'll just be imported by the stylesheet theme into the designer and in the run time.

Now, how about the skin file:

 <asp:HyperLink runat="server" Font-Italic="True" Font-Names="Tahoma" Font-Underline="True" ForeColor="White" Text="DefaultLink" />
<asp:HyperLink SkinID="smallLink" Font-Size="XX-Small" runat="server" Font-Italic="True" Font-Names="Tahoma" Font-Underline="True" ForeColor="White" Text="SmallLink" />

I've included two of the same control types.  One has a SkinID attribute, and the other doesn't.  If you don't include a SkinID in the control on the aspx page, it'll use the default one (without a SkinID), but you can also customize the control by using a SkinID.

And finally, the default.aspx:

 <%@ Page StylesheetTheme="sampletheme" Language="C#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:HyperLink ID="HyperLink1" runat="server" />
            <br />
            <br />
            <asp:HyperLink ID="HyperLink2" runat="server" SkinID="smallLink" />
        </div>
    </form>
</body>
</html>

All I did was add a line in the page directive that says "StyleSheetTheme="SampleTheme"" and boom, everything works.