How To Create A Master Layout In Umbraco

[av_textblock size='' font_color='' color=''] In this article, I'll walk you through the process of creating an MVC layout within Umbraco.  First, open the Umbraco backend umbraco_create_first_page_1 In the 'Settings' section in the left-hand main menu, right click on the 'Document Types' folder to open the 'Create' dialog.  First, we'll create a new folder to keep Umbraco organized. umbraco_create_first_page_2 Add a new name, I'm calling mine Master, but, you could use names like 'Global', or, 'Shared' instead. umbraco_create_first_page_3 After creating the folder, we need to create a 'Master' template.  This is going to be the thing that all out templates inherit from. umbraco_create_first_page_4 Add a title to your document type, a template name and click 'Save' for now. umbraco_create_first_page_5 Clicking save will not only save your master document-type, it will also create a template for you within the templates folder.  In case you are still unsure about what a template is, it's the thing that defines the HTML.  Templates relate to MVC views.  Instead of writing some custom HTML, for this guide, for laziness and speed, I'm going to copy the basic template HTML from the bootstrap site, which is available from this page, within the basic template section, here and the CDN links here. umbraco_create_first_page_6 For your reference, I'll add the code here as you'll also need to included a RenderBody(); call.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
     	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.3%2Fhtml5shiv.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    <![endif]-->
  </head>
  <body>


<h1>Hello, world!</h1>


@RenderBody();

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
  </body>
</html>
With the HTML in my template now looks like the above.  We have now created our master layout within Umbraco.  Next, we need to create a new template for our homepage. umbraco_create_first_page_7 Within the Umbraco 'Document Types' folder, right-click on the 'Master' type you created above and select 'Create'.  Create a new document type and call it 'Homepage'. umbraco_create_first_page_8 Make sure that 'Allow As Root' is checked on your homepage document type, so you can a homepage template underneath your root site code node in the main content tree. umbraco_create_first_page_9 Now, if you look in the 'Templates' area, you can see a corresponding 'Homepage' template.  If you click on the item you should see a template view that shows the HTML.  Notice that the Layout property is set to null.  We will now change this to use the 'Master' layout we created above. umbraco_create_first_page_10 In the 'Properties' tab, see the 'Master template' selector to 'Master' or the name you called your master document type and click the 'Save' button. umbraco_create_first_page_11 When you refresh the page, you should now be able to see that the Layout property has been set to the Master template! umbraco_create_first_page_12 If you now go into the 'Content' section on the left-hand side menu, if you right-click on the 'Content' menu item you should now be able to create your homepage.  If you create a new homepage and set it as the home (see, How To Set The Start Page In Umbraco 7 ) umbraco_create_first_page_13 When you view your website, you'll see that your page is now using your layout! [/av_textblock] [av_one_half first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display=''] [av_textblock size='' font_color='' color=''] LESSON 1 How To Architect Your First Umbraco Page [/av_textblock] [/av_one_half][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display=''] [av_textblock size='' font_color='' color=''] LESSON 3 Creating A Header and Footer Using Partial Views In Umbraco [/av_textblock] [/av_one_half]

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top