Adding a new Jquery UI theme to the default Asp.Net MVC 3 Project

The default project template for Asp.Net is pretty functional out of the box, but an interesting feature is that new templates install jQuery and jQuery UI out of the box! In fact, jQuery UI now comes pre-installed as a Nuget package if you’ve got the latest MVC3 Tools Update (April 2011). If you’re following this while sitting at a MVC3 project already in development, you can simply install the latest jQuery UI repository release using Nuget from within Visual Studio, and you will get the same thing.

In case you did not know, you can start working with jQuery UI pretty quickly and easily by just including the style sheet and script in your layout page like so (your actual file names may vary slightly):

This will get you working with a basic jQuery UI theme for all the components and controls which come with the framework. However, if you want to update the project with another jQuery theme to better suit your requirements, then you can do it like this.

First of all, find a theme using the jQuery UI theme roller that takes your fancy. For this example, I’ve chosen “Redmond” as it fits in nicely with the default Asp.Net MVC 3 theme, but you can chose any theme or construct your own. When you click download, it will ask you which components you want to download themes for – just leave it at the default, which is *all of them – *and click ‘Download’. After .zip archive has been downloaded, extract it to somewhere temporary, and explore its contents.

You will get a file structure which looks like this:

Everything you need is inside the “css” folder – if you open that now you will see a single folder which is named after the theme you just picked from the jQuery UI site. If you’ve created a custom theme, then it will be named “custom-theme” or something to that effect. You can also give it your own folder name if you change the options under ‘advanced theme options’ when you download the theme.

Right-click and copy this folder. Now, browse to the /content/themes folder of your MVC 3 application and paste the folder there. Now you should have two folders in that location – one called “base” and your new theme folder (see right).

All we need to do now is include this folder in your Visual Studio project. The easiest way to do this is to turn on “Show All Files” by clicking the little button at the top of the Solution Explorer tool window, then right-click on the theme folder (which will appear with a white folder icon) and select “Include in Project”.

Now, all that’s left is to include the theme’s style sheet into your layout, and you are done:

Now your new theme will be automatically applied to any jQuery UI components you are using in your application. Here’s a shot of it working with jQuery UI Buttons:

You can apply the same process to any additional themes you want to install, just line up all your themes in the same folder and include the relevant style sheet on your pages.