In this tutorial, you will learn how to create a template ti display your Umbraco pages. Previously, I wrote about 'Document Types' and how to create them in Umbraco, in How To Create A Document Type In Umbraco and create a page with it. We can create containers that content editors can use to create a hierarchy of pages but, as of yet, we have no way of rendering that data on a website. In order to do that, we must create a template.
Like 'Document Types', you can see the installed templates within your Umbraco website in the Settings section, which can be found in the left-hand section panel, under 'Settings' -> Templates.
In here you can create a new template definition by selecting the ellipse next to the templates folder and selecting create.
Create a name when you get presented. After you have created the template, you should see a text editor that will allow you to add in HTML and CSS. In here you can add in any HTML that you want.
The HTML looks like this:
When you create a template, a matching view will be created, in the 'Views' folder within your website's webroot.
The name of the view will correspond to the alias you set in the properties of the template:
Assigning A Template To A Document Type
So, now we have a very basic template defined in Umbraco, the next step is to attach it to a 'Document Type'. Go to the 'Document Type' section, select the document type you want to assign the template to and look in the 'Info' type
The 'Allowed Templates' column. If you have set your template up correctly then you should see your template in here, select it. Underneath it, you also have the 'Default Template' tab. The template that is set here is the one that is automatically associated with a page whenever a content editor creates a new one.
If you go to the content section and create a new page using the document type you assigned the template to, then after you publish the page, when you view the page you should see your new template displayed:
Changing An Existing Pages Template
If you want to change the template on an existing page, go to the 'Content' section in the Section menu and select the page you want to update:
Navigate to the 'Properties' tab and go to the 'Template' section at the bottom. If you have set everything up correctly for your document type, you should see the template you want to select in the 'Template' dropdown. After selecting the one you want to, hit the 'Save and Publish' button. Your template should now be ready to be used.
Things to note
If your view does not get automatically created, you can always go into Visual Studio and create it yourself. You will know if a view doesn't exist, as you'll see an error along the lines of 'No physical template file was found for template umbTextPage' when you try and browse the page
When you create a template in Umbraco, the view that gets created in your webroots View folder will not automatically be attached in your Visual Studio Solution file, so you will manually have to attach it. In Visual Studio, if you are unable to see it, you need to select 'Show All Files' in 'Solution Explorer', go to the Views folder click on the view and possibly hit 'refresh' in the top solution explorer menu, right-click on the view and select 'Include in the project' to include it.
To check if your website is set to run with web forms or MVC, open the umbracoSettings.config file in configs and go to the defaultRenderingEngine setting. You should see something like this:
Switch your preference accordingly. In my installation, I received this error when I tried to modify an existing sample site template, 'Sections must only appear once per config file.' To fix it I had to open a web.config file in the 'Views' folder, find the line that was causing the error and delete it.
In Umbraco, templates are used to display HTML and CSS on the front-end. You can create templates directly within Umbraco, using the setting section. After you create a template you can assign it to any document type you want. A document type can be associated to as many templates as you want, so content editors don't have to be limited to a single view when they create content.