Screenshots

This is a couple of sample screenshots showing how to start from scratch with an empty umbraco.

1. Create a Document type for content

This screenshot shows the editing mode for creating new Document types. The active tab is "Generic properties" and here it's possible to add an unlimited number of properties that the document type (ie page type) should contain.

2. Edit content - richtext

Here we're editing a page based on the model above using the build in richtext editor in umbraco.

3. Edit content - the metadata tab

When we added properties to the page above, we also added a couple of metadata fields and added them to a tab we created called "Metadata". As you can see it's easy to categorize the data on a page or object in tabs for a better overview.

4. Upload image to the medialibrary

A picture tells more than a thousand words - so thank god for the medialibrary. Working in the same way as the content model with generic properties, it's posible to create any type of media. Here's an example of a standard image, with an upload field (the meta-data for the picture are automatically inserted by umbraco).

5. Inserting the image in the editor

Back in the richtext editor we can insert the image from the media library just be clicking a button. And by right clicking the image in the editor it's easy to adjust that alignment for the picture. You can even resize the image directly in the editor and umbraco will constrain proportions and create a new image with the new dimensions when you save...

6. Editing the templates

You can have unlimited templates in umbraco - and assign a template to a document type. All you have to do is copy + paste your html and insert some umbracotags where you want to have content or macro (explained below) inserted. You can also assign master templates to a template in a recurrsive manner.

7. Edit macros

Macros let you use your own functionality in your templates or in the richtext editor. They are created by using either XSLT transformations or by using .NET controls - either custom controls or user controls. umbraco can even create User Interface for your Public Properties in your controls! However, in this screenshot we're creating a simple breadcrum using XSLT. We're telling the XSLT what XML it can work with by making two properties; one which is all the content on our website and one which is the current node.

8. Edit content

umbraco has a build in XSLT editor to make it easy and fast getting started with XSLT and without needing FTP access to your server. It can even warn you is you're making syntax errors!