ASP.NET 2.0 Themes: Learn how to use them today!

This is ported from my old weblog. Originally published June 22, 2006

First, I assume here that you know themes and read about them, but are a bit afraid or unfamiliar with using them. If you don’t know what are Themes and skins in ASP.NET 2.0, check their section on MSDN as well as this great article (another one).

Do you know that…

  • Do you know that you can provide intellisense to skin files in VS2005? Simply go to Tools menu, click Options, and from the tree in the left, expand the node "Text Editor" to  click it’s sub node "File Extension". In the "Extension" text box, write "skin", and select "User Control Editor" from the "Editor" drop down, click add, and then OK.
  • Do you know that ANY stylesheet existing in the folder of the current "Theme" or "StylesheetTheme" is inked on rendering? Not just the stylesheet with the same name of the Theme, and not only when you’re using the theme as "StylesheetTheme" as some believe.
  • Do you know what differences exist between setting a theme using the Page Theme" property and the Page "StylesheetTheme" property?
    • If you have the same property on a control in the page and the same type of control in the skin file with different values, the value used will be the value in the page if you’te setting the theme via the "Theme" Page property, and will be the one in the skin file if you’re using "StylesheetTheme"
      The bottom line is that a "Theme" is applied AFTER page controls properties are set, while a "StylesheetTheme" is applied before setting control properties in the page.
    • If you set the your theme by using the "Pages" "Theme" property in web.config, you’ll NOT see the effect of the theme in design time in VS 2005. Setting "StylesheetTheme" makes the effect appears in design time.
  • Do you know that to change the theme of the page programmatically, you have to set it before the "Init" event of the page? (i.e in the "PreInit" event).

Making real use of themes

Have you been in the famous template graphics problem?

  • You have a template (lets say a Masterpage) used in all site pages.
  • The designer gives you the website design with some images in it of course, and one or more stylesheet file(s), which you need to reference in your template.
  • Of course, not all the site pages are in the same folder.
  • On your development box; either you’re using IIS or ASP.NET development server, the site i likely to be a virtual folder, while on the production server, the site is likely to be on the root of some domain.
  • You don’t know how to reference the images/stylesheet(s) in the template.
    1. You can’t make them relative to the page, as simply not all the pages are in the same folder.
    2. You can’t use root relative paths, as the root of the site on your machine is simpley not the root of the site on the live server.
    3. You want to reduce the number of server side images used in your side, for the performance, so, you aren’t just into mking a server side control just to make ASP.NET take care of the paths.
    4. You (and your designer) hate the ugly lines like
      <img src='<%= Page.ResolveUrl("~/images/myImage.gif")%>’ alt="Just a sample" />
      hint: "~" is used to refer to the root of the ASP.NET application, whether a virtual directory or a root.

A new solution other than described in point 3,4 comes with ASP.NET themes.

  1. You can just apply a default theme to all your site (ie. by writing it in web.config)
  2. If your designer is that geek he should be, he’ll be doing most of his work in a stylesheet, move that stylesheet to the folder of the theme you use.
  3. Any relative url in CSS is relative to the CSS file itself not the page using it.. As the stylesheet will be linked from a consistant place, just put the graphics folder(s)beside your CSS file(s), to be linked from there.
  4. Use a skin file with the same filename as the skin folder name, inside which, apply all server controls styles.

Of course, as you see in point 4, this doesn’t solve it completely. You’ll still need to use server side controls where CSS doesn’t just fit.

An interop hint!

No.. No unmanaged stuff here :-D. I mean by interop, your interop with your cool designer ;-).

Let’s imagine this scenario:

  1. There’re many listing pages (i.e, in site admin) with many grids that should have the same design applied.
  2. Your designer gives you only a sample HTML table with a CSS class for the table, the odd rows and the even (alternate) rows, with corresponding CSS file of course.
  3. You don’t want to go through the "___Style" properties of each grid to set the CSS classes. You want to set a single property (like a CSS class or something) on the entire grid. You tell your designer and he just doesn’t see why he should bother!

A solution to that repeated scenario (I’ve gone through and saw with MANY designers) in ASP.NET 2.0 using themes would be:

  1. Of course implementing a site wide theme, and adding the stylesheet file there.
  2. Adding a skin file with other filename than the theme folder name.
  3. Setting the "___Style" and "CssClass" properties of the controls you need (i.e: GridView).
  4. Setting the "SkinID" property on all the corresponding controls in the pages (i.e all the GridView controls that should use that design) to the filename of the new skin file (this will be our single value we need to set on the entire grid)

Of course, the same way can be used to solve similar problems.

Finally, I know that developers hate to see much talk without code or at least screenshots. I’m considering putting some code with this soon, but, I’m likely to forget or not have time, so, I hope this one doesn’t annoy you that much as it’s now

Share With Friends:

P.S. Please help me out by checking this offer, then look below for a small Thank You.

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.
It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2, ASP.NET 5, and other fullstack developer goodies.

  • http://

    Hey the intellisense tip was great.

    I like themes a lot but I haven’t had a chance to figure out what I would use the “skinid” field for.

  • http://

    Quick question. I’ve been researching Themes and like what they have to offer. However, there’s one bit of functionality that appears to be missing. I’d like to set a website wide Theme on a per session basis programmatically. I don’t want to add Page_PreInit calls to all of my pages. Rather, I’d like a generic Theme applied (e.g. web.config) until I am able to identify the user, then apply the Theme once (e.g. at Login) to the session.

    Do you know if this is possible?

    Thanks… -a

  • Uchiha Itachi

    Rival for some .NET Theme Control.