ASP.NET Themes On A Sunday Afternoon

Scott,

Ouch. My brother-in-law ruptured his achilles tendon playing volleyball a few years ago. He was immobile for a while. Glad to hear the X-Rays came back negative. I hope you have a speedy recovery.

ASP.NET is not my thing, but I suppose ((sigh)) I'll look at your article. Notice that themes are also not my thing as I use the "out-of-the-box" poison-ivy-earth theme on my blog. It was difficult enough trying to decide on that one (worse than picking out bathroom tile).

---O

p.s. Did you complete the double play and win?

No, I didn't get the ball off in time for even one out. The first thing I did when I dropped was look around to see what hit me. When I saw noone else was even close I got the sinking feeling in my gut that something bad had just happened to my body.

Then I started thinking about retiring from softball and taking up golf again...

We lost both games. :(

Ugh. I'm hoping to go to the gym tonight, for my first gym session since I has almost exactly the same experience at the end of June. My leg popped at the end of a workout, shooting a step-back jumper from the 3-point line. I whipped around to see which !@#$ in the (empty) gym had used his driver to sail a golf ball into my calf. Nobody, of course, but it hurt like hell.

The diagnosis was "torn fascia around my gastocnemious", and it took about 5 weeks for all the swelling, bruising and limping to go away.

Hi Scott,
Your article on ASP.NET themes has been very helpful. I have a question - would theming apply to derived custom controls? I have a derived calendar control and when I specify some styles to a calendar in a skin file, my derived calendar control is unaffected. Is there something I would need to do in order to get the derived control to be themable? Thanks!

Michelle:

You need to @ Register your control in a skin file and provide an explicit skin for the control. See: odetocode.com/.../2145.aspx

Hope that helps,

Hi Scott,
I recently posted a question regarding derived controls not being themed - by adding a Register directive to the skin file, I was able to theme my custom control by declaring it with the same tagprefix I used to declare the control in the aspx page. You may have already knew this...I wonder why this wasn't documented? Thanks for your time!

Howdie I read your article and the article is very clear. But...whats wrong with css? Why use theming instead?

Cheers,
Wes

Thanks, Wes.

I think if you have a good understanding of CSS or are working with a web designer who does CSS, then you should certainly favor CSS over skins.

The Theme infrastructure does a great job of managing style sheets, so CSS and themes work well together (see odetocode.com/.../2144.aspx).

Some controls in .NET 2.0 are just very hard to use with CSS (the Calendar control comes to mind). I've also heard WebParts are nearly impossible to style in this release. In those cases you'll have to use skins.

First of all thanks for the nice article but i have alil question over here . does it impact the performance of the page ?

Thanks for you clear answer. I noticed the link elements in the themed pages mentioned in your other article. So it does cooperate with css design which is good to know.

I do think it's good practice to understand what your doing and to shift the visual presentation from the data. That's why I use CSS.

Nevertheless it's a good article and microsoft thinkig about standards(w3c output of controls and CSS in the theming) in asp.net 2.0 makes me happy!

Cheers,
Wes

Hi Amer:

As with most performance related questions the answer is "it depends". The Themes are compiled into code that will set all the properties on an object specified by it's skin, so this piece of functionality won't be any less performant than setting the visual properties yourself.

Of course the compilation of the theme will add a one time overhead (which you can avoid with precompilation), and there is a little bit of reflection used to match up a control with a skin, so that will add a bit of overhead. For most web sites I don't think you'll notice the impact.

Hi, I've one question about themes. What I want is to assign a theme to a page programatically (easy), but I want to upload this theme also programatically.

I mean, I want to write a skin file in a text box, submit it and automatically change the theme of this page... is it possible?

On postback you could create a directory under App_Themes (the ASPNET / NETWORK SERVICE accounts will need write permissions, which can be a sticky issue), and write out the contents of the TextBox into a skin file. I imagine once that is done you'll need a Response.Redirect back to the site again to pick up the theme.

As for changing the theme - did you want to change the theme for the entire site? If so, you could use the configuration API to write to web.config (see my configuration article on OdeToCode.com).

I am running .TEXT in a virtual directory under my site root. My site root specifies a theme, which doesn't exist at the .TEXT level. Is there a way in the web.config to specify there is no theme?

Steve: Honestly, I don't remember how .Text themes worked - it's not the same as the themes feature in ASP.NET 2.0, so I can't offer any help.

I'm currently porting an ASP Web Application to dotNET to take advantage of the new features. However the original ASP code dynamically generates various forms and tables but I'd like to use the Themes to provide a consistant look and feel for the site. But how can I get hold of details of the current theme - for say a data grid so I can apply the same style to the dynamically generated tables?

The best I've come up with so far is to dynamically add an instance of all the controls I need to the current page, then extract any changes that themes have applied at a later stage

John: If you are trying to get to the theme provider that actually applies the changes - I've had trouble with this myself.

Scott, The theme provider would be ideal, but I'd be satisfied with coaxing the system into applying the current Theme to a collection of standard objects (say DataGrid) that I want to mimic then trying to extract the formatting changes that have been applied so I can apply them to my own objects.

I have a question regarding the design mode and master page. My master page uses Theme for styling the Controls on my master page and css style sheet to style the page.
The problem is I can not see the skin job on the designer. I had to put <LINK /> to the Head of the master page to be able to see the styling.
The question - Is there any way around using themes (both skin and css) for master page and to be able to see the styling in the design mode of Visual Studio 2005. Right now I deleted the <page theme="Master" /> from web.config.
Is there a way to use something similar for Skin file as <LINK ... rel="stylesheet" ... /> for css style. What are the down sides such approach? Thank you for the answer.

Tatyana: Have you tried setting the StyleSheetTheme in the page? That should help with the designer.

Hi, I've looked all over for a solution to my problem but can't seem to find one, can you help.

Problem - I have 4 themes, each has its own set of images consistantly named between themes. If I add a new section to my site I have to edit each themes css file to define the section, images colors etc. What I'd prefer to do is have one css file all themes 'share' which directs images to the current themes image folder. (Hope that makes sense)

I've tried having each theme @import a global.css file but then all the images point to the main images folder not the images folder inside the themes folder.

There must be a way to define say body {background-image: url('images/bg.gif')} globally for each theme rather than having to edit each themes css file. I've basically got four copies of the same css file, one for each theme.

Any ideas?

Here's a problem.

I am using Web Deployment Projects at

msdn.microsoft.com/.../default.aspx


It precompiles pages, and what happens with aspnet_compile is that the attributes in the <pages> section of web.config get hard-coded into the .aspc files' Page directive.

So once you pre-compile (to protect your .cs files, for example), you've lost the chance to globally change the theme in the config file!

So now I have to set the theme programmatically in the master page. Which is rubbish, but still...

Rick: I'm afraid I don't have any good ideas for that scenario.

James: I have a blog post coming on that topic this week.

Scott;

Thank you. I'm a "hobbyist" and appreciate the concise explanation of Themes & Skins. I now have a good basic understanding on how to create and implement themes.

Thanks for your nice article!.

I have a question which has bugged quite a time now (I'm not sure you'll notice the new comment but anyway...):

The theming feature of ASP.NET 2.0 is nice but I feel there's a shortcoming by the fact that every CSS files you put into the theme directory is automatically included in the final HTML page, so as *.skin files, which is not good in my opinion.

Each page in my site usually has one or more CSS files of its own (for example: Page1.aspx has Page1.css and so on...), all these CSSes and images are put together in a directory, each directory now is a theme. To set the theme programmatically, I parse the path at the Init event of the page then everything is set.

As far as I understand, baecause of the 'joining all CSSes and skins' feature of ASP.NET, I would have at most *one* CSS and *one* skin file in Theme directory, or having to carefully define the SkinIDs and CSS classes so that they won't overlap, I'm confused.

Do you have any idea ?.

Hi VAnhTu1987:

I think if you are going to have one css file per page, you won't want to keep the css files in a Theme directory. Themes really works best when a css can be applied to every page in the theme.

Thanks for your quick reply.

I usually use CSSes and skins as a mean to separate structure, content and its presentation. As a result, these files often contain information on very specific elements in the pages (styles which intend to affect many elements will be put in a Common.css or some sort of it). So putting special CSS files in their own directory won't help me correspond them with the current theme (my approach might be wrong in the first place though).

Can you please tell me what would you normally do in this case ?. Themes are really convenient by the fact that they can be automatically applied with a single click and a few lines of code, but how will they be used in conjuction with CSSes ?.

On a second thought, my approach might be wrong altogether with the use of multiple CSS files in my site. Does it mean I should have only one CSS and one skin file for my whole site ?.

Yes, I'd try to keep my css files to a minimum and let the theme provider take care of everything. This approach is simple, but won't work if you need a .css for every page (which I'd try to avoid).

Nice clarification, thank you!.
This' just something not easy to work out for a few first sites :).

Your second images is missing :)

Martin:

That's odd. I see the second image, but I've also seen 404s come in for that resource. Can you tell me what you see? What url is given for the image?

I was looking out for a good article on themes. Googling through many of the sites article I finally found this one at the end of the day. And, I bet, this was the coolest!

Thanks Scott!

This is cool that we are able to take the credit loans moreover, that opens completely new opportunities.