Colorful ASP.NET Themes

Thursday, September 1, 2005

The Colorful Web Site Starter Kit on .NET Treats and Tricks is a nice piece of work (via Cindy). On the site you’ll find a find 8 ASP.NET 2.0 Themes you can download and use. The themes not only look nice but have a great design.

For instance, Erika used styles from a CSS file whenever possible. I’ve seen some grumbling that themes and skins in ASP.NET 2.0 are an evil plot to subvert web standards, when actually themes provide a great infrastructure to manage multiple sets of CSS files. Select a theme for a page and the runtime will automatically inject link tags for all of the stylesheets in the chosen theme directory.

There are some server controls that are just not easily styled: WebPartZone, Calendar, GridView, for instance. The colors and other visual properties of these controls are set with a skin file in each theme (see my ASP.NET 2.0 Themes article for more details on themes and skins).

There is also an Images subdirectory for each theme. Images can be tricky with themes, and tricky with master pages, and even trickier with themed pages using a master page.

You never want to use an absolute path to an image in a theme directory. Absolute paths break easily, and you’d have to change them with your own code if you want to switch themes. Always use relative paths. For instance, here is a snippet from the default.css in one of the themes.

td.headerbar

{

    background-image: url(Images/bar.jpg);

    text-align: right;

    height: 24px;

}

When the above reaches the client, the browser will be smart enough to request bar.jpg from the App_Themes/MSN_Blue/Images directory (when MSN_Blue is the selected theme).

What about images you want to vary by theme on a page, or on a master page? We know the runtime will do some URL rebasing for paths in a master page (read near the end of ASP.NET 2.0 Master Pages for more details), but that doesn’t help in rebasing an image’s src attribute from one theme to the next if you have hard coded the full path to an image file in a theme.

The easy solution is the SkinID attribute for server side controls. You can only have one default skin for a control, but multiple skins are available with a skin id. For instance, the colorful web site starter kit uses two image skins, identified by SkinID.

<asp:image runat="server" Imageurl="Images/logo.jpg" skinid="logo" />

<asp:image runat="server" Imageurl="Images/bullet.jpg" skinid="bullet" />

Notice the src uses relative paths. The logo on the master page uses the following:

<asp:Image ID="Image1" runat="server" skinid="logo"/>

With this approach you can switch the logo for a web site just by using a different theme. Sweet.


Comments
rick Tuesday, November 8, 2005
Where can I find the code to download for these themes...can't seem to locate how or where to download the themes and masterpages..

Looks like a good starting point ... if I can find the code

Thanks!

Rick
scott Friday, November 11, 2005
Rick: I've tried getting to the site the last couple days and it seems dead. :(
Tim Haines Sunday, November 13, 2005
Hey Scott,

I flicked through your Themes article. Nice work. I'm still dubious about themese though. What I'd like to see more of is a good guide on how to use them in conjunction with css. Have you seen anything similar?

Cheers,

Tim.
Tim Haines Sunday, November 13, 2005
I've read a little more about this now. It seems it would be reasonably easy to add a css file to each skin folder, which specifies the colours etc to use for the theme.

It would be great to see an article that talks about some strategies for seperating layout css and colour css. I guess you'd want to associate the layout css with your masterpages or controls, and the colour css with the themes. You wouldn't want to be maintaining layout css in more than one css file if you didn't need to be.
scott Monday, November 14, 2005
I think the rule of thumb will be "use CSS whenever possible and use a skin when required".

Then like you say, Tim, you can manage those CSS files easily with the themes feature.

I think the article that comes closest to touching on these subject is :

"Building ASP.NET 2.0 Web Sites Using Web Standards"

msdn.microsoft.com/.../default.aspx
Tom Brittell Friday, July 14, 2006
Thank you for your useful pages. I tried your suggestion of:

“Always use relative paths. For instance, here is a snippet from the default.css in one of the themes.”
background-image: url(Images/bar.jpg);

1st in my user control I made sure of the image by wiring:
<asp:ImageButton ImageUrl="~/App_Themes/Default/images/edit.jpg" ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" />

This worked. Then I tried:
<asp:ImageButton ImageUrl="Images/edit.jpg" ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" />

It gives me a error on "Images/edit.jpg" as not being found and will not display it. I’m new to VS2005 is there some switch to turn on enabling this theme ability. I have had no problem with the skins or CSS.

Does the smart part only work for images in the theme CSS? On this point your page is not clear.

Sorry to be a bother.


Stendal Thursday, July 20, 2006
Hi Rick,

I also had some problems finding the download of the Themes. But at the end I found it trough the main site of ".NET Treats and Tricks".

Link to the download page:
http://www.dotnettreats.com/tools/Default.aspx
Matt K Friday, August 11, 2006
@ Tom
"This worked. Then I tried:
<asp:ImageButton ImageUrl="Images/edit.jpg" ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" />"

The problem is that this simply doesn't use skinning so it is not looking inside your Theme folder - its just looking for a folder called "Images" in the same place as the file you've included the above code on.

What you need to do is make a skin for this image. For example I have a skin file called SiteImages.skin which is in my theme folder. I use it to keep lots of image skins in that I want to change when the Theme is changed.

So if you created a SiteImages.skin file in your Theme folder called "Default" you would put in the following code:
<asp:ImageButton ImageUrl="Images/edit.jpg" SkinID="PageEditButton" runat="server" />

and on the original page leave this:
<asp:ImageButton SkinID="PageEditButton" ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" />

Note here that skin files DO NOT contain the ID attribute, and I've left the CausesValidation and CommandName attributes out of the skin because I like to keep functional things on the original page rather than moving them to the skin file - although you will find you can do this if you wish.

If you really wanted - and I have had times when I've needed this, you could use the theme *without* any skin by using the following code:
<asp:ImageButton ImageUrl="~/App_Themes/<%= Page.Theme %>/Images/edit.jpg" ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" />

I would use this approach in a javascript file that sets the source of an image, say for a mouseover, that I want to change when the Theme does. So far I haven't seen any other way of doing something like this.
gravatar irfan abdul sattar Saturday, February 6, 2010
Hello All,

Can any one please provide me documentation for the asp.net theme?


Thanks
irfan
irfan.a.sattar@gmail.com
sdsad Saturday, February 20, 2010
sdsad
GURJEET Wednesday, July 21, 2010
not able to run the themes
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!