Hello, I have a ASP.Net 2.0 site and want to translate it into MVC paradigm (I'm new to this), but starting from Zero.
I have some themes in my old site, but reading here and there, it seems like Themes doesn't fit well into MVC paradigm.
The question is:
What is the best practice in MVC for building a Themed user customizable site? Can you give a little example, if applicable?
Note: I'm aware of this but they don't talk about best practices or how to start with.
A clean, semantically correct HTML with a good CSS is the way to theme any web app, whether it's ASP.NET, RoR, PHP, etc.
The best example of the power of CSS is CSS Zen Garden.
w3schools has a nice introduction/tutorial to CSS.
Each of your users could have an associated stylesheet which would get selected whenever applicable, i.e.:
<link rel="stylesheet" type="text/css" href="<%= Model.SelectedStyleSheet %>"/>
jQuery-ui themes are nice, and not too hard to implement.
Just link to the js and css file and don't forget the icons. And make sure to use Url.Content() in those links. Otherwise it might not be linked to the correct path, once you deploy it on a production server (i fell into that trap once).
As themes were intended to style up tags you can use CSS to create a similar approach. I would probably recommend that you start with copying your default themes over to css definitions e.g.
html: <input type="button" />
css: input { color : light-blue }
Then for anything that had your non-default theme you can just apply classes to them. It takes a while to re-write all your themes as CSS, but once done it's worth the effort.
Here's my code that I've been using for implementing "Themes" in ASP.NET MVC:
ASP.NET MVC: Implement Theme Folders using a Custom ViewEngine
It's nice when you're able to just swap out CSS files to change the theme, but this really isn't very practical in a ton of cases. Especially when each theme needs to have a completely different layout. In which case, you need to change the CSS and HTML that gets rendered, and this is why I wrote the code found at the above link.