Adding A New jQuery Theme To MVC3
Today we will add a new jQuery theme to a new MVC3 project. I know I am still new to this, but I felt this one needed its own posting.
The first thing you need to do is obtain a jQuery theme. You don’t have to make a custom one, but if you do the same procedure applies. So head over to jQuery UI ThemeRoller and get yourself a theme. For me, I am going to get Eggplant. At the time of this writing the version I am downloading is 1.8.20. Also to keep things easy I am just pulling down the whole thing.
The file downloaded for me was named jquery-ui-1.8.20.custom.zip. When you extract it you will find three folders and an index.html file. That index.html file is just a demo of the theme you pulled down.
Now create your new empty MVC3 project. Just like in my previous post, Just Starting, MVC3 and jQuery UI, you will want to update your packages. I will update my previous post, but I noticed on my personal machine I had to use “Manage NuGet Packages”. You will want to update everything that says jQuery and the Modernizr, I’ll include a snip of that too.
Next we need to add our files to our project. First and easiest is the CSS for the theme. In one window browse to your project’s Content/themes folder. In another window browse to your extracted theme’s css folder. Inside that css folder you will see a folder, in my case it is named eggplant. I am just going to copy that folder (eggplant) into my project’s themes folder.
That is it for copying the files, now we need to add them to the project. In Visual Studio you will want to click on Show All Files in the Solution Explorer. This will reveal files and folders in the project’s folder that are not included in the project. We want to include the theme we copied over (for me that is eggplant), and the script that did not prompt for an overwrite (for me that was jquery-ui-1.8.20.custom.min.js). Simply right click on them and select Include In Project. When you have that done you can click on Show All Files again to hide the stuff that is not part of the project.
Now the easy part, we will create an empty controller named Home, and from that controller a view named Index. Of course we need to modify our project’s Views/Shared/_Layout.cshtml.
Here is the HTML for our Views/Home/Index.cshtml.
And finally here is what it looks like.