Themes and ASP.NET MVC

I wanted to easily add theme support to yonkly, so that others can install it and modify its look and feel as they please.  I also wanted it to be as easy as installing a theme in wordpress.

I created a themes folder under the content folder

image

Then I referenced my css file in the master page using a helper method

<%= ThemeHelper.GetCss() %>

I also use a helper method for images

<img src='<%=ThemeHelper.GetImageUrl("reply.png")%>’ alt="reply" class="icon" />

But most of my images are set in the stylesheet, which makes it easier to manipulate different skins

The helper methods above look at the defined theme in the config file (or database or wherever you store your settings) and then return the path to the correct resource.

Take a look at these live samples:

They are all using the same codebase but have a different theme defined.  The trick is in making your HTML css-friendly by naming elements and assigning them classes as well as using Divs and avoiding tables.  This allows you to create a stylesheet that radically changes the look of the site.  Think of the element ids and classes as an API to your view, that the css can manipulate.

I also added a feature that lets you upload a folder theme as a zip file and have the application unzip it into the themes folder.

image

It would be cool if we can define a "virtual folder" in our application, so I wouldn’t have to use helper methods.  Imagine if you could just say /content/theme/logo.gif and it would just work.  The theme folder doesn’t really exist but instead it would route to the correct folder based on a setting.  I wonder if I can do that with current routing mechanism in asp.net mvc!!!  Anyone?

Advertisements

0 thoughts on “Themes and ASP.NET MVC

  1. is there a way to make the script that people can upload there own images and if they dont have images the can activate gravatar to be used

    Like

  2. dbonchabo: Actually, I checked with virginia tech and it turns out that it's a trademark violation to use their logo and hokie bird, so I am taking it down. Plus it would make my designer very angry, if I start giving away his work for free šŸ™‚ But stay tuned, we will be releasing more information about how to customize your own themes.Yes, you can change the code to upload images or do whatever you want it to do. We are currently working on a hosted version that will let you customize all theses aspects, you can signup for a private beta at http://www.yonkly.com

    Like

  3. Hi, What are you doing in <%= ThemeHelper.GetCss() %> ???I tried it, but i didn't find ThemeHelper in Asp.Net MVC 1.0please explain how did you create <%=ThemeHelper.GetCss() %> and what are you doing in <%=ThemeHelper.GetCss() %> Kind Regards,Saurabh

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s