Simple Theme Example (aka StyleSheetTheme)

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:

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” “”>
<html xmlns=””>
<head runat=”server”>
<title>Untitled Page</title>
<form id=”form1″ runat=”server”>
<asp:HyperLink ID=”HyperLink1″ runat=”server” />
<br />
<br />
<asp:HyperLink ID=”HyperLink2″ runat=”server” SkinID=”smallLink” />

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