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:
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” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<form id=”form1″ runat=”server”>
<asp:HyperLink ID=”HyperLink1″ runat=”server” />
<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.