Friday, April 4, 2008

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.