Understanding Umbraco concepts and tutorials

Possibly save 1 hour of your time: After installation of Umbraco, you may now want to implement your own web pages. After you run the app, you can type in /umbraco on the url to go to backoffice (administrator area).

You will need to understand the concept of:

  • Document Type (Structure of content)
  • Template and output Document Type properties
  • Content Node (Content Page)

Other related concepts:

  • CSS and JavaScript
  • Master Page
  • Property Editor

Document Type (Structure of content)

You may need to create a Document Type under Settings. This allows you to define the structure of the content.

create document type.png

You also need to got to Permissions and check Allow as root. This will allow you to select this document type when creating the content node later.

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/document-types

Template and output Document Type properties

The template is automatically generated if you create the document type with template. The template contains Razor code. It creates a .cshtml file under folder Views in the project. The template is basically the view.

create template

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Creating-Your-First-Template-and-Content-Node

If you want to display something here, you will need to code this or use the feature in the backoffice. It does not automatically create the view elements. For example I know in the document type there is an element named MichaelTopContent. Then in the template, I just add the binding using Razor syntax. i.e. @Model.Content.MichaelTopContent

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Outputting-the-Document-Type-Properties

Content Node (Content Page)

You can create your own page under Content section. If you want to create a page under Home using the document type create earlier. You need to add permissions for the new document type under the Home document type. Go to Settings >> Document Types >> Home and then Permissions on the upper corner. Under Allowed child node types >> Add child, then select your document type.

Now you will click on Home and create an item under Home by selecting the new document type.

create content node with custom document type.png

CSS and Javascript

There are two project folders where you can put your css and js files namely css and scripts folder. You then can reference those files in your template. i.e.

<link rel="stylesheet" href="css/style.css">


Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/CSS-And-Javascript

Master Page

This is same concept as in ASP.NET master pages.

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Creating-Master-Template-Part-1

Property Editor

You can create your own custom property editor.

Reference: https://our.umbraco.org/documentation/Tutorials/Creating-a-Property-Editor/

Umbraco Users Guide


Install Umbraco Content Management System (CMS)

Possibly save 1 hour of your time: I am trying to use Umbraco CMS, an open source content management system.

I download and install WebMatrix3.

Then I download the latest package for Umbraco and unzip.

Next I right click on folder and choose open as a website with Microsoft WebMatrix

open with webmatrix.png

Then you click Run in the WebMatrix.


It will bring you to back office (admin area) for Umbraco. You can also install Umbraco Forms by going to the left menu items and click on Forms and then install button. After you install, you still need to buy a license to use it.

back office forms

Umbraco User’s Guide