Templates

    Templating in Umbraco builds on the concept of Razor Views from ASP.NET MVC - if you already know this, then you are ready to create your first template - if not, this is a quick and handy guide.

    Creating your first template

    By default all document types should have a template attached - but in case you need an alternative template or a new one, you can create one:

    Open the settings section inside the Umbraco backoffice and right-click the templates folder. then choose create. Enter a template name and click the create button. You will now see the default template markup in the backoffice template editor.

    Created template

    Allowing a template on a document type

    To use a template on a document, you must first allow it on the content's type. Open the document type you want to use the template and check the template under "allowed templates".

    Allowing template

    Inheriting a master template

    A template can inherit content from a master template by using the ASP.NET views Layout feature. Lets say we have a template called masterview, containing the following html:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        @RenderBody()
    </body>
</html>

    We then create a new template called textpage and in the template editor, under the properties tab, sets its master template to the template called masterview:

    Inherit template

    This changes the Layoutvalue in the template markup, so textpage looks like this:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "MasterView.cshtml";
}
<p>My content</p>

    When a page using the textpage template renders, the final html will be merged together replacing the @renderBody() placeholder and produce the following:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        <p>My content</p>
    </body>
</html>

    Template Sections

    What's good to know, is that you are not limited to a single section. Template sections allow child templates that inherit the master layout template to insert HTML code up into the main layout template. For example a child template inserting code into the <head> tag of the master template.

    You can do this by using named sections. Add named sections to your master template with the following code:

    @RenderSection("SectionName")

    For instance, if you want to be able to add HTML to your <head> tags write:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<html>
    <head>
        <title>Title</title>
        @RenderSection("Head")
    </head>

    <body>
    </body>
</html>

    By default, when defining a section it is required. To make the section optional add required:false.

    @RenderSection("Head", required: false)

    On your child page template call @section Head {} and then type your markup that will be pushed into the Master Template:

    @section Head {
    <style>
        body {
            background: #ff0000;
        }
    </style>
}

    Injecting partial template

    Another way to reuse html is to use partials - which are small reusable views which can be injected into another view.

    Like templates, create a partial, by clicking "partial views" and selecting create - you can then optionally use a pre-made template.

    Create partial

    the created partial can now be injected into any template by using the @Html.Partial() method like so:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "MasterView.cshtml";
}

<h1>My new page</h1>
@Html.Partial("a-new-view")

    Find More information

    Tutorials

    Umbraco.TV