Beginner's Guide to Themes in ASP.NET

Using Themes with ASP.Net 2.0 is very simple. Most web designers by now understand the concept of ’skins’. That’s the way Theming in ASP.Net 2.0 is built, by creating skins, or a ‘look and feel’ for a web site.

Here are the absolute necessities to build a theme:

1. A folder called ‘App_Themes‘ in the application’s root directory
2. At least one folder, with the name of the ’skin’ as its name.
3. Within that folder, at least one ’skin’ file

Number 1 is fairly straightforward, but if this is your first time learning about Themes in DotNet 2.0, you may not know what a ’skin’ file is. Basically, it’s only a text file, with ‘.skin’ used as the extension. Inside that text file is where you build what will be your ’skin’. The only things that are required inside this .skin file is a list of all the ASP.Net server controls, the look of which you want to control. Let’s say that, for each and every textbox you have in your website, you would like the border color to be solid, 1 pixel in width and Light Gray in color, and you want it to have an Antique White back color. No problem. In the skin file, you build an ASP.Net Textbox, including the Runat=”Server” designation, but WITHOUT the ID attribute, using the look and feel you desire. For instance, in this example, it would look something like this:

<asp:TextBox
  BorderColor="LightGray"
  BackColor="AntiqueWhite"
  BorderWidth="1px"
  Runat="server" />

Now, you create a look and feel for each and every ASP.Net server control you want to include in this skin file. There’s no real need to include EVERY server control in the skin file, but you probably should include each server control that you’ll most likely be using in the application. Then, save that skin file, with a .skin extension, with the same name as the designated skin, and inside the designated Theme directory.

At this point, most likely, your eyes are wide open, thinking of all the possibilities here. And, it’s mostly just that simple, but there’s a little more. At some point, you’ll realize that your web pages will not consist entirely of ASP.Net Server controls. Yes, you’ll probably have some pure text and you’ll probably have some regular HTML tags on your page. Not to worry – All you do is create a CSS file with the same name as your THEME. In this CSS file, including sections for anything that you’d normally use in a web page, like the BODY, Anchor, TABLE and/or TableCell tags.

The last thing necessary is to tell your application/site which theme to use. You can do this in multiple ways. One way, is to assign a theme in the Page Directive:

<%@ Page Language="VB" Theme="ThemeOne" %>

But, you can also apply it to the entire application - every file – by adding an item to the Web.Config file. Inside the System.Web section:

<pages theme="ThemeOne" />

Of course, within each and every DotNet control, there’s now an extra attribute : EnableTheming. With this Boolean (true or false) attribute, you can turn off the designated theme for one or more server controls, whenever needed.

It even gets better. Let’s say you want to have multiple ‘looks’ for a particular control (maybe a Textbox), within a particular Theme. That’s easily accomplished. In your skin file, create the multiple looks that you want for the textbox, by adding multiple TextBox controls to your skin file. Then, add the ‘SkinID‘ attribute to each textbox, to distinguish it from the others. Then, inside individual textboxes in the actual page, you can also use the SkinID attribute, to designate which textbox skin to use.

OK, now, you’re probably saying to yourself, “Well – what’s next?”. However, there’s not much. You can assign the them of a page programmatically, by adding a line to the Page_PreInit Event (new to ASP.Net 2.0):

Page.Theme="ThemeOne"

You can also assign it, via a querystring, if desired. You can do the same for a particular server control’s SkinID if you need.

And that’s all there is – it’s very simple. In fact the hardest part (IMHO) is coming up with the best matching color combinations. Here are two links to a file which shows an ASP.Net page, with no ‘look and feel’ attributes assigned to any of the controls. It’s all changed by Theme:

Related Posts:

• No Related Posts