<

Add Theme to ASP.NET MVC

Published on
4,004 Points
304 Views
2 Endorsements
Last Modified:
Shaun Vermaak
My name is Shaun Vermaak and I have always been fascinated with technology and how we use it to enhance our lives and business.

Technology
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project

1) Get a Theme
a) The first step is to have an HTML theme ready to be applied to an ASP.NET MVC project. If you do not have a theme, I recommend that you look at http://wrapbootstrap.com/. WrapBootstrap have loads of affordable themes to choose from.

1.JPGFor this article, I will be using the Unify theme

2.JPGb) These themes are downloaded as a ZIP file, extract it to a convenient

6.jpgMost themes have multiple different pages, browse theme from the Index.html page and find one to use

7.jpgc) Open the page in a text editor and copy content to clipboard

8.jpg2) Create ASP.NET MVC project
a) Open Visual Studio. From the "New Project" windows, select "Web" then "ASP.NET Web Application" and click "OK"

3.JPGb) In the "New ASP.NET Project" windows, select MVC and click "OK"

4.JPGc) Open the "_Layout.cshtml" file from the "Views", "Shared" folder in the "Solution Explorer"

5.JPG3) Integrate Theme
a) Paste the content from the HTML theme page below the last line of the "_Layout.cshtml" file

9.jpgb) Most themes have a folder that contains all the resources used by the HTML page. In the case of the Unity theme, the folder is called "assets". Copy this folder.

10.jpgc) From within Visual Studio, past the "assets" folder to the "Content" folder

11.jpgd) Notice that the "asset" folder references in the "_Layout.cshtml" page incorrectly points to "assets/plugins/..." for example

12.jpge) Press "CTRL+H" to open the replace toolbar. In this example, the resources that start with "assets/" should be changed to start with "~/Content/assets/"

13.jpg4) Rendering links
a) The "_Layout.cshtml" file contains a series of rendering links. These are entries that start with @ for example "@ViewBag.Title - My ASP.NET Application". These links have to be moved to the correct location in the copied text from the theme HTML. Below shows where to copy the "@ViewBag.Title - My ASP.NET Application" value.

14.jpgb) HTML themes have a content section, copy the "@RenderBody()" value to this part in HTML text, replacing all demo content

15.jpgc) Below shows where to copy the '@Styles.Render("~/Content/css")' and '@Scripts.Render("~/bundles/modernizr")' values

16.jpgd) Below shows where to copy the '@Styles.Render("~/bundles/jquery")' and '@Scripts.Render("~/bundles/bootstrap")' values, directly above the "</body>" tag

17.jpge) Find an appropriate location for the login partial view. In the example below the '@Html.Partial("_LoginPartial")' value is added to the top bar, overwriting all existing values

18.jpgf) Copy the ActionLinks from the "_Layout.cshtml" file into the navigation section of the HTML theme.
Note that themes use different navigations but you will have a few example menu items to work from

19.jpgg) The final step is to delete the original text from the "_Layout.cshtml" file. The project should be ready to run

5) The Result
Even though other changes are required to get this page to the ideal state, this should at least provide a good starting point for your projects.

20.jpgPlease do not forget to press the "Thumb's Up" button if this article was helpful and valuable for EE members.
It also provides me with positive feedback. Thank you!

 
2
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
0 Comments

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Join & Write a Comment

In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month