Using Templates - A Brief Tutorial

Reference
Since umbraco itself doesn't generate any XHTML, you need to break your site design into templates and stylesheets to control the appearance of every page. Here are the basics of how templates work and strategies for using them.

Contents

• How umbraco Builds Pages
• Using Templates - A Brief Tutorial

Using Templates - A Brief Tutorial

To illustrate how templates and stylesheets are used in umbraco, here is a brief tutorial using the most basic of ugly website designs :-)

Intro: Tutorial setup

Technically, you can add templates to umbraco without having to have anything else in the site, but for practical purposes, it helps to at least have the Document Types defined. (For info about teams and parallel development with umbraco see  http://v3.umbraco.org/documentation/books/umbraco-basics/umbraco-for-teams)

For the purposes of this tutorial, we will create two basic Document Types, as illustrated below.

To create a Document Type, go to Settings and right-click on Document Types and choose Create from the menu. Type in a name and for convenience, check the box next to "Create matching template". Finally, click the Create button. You can then add tabs and properties for the new Document Type. (Read more about Document Types)

These two screens show the properties for our sample Document Types "Section" and "Texpage"

1. Create a Main Template

When you create a Template in umbraco, you give it a name and then have the opportunity to choose a "parent" template from a drop-down list of the other templates in the site, and then paste or type your code into a large box.

The concept of nested templates is very powerful. You can easily maintain a cosistent design across your entire website, and within individual sections, only varying for individual Document Types or Content Nodes. For this example, I will create a "Main" template which encompasses design elements which should appear on every page of the site, and then a template for the "child" template for Textpage nodes.

To create the "Main" template, go to Settings and right-click on Templates and choose Create from the menu.

Type in a name and click the Create button.

Now you can add the actual code for the template. Here I've pasted in the basic HTML code for this sample, and updated the "Alias" field:

(zoom of properties)

<more coming soon>

2. Add umbraco Content data fields

3. Add Recursive Content data fields

Create Textpage Template