# Introducing the MVC Themed Web App Project Template

Quickly theming your ASP.NET MVC application is not easy. I discovered the [Web App Theme rails generator](https://github.com/pilu/web-app-theme) one day whilst searching for web templates. To see it in action [click here](http://pilu.github.com/web-app-theme/). 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](http://www.datatables.net/) for all list views). If you have any question/comments or want to help develop this template drop me a line on [Twitter](http://www.twitter.com/pietervander) or leave a comment.

1.  [Installing the Visual Studio 2010 project Template](#1)
2.  [Using the project template](#2)
3.  [Important files/folders](#3)
4.  [Changing the theme](#4)
5.  [Theme preview](#5)


##### 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](http://visualstudiogallery.msdn.microsoft.com/3f98d8eb-75b8-4913-963a-8d37f4326e88) and click on the **Download** button. This will download a .vsix file. Once it’s downloaded double-click the file and install the template:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193063830/NY7s6HWe0.png align="left")

If it is installed successfully you should see this form:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193081909/MQpQ099o4.png align="left")

###### 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.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193097861/nck080Mkf.png align="left")

In the search field type **MVC Themed App**, after a short time you should see the template in the search results:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193115716/DLQrka_pM.png align="left")

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#.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193141292/KV563TTOB.png align="left")

The default project layout looks like this:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193158901/Y5ukfDWFgZ.png align="left")

##### 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](http://codefirstmembership.codeplex.com/). 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](http://stackoverflow.com/questions/5922075/can-i-add-a-css-class-definition-to-the-html-labelfor-in-mvc3)

**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
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193207524/nakXL27oH.png align="left")

Logon page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193243806/34MgMza6s.png align="left")

Register page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193275605/VARviuVu4.png align="left")

**activo**

Front page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193303028/2pr2WJOxy.png align="left")

Logon page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193322925/6Z__w-Kdz.png align="left")

Register page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193337318/mZfJdPG9i.png align="left")


**djime-cerulean**

Front page

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193375013/fz4iSNeVW.png align="left")

Logon page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193393357/fKZQ87wLJ.png align="left")

Register page
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664193409838/eQBFi6X9m.png align="left")