Quickly theming your ASP.NET MVC application is not easy. I discovered the Web App Theme rails generator one day whilst searching for web templates. To see it in action click here. Now, I really like Rails and I think ASP.NET MVC strives to become as good as RoR. So with that in mind, I ported the Web App Theme generator to ASP.NET MVC.
I’ve created a Visual Studio 2010 project template that will add all the themed goodness to your ASP.NET Web application as well as a few other personal touches(jQuery Datatables for all list views). If you have any question/comments or want to help develop this template drop me a line on Twitter or leave a comment.
- Installing the Visual Studio 2010 project Template
- Using the project template
- Important files/folders
- Changing the theme
- Theme preview
1. Installing the Visual Studio 2010 project Template
To install the template you have 2 choices:
- Download from Visual Studio Gallery or;
- Install via the Visual Studio 2010 Extension Manager
Download from Visual Studio Gallery
To download it from the Visual Studio Gallery, visit the template page and click on the Download button. This will download a .vsix file. Once it’s downloaded double-click the file and install the template:
If it is installed successfully you should see this form:
Install via the Visual Studio 2010 Extension Manager
Probably the quickest way to get your hands on the project template. In Visual Studio 2010, select Extension Manager… from the Tools menu.
In the search field type MVC Themed App, after a short time you should see the template in the search results:
Click on Download. When prompted click Install.
2. Using the project template
With the template installed, start a new project in Visual Studio and select MVC Themed App. You’ll find it under Visual C#.
The default project layout looks like this:
3. Important files/folders
The CodeTemplates folder contains T4 template for adding a new controller and View(Create, Edit and List is already themed). The Membership folder contains all the files needed for the CodeFirst Membership Provider. You’ll notice the Models folder contains User.cs and Role.cs, this is used by the Membership Provider.
The Context folder contains the EF database context class and Initializer. The initializer will automatically create a new user called Demo with a password 123456 as well as a new Admin role. We set the initializer in the Application_Start method in Global.asax.cs .
Content\Themes contain all the css for the different themes. I wanted to use a different folder structure(public\stylesheets, etc.) à la Rails but the VS templates only allow specific folder lengths.
The App_Code folder contains a collection of helpers to make refering to script and css files easier as well as an extension for the label helper that allows specifying htmlattributes on a label. Read more about it here
Views\Shared contains the _Layout file. It’s split into 4 partial views:
- _UserNavigation
- _MainNavigation
- _SideBar
- _Footer
This will hopefully make it easier to customize
Web.config – Make sure you change the connectionString value. Currently it assumes you have SQL server on your local machine and admin right to the local server. By default it will create a MVCThemedApp database with the necessary code-first Membership provider tables.
4. Changing the theme
Changing the theme is as easy as opening the _Layout.cshtml file in the Views folder and changing this line:
@Assets.Theme("default")
You can use any of the folder names under themes for the parameter value, but for completeness sake here is a list of theme names:
- activo
- amro
- bec
- bec-green
- blue
- default
- djime-cerulean
- drastic dark
- kathleene
- olive
- orange
- red
- reidb-greenish
- warehouse
The login/register pages are also themed.
5. Theme preview
default
Front page
Logon page
Register page
activo
Front page
Logon page
Register page
djime-cerulean
Front page
Logon page
Register page
