Create a Master Template(layout) in Umbraco CMS part 1

This is the second tutorial of Getting started with Umbraco CMS 7+ series. If you have already installed Umrbaco in your development machine, you may continue in this tutorial. If you haven't installed you may go through Install Umbraco on Localhost and Build Visual Studio Solution article before proceeding.

In this article we are going to integrate a simple blog template to our application. You can download the a free bootstrap template that I'm using for this tutorial in startbootstrap.com. For this tutorial, two templates are going to be referred for blog home and blog post.

Step 01: Extract the downloaded files into a folder

You should be able to see following folders and files as shown below.

Step 02: Let's Create a View for master layout in Umbrao Portal.

Login to you UmbracoCMS back-office as an Administrator. If you have followed my previous article the default url of the back-office would be http://localhost/UmbracoDemoApp/umbraco 
Go to Settings --> Templates --> Create --> Name the template as Master --> Save

Let's move to the Visual Studio to set up the rest of the things in the application. To view the created Master template, click show all files then include the Master.cshtml.

Step 03: Copy HTML code from the template

1. Open the "startbootstrap-blog-home-gh-pages" folder. 
2. Open the "index.html" page in notepad and copy the whole content.
3. Paste the content inside Master.cshtml (Do not overwrite the existing content in the Master template)

If you have correctly copied the content final output of the HTML code should look like this.

There are 4 areas in the template. In future, we will separate those areas into Partial Views. 

1. head
2. body content (dynamic content area)
3. side bar
4. footer 

Search  for Blog Entries Column comment in the html and add  @RenderBody() code snippet just below the comment. This is the area where recent blog posts or the dynamic content going to be rendered in the application.

Let's move vendor and css folder to the Visual studio solution from the downloaded template. Make sure you prefix all src and href properties of style-sheets and Js in the Master template file with "~/".

Note: No need to prefix src and href which have "#" or "".

You are almost done with integrating the template to the demo app. Let's create another Home template under master template.

Step 04: Create a Document Type "Home" 

Go to the Umbrao back-office and navigate to the Content Type node. Create Home and Choose the template as Home as shown below.

Step 05: Create a Home Page 

Navigate to the Content Node and Create home page. Make sure the template is set to Home and click "Save and publish".

That's it. Give a hit to http://localhost/UmbracoDemoApp/ to view the integrated template in UmbracoDemoApp. In the next article will see how to create partial views for the header, footer, and sidebar. Refer Create a Master Template(layout) in Umbraco CMS part 2 for more details.