Playing around with ASP.NET Themes

March 13, 2006 • 19 comments

On this page:

I'm playing around with themes tonight in ASP.NET 2.0. I admit it's taken me some time to arrive here primarily because I've used other ways to do my theming before.

Like so many things in ASP.NET 2.0 there's some stuff that's really nice about the implementation and what's there is easy to use and customize, but I have a hard time seeing how I can realistically use them in my apps because the implementation doesn't go quite far enough.

The way Themes work is that they basically let you assign control and CSS theming that applies formatting (ie. non code settings) which is fine. It's actually pretty powerful because you can set control properties and this can potentially cause code to run, so if you place code into a custom control and set a property that code gets run.

Theming actually works very well for this basic scenario that essentially allows you to control the display attributes of a site, so its easy to switch say a color scheme or particular control display formatting mechanism. It does this by injecting code into the page framework that automatically loads stylesheets on every page and applying the Skin settings to any controls that are either defaulting to the theme or have explicit theme/skinids set. A set of new events in the Page framework pick up the theme settings and apply them as part of the Page Lifecycle early on – prior to Init(). Nothing wrong with this and it seems to work really well…

I added theming to a small existing application I'm working on and it literally took only a few minutes to set up a couple of simple themes and have the handful of pages running with the themes. Nice.

Unless I'm missing something, this is pretty much all that it does <g>. Yeah, yeah, so I'm the demanding type, but I expected a little more than that.

So is this realistic? Sure for simple apps it might be nice to change colors images and other display attributes, but it's not what I would consider a themed site necessarily. A themed site can take a different layout with the UI moved around content or different components moved to different parts of the page. It seems odd that there is no support to set up one or more MasterPages that can be part of a Theme for example.

I realize this is not what ASP.NET 2.0 is trying to accomplish (unless I missed this in my reading and experimenting tonight), but doesn't that strike anybody else as a totally common scenario? Color and style theming is nice but really most of that can be accomplished with CSS and what Themes offers beyond that is really not that critical.

It sure would have been nice if Themes would have been designed to act as an overlay ontop of the main application folder. So you'd have a theme directory and you place files into it. When the App runs, ASP.NET could then virtualize the Themes folders with the selected theme ontop of the application directory, so anything in the themes folder would be accessible with the same directory structure as the main app.

So now you could design your app as a main application in the root, then go off create custom themes and copy them into Themes folders and have them overlaid onto your app with the themed folder taking precedence if active.

Of course, I'm only dreaming out loud here. I can see where this would be difficult to implement because once you add master pages or aspx/ascx pages (which is really what would be required to make this work), you'd have code in the Theme folder, which would need to be compiled somehow. If you have overlaid files you'd probably end up with files with the same file and classnames and that's a big problem to solve.

But maybe there was some way to expose special 'template' pages that are runtime loadable in a similar way that the Skin file is loaded and applied at runtime.

That would have been extremely useful and probably not all that difficult to do given that ASP.NET shadow copies files around anyway.

As it stands I don't really see how I can utilize Themes in my apps in a meaningful way…

The Voices of Reason

Hagay
March 14, 2006

# re: Playing around with ASP.NET Themes

One of the best benefits of the skin mechanism for my daily usage is the ability to browse for skin id, the programmer need not mess with remembering class names of css for each button he creates for example , he can just browse the correct skin id in the designer.

made my programmers to produce pages with more consist look.

Pete
March 14, 2006

# re: Playing around with ASP.NET Themes

hmmm ... this is another of one of those "maybe im missing something!" moments but surely if you can play around with different css files you can move everything around using css 2.0 positioning e.g. all elements have their own id and all the position is done through co-ords.

Or am i being stupid? :)

scottgu
March 14, 2006

# re: Playing around with ASP.NET Themes

Themes also support the ability to templatize controls -- which means you can alter the structure of things like DataLists, templated columns, login controls, etc in interesting ways (basically anything that supports a template).

You can also add images to theme directories and have the site base them off of the currently selected theme.

Master pages are what we recomend for changing the structure layout of a site. We kept these separate from themes, since we found that people most commonly wanted to inherit their base UI (via master-pages), but not necessarily change the theme.

Note that both master pages and themes can be set programmaticlaly within the Page_PreInit() event handler. So one mechanism you can use is to add a base-class to your site where you dynically pick the theme + master-page combo to use.

Scott Stansfield shows how to-do this (use themes w/ profile personalization) in this great 14 minute video: http://weblogs.asp.net/scottgu/archive/2006/02/26/439088.aspx

Hope this helps,

Scott

Bertrand Le Roy
March 14, 2006

# re: Playing around with ASP.NET Themes

Yes, I've been using the über-theme thing that Scott mentions in my own sites so I can switch both the theme and the master page at the same time.
The template theming thing is also very powerful. Totally modifying the look of a list by just switching themes is a great thing.

Rick Strahl
March 14, 2006

# re: Playing around with ASP.NET Themes

Pete,

Interesting idea, but it does require you to build pages with absolute positioning.

I personally have never built a site using absolute positioning extensively - while it works it brings with it all sorts of other issues like having to make sure things don't run into each other when content overflows etc.

Kinda curious about your experiences with absolute layout - anybody doing it and if so what issues do you deal with?

Rick Strahl
March 14, 2006

# re: Playing around with ASP.NET Themes

Scott & Bertrand,

I hadn't thought about the template theming and that does have a certain appeal I suppose. I have to experiment with the templating - I presume you'd have different skinids for each template?

Scott, so in response to the Master Page combination, it seems if you really wanted to match the template the master page layout you'd have to set up a parallel folder for the master pages that match the themes. So the Master Page would get loaded out of a template folder depending on which theme is active.

I guess that would work, but it sure would have been nice if this could have been baked right into the framework.

I also wonder if this will actually work (I'll check this out later). If I create multiple copies of a Master Page, how do I name the page so that the compiler won't complain? It seems to me you'd have to come up with a class naming scheme (MyMaster_Theme.master, MyAdmin_Theme.master etc.).

Hmmm... have to give this some thought.

Pete
March 14, 2006

# re: Playing around with ASP.NET Themes

nested div's are the answer to your prayers Rick! :)

effective example ...

HTML:

<head>
<style>
#page
{
left:0px;
top:0px;
position:absolute;
}
#contentblock
{
left:0px;
top:100px;
position:relative;
}
</style>
</head>
<body>
<div id="page">
<div id="contentblock"></div>
</div>
</body>

Its the position:relative; that does the job ... u can position elements in relation to their parents .. so in this case contentblock would start 100 pixels below page.

As an example from this you could change a 1 column page into 2 columns relatively easily ... or something like that!

Rick Strahl
March 14, 2006

# re: Playing around with ASP.NET Themes

Ok I'l bite...

How do you position something absolutely if it isn't left or top based?

Say you have a typical layout with two outside sidebar panels and a center content panel. How do you get the right side positioned properly using absolute positioning?

Pete
March 15, 2006

# re: Playing around with ASP.NET Themes

thats an easy one rick ... you use right!

so ..

<div id="leftblock"></div>
<div id="contentblock"></div>
<div id="rightblock"></div>

#rightblick
{
right:0px;
}

should do the trick!

Pete.

Douglas Hammon
March 15, 2006

# re: Playing around with ASP.NET Themes

Hi everyone,

http://www.csszengarden.com/ is an excellent site that demonstrates what can be accomplished using CSS, i.e. page layout, colors, images, etc..

Hope this helps.
-Douglas H.

Rick Strahl's Web Log
October 15, 2006

# Themes and Templating Master Pages - Rick Strahl's Web Log

Themes in ASP.NET 2.0 are lacking in that they don't really support code type controls like pages or even more importantly Master Pages. Here is a simple outline that you can use to incorporated templates Master Pages alongside your Themes in a consistent way.

GuestDeveloper
November 27, 2006

# re: Playing around with ASP.NET Themes

Hmm, i dont understand where the problem is;

The theming concept has little small features i miss too. But the basic concept i think is absolutly OK.

For a full "customization/theming" you just have to use more asp.net techniques.

Theming himself for changing the design and the look of the page. --> the themes are really easy to integrate and can be edited by a customer easyli.
This is basicly interesting for applying a "corporate design". (If a control on the default page is on the right side of the page, and the customer wants in on the left, it has nothing to do with CI or CD).

This is a feature which is enabled by masterpaging.

You could use Masterpaging for giving a general look over "logical" blocks of page which should look similiar. So that the customer can change the layout of the page (in the masterpage he can place the control where he wants). The companymasterPage.master is editable an can be customized by the customer (english lacks in specifics/dedicated words :-).
With this page he can do what he wants.

And last but not least, the webparting mechanism which give the user the finaly personal customisazion feeling.

So if you use all of these techniques, you will get more ore less the result you want.

If your wish is that the customer can edit the all html pages whith his dreamweaver,golive,wordpad,VI or what ever (and do what he wants) ASP.NET 2 is generally the wrong thing. (He could do this in ASP.NET in the masterpage.master too).
But this is not my understanding of "easy to do by customer" theming.

You wrote "because once you add master pages or aspx/ascx pages (which is really what would be required to make this work), you'd have code in the Theme folder".
Im programming with the new web-project expansion of vs 2005, dont know where you had this problem, but in my projekt/website this is simply wrong (maybe it was right in the past).

"It seems odd that there is no support to set up one or more MasterPages that can be part of a Theme for example."
I dont unsterstand where the problem is? I can setup different masterpages using different themes.... no problem at all?

Maybe all problems are solved with Web-Projects?

Greets

stormy
January 23, 2007

# re: Playing around with ASP.NET Themes

Overall, the whole MasterPage and Theme system in ASP.NET 2.0 is very very weak and immature compared to how most web sites are built and managed today. I mean, we have been using very simple, centralized style sheet skin systems way back in old ASP to manage large sites and modules inside sites. Its not hard and it doesnt have to be complex. In ASP.NET 1.1 you could use usercontrols creatively combined with a centralized skin or style systems to manage thousands of pages in a very modular system. All a masterpage does is write itself as a child control of the page itself and so is just another user control with a few special extras.

The fact is, like in 1.1, in 2.0 now we see Microsoft still has no clue how to develop web application systems and continues to drop the ball with these over-hyped, "rich client" immature solutions. Already we are having to pay the price for that as we have a half million dollar web project that is porly servied by this simplistic architecture. I wish they had hired some real industry CSS and web dev experts (like we see in the PHP field) or Web Standards people to help them work through some of these issues, and really built a robust style sheet and include system that really gives web people power and control in customizing these solutions. The way they limit you in CSS and MasterPages is sad.

Rick Strahl
January 23, 2007

# re: Playing around with ASP.NET Themes

stormy,

Nothing is stopping you from continuing to use the 1.1 style approach of user controls. And PHP - well, that's just HTML based and there's nothing that you can't do in ASP.NET with that either. Good design doesn't require MasterPages, but MasterPages can make life easier for many scenarios if you use them carefully. Just realize that they are not the end all design implementation.

And also remember that not everybody is a Web design Wiz and you the ASP.NET 2.0 tools can help with getting simple things of the ground easily. If you need more control don't use that aspect it's not required. I think a big big appeal of MasterPages is that you can see the layout in the designer something that's not going to happen with any custom schemes.

I obviously agree to some point though Themes and MasterPages should have been designed to work together much better. The ability of having one or more MasterPages being associated with a specific theme seems pretty logical to me, but that's a pain in the ass to accomplish.

stormy
January 25, 2007

# re: Playing around with ASP.NET Themes

Thanks Rick. Yea, MasterPages is a helpful item, and the HTMLhead control is helpful in connecting a custom style sheet system, but themes is lacking. My other complaint against themes besides the fact its not compatible with allot of variables in style sheet linking, is Theme's encourage Style Property use which is also bad as those are translatd into inline styles in the markup, bloating your XHTML even more. Horrible design and after working now 4 years with ASP.NET Im still shocked at how little the .NET team knows about old fashioned HTML and CSS. I mean, havent the W3C recommendations been around some years now? The first thing I learned was HTML 101...thats not rocket science! C'mon guys, whats up with that? You know OOP languages but you dont know hot HTML or how to type a correct style sheet link tag with all the right attributes?

Lastly, I'm wondering why ASP.NET doesnt encourage alternate web development/delivery techniques? For example, what about the need for an XSLT/XML/CSS web delivery solution that helps develoepr generate XSLT files, helps us build the matching CSS, previews that inthe designer, then allows us to create the raw XML, all three of which are sent to the browser which builds the page. Microsft's own browser has been able to process web site files like this going back to IE 5.0, yet thats not an option when developing sites? That seems to be one future diretion for the Web, yet I dont understand why we dont see that type of architecture in Microsoft tools? I really do like ASP.NET despite all the short-comings but would appreciate Microsoft taking more of a leadership role in web development rather than always chasing the rest of the world or the dragon's tale (ie Google) ...thanks for the input...

DotNetSlackers Latest ASP.NET News
July 04, 2007

# DotNetSlackers: Playing around with ASP.NET Themes

General Web-Directory
July 26, 2008

# General Web-Directory

Press releases have some unique characteristics that can contribute to an increase in search engine positioning for your site. They are similar in many ways to pages that use search engine copywriting techniques. They have a narrow focus, include copy that deals with one specific topic, incorporate the use of key phrases and use keyword- rich headlines. Usually, people either do not like or do not have the time to read poorly written content. Therefore, when you are writing an optimised press release, it is...

easy ways to make money
September 20, 2008

# easy ways to make money

I found your site on faves.com bookmarking site.. I like it ..gave it a fave for you..ill be checking back later

internet radio
October 23, 2008

# internet radio

Branding is not a competitive strategy in this tech game. The only thing competitive in this tech game is technology. And some of these“ Black Web” cats are all into the branding shit and not into the technology. Google, Amazon, Ebay all have a small footprint logo that means little– they succeeded because of the technology services they offer that have true differentiation. So basically, if you running some simple ass content- based crap and honestly believe you can“ brand it” to be competitive, let’ s see...

Rick Strahl's Weblog