Designing a Template with a Theme - Documentation topics on: layouts,template designer,templates,themes,.

Designing a Template with a Theme

dotCMS provides a WYSIWYG Template Designer to create dotCMS templates without any HTML knowledge.  These templates rely on themes installed in your dotCMS instance.

To design a new Template first mouse over the Site Browser tab and select the Templates.  

 

Then click the "Add Template --> Template Designer" button in the upper right hand corner of the template listing page.

In Design Template window select the template properties on the left column, and view a visual layout of the template on the right column.

First select the Template Theme from the drop down, here we list all the design templates available under each host based on the user's permissions.

You can also add a Sidebar to your template by selecting from the next drop down, for a 20%, 30% or 40% on the right or left. 

The two checkboxes: Header and Footer allows to define whether to display these two sections or not. 

Under Body Rows you can add multiple rows between the Header and Footer by clicking on "Add Row" and selecting how many columns to add. These body rows are preset and can't be modified. There is no limit in the number of rows that can be added to a Template.

Now add a Template Title on the right column and make sure all the layout sections have been defined as needed.

On each layout section click on the link: "Add Container" to start adding existing containers to your template. Click here for more information on how to create containers. Note:  You can only add containers that do not contain the main HTML tags.

Containers can be removed from the template by clicking on: "Remove Container". This doesn't delete the selected container, it only removes it from the current template. 

You can always review your changes by clicking on the tab: Preview. In this tab you will be able to preview the template in different mobile devices as well.

When you're done designing your template click on the appropriate action to Save or Publish your template. Once saved, the designed templates will show up on the Template listing page with a different icon, to differentiate them from advanced templates.