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">

http://scripts/libs/modernizr-2.0.6.min.js

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s