ASP.NET Themes On A Sunday Afternoon

Monday, August 8, 2005

I was looking forward to softball this weekend. I had a feeling the coach would move me from 3rd base to the shortstop position because our regular guy was out this week, and I was right.

In the 3rd inning I fielded a well hit double play ball. I turned to throw to second when *BAM*. It felt like someone hit me in the back of a leg with a steel pipe. My teammates said I just collapsed.

I remember laying in the dirt thinking “so, this is what it feels like to rupture an Achilles tendon”.

Fortunately, the X-Rays came back negative this morning.

The doctor told me to rest with my feet elevated and a computer in my lap. Ok, he didn’t mention the computer part, but that’s how I had planned to spend my Sunday in any case, though I hadn’t planned on ice packs and Ibuprofen.

To make a long story short, I finished “Themes In ASP.NET 2.0” today. I hope you enjoy the article.


Comments
optionsScalper Monday, August 8, 2005
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?
scott Monday, August 8, 2005
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. :(
Dan Kahler Monday, August 8, 2005
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.
Michelle Thursday, September 1, 2005
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!
scott Friday, September 2, 2005
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,
Michelle Friday, September 2, 2005
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!
Wesley Monday, September 12, 2005
Howdie I read your article and the article is very clear. But...whats wrong with css? Why use theming instead?

Cheers,
Wes
scott Monday, September 12, 2005
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.
Amer Tuesday, September 13, 2005
First of all thanks for the nice article but i have alil question over here . does it impact the performance of the page ?
Wesley Tuesday, September 13, 2005
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
scott Tuesday, September 13, 2005
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.
Subgurim Thursday, November 3, 2005
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?
scott Thursday, November 3, 2005
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).
Steve Monday, December 5, 2005
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?
Scott Allen Tuesday, December 6, 2005
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.
John Friday, January 6, 2006
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
scott Friday, January 6, 2006
John: If you are trying to get to the theme provider that actually applies the changes - I've had trouble with this myself.
John Sunday, January 8, 2006
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.
Tatyana Wednesday, January 18, 2006
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.
scott Monday, January 23, 2006
Tatyana: Have you tried setting the StyleSheetTheme in the page? That should help with the designer.
Rick Sunday, February 12, 2006
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?
James Wednesday, February 15, 2006
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...
scott Monday, February 20, 2006
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.
Bob Redd Friday, March 3, 2006
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.
VAnhTu1987 Wednesday, April 19, 2006
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 ?.
scott Thursday, April 20, 2006
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.
VAnhTu1987 Friday, April 21, 2006
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 ?.
VAnhTu1987 Friday, April 21, 2006
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 ?.
Scott Allen Friday, April 21, 2006
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).
VAnhTu1987 Saturday, April 22, 2006
Nice clarification, thank you!.
This' just something not easy to work out for a few first sites :).
Martin Monday, June 19, 2006
Your second images is missing :)
scott Monday, June 19, 2006
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?
Alex Thursday, November 30, 2006
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!
gravatar McintoshSUSANNA34 Monday, September 13, 2010
This is cool that we are able to take the credit loans moreover, that opens completely new opportunities.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!