Designing a Template with a Theme

Last Updated: Feb 3, 2023
documentation for the dotCMS Content Management System

 

dotCMS provides a graphical Template Designer to create dotCMS templates without the need to write HTML. Templates rely on themes installed in your dotCMS instance.

The Templates tool can be found under the Site tool group — the same one that contains the Site Browser). Browse to Site → Templates.

Templates highlighted in the Site tool group.

Creation

To create a new Template, click the + button in the upper-right corner of the page.

The plus button in the upper right corner.

This will open a window prompting the choice between the Template Designer and Advanced templating, which requires the use of HTML or VTL. Select the Template Designer.

The modal dialog offering a choice between template paradigms: designer or advanced.

You'll be prompted to name your new Template, and to select a theme.

The plus button in the upper right corner.

Designing

The Main Grid

The Template Designer displays a grid of 12 column divisions. By clicking the + button, again in the upper right corner, you can add columns. Once added, columns can be resized horizontally — to a minimum of 1 division and a maximum of 12 — or dragged to a different position on the grid, including to a new row beneath the existing rows. There is no limit in the number of rows that can be added to a Template.

The Template Designer at a glance.

Rows may be assigned custom CSS classes by clicking the ... button to the right of each:

Add Class to Row button.

A column can be removed by clicking the x in its corner:

The x button deletes a column.

To become capable of displaying content, each column must have at least one Container. Click Add a Container to select one from a searchable dropdown.

Note: You can only add containers that do not contain the main HTML tags.

Adding a Container to a column.

Containers can be removed from the template by clicking the trashcan icon beside their name. This doesn't delete the selected Container; it only removes it from the current Template.

Deleting a Container from a column.

Perimeter Structures

Between the buttons to add columns and change the selected theme, you'll note a Layout button. This can be used to toggle on or off key perimeter structures: a header, footer, or a left or right side column.

The Layout button lets you add or remove a header, footer, or side columns.

Side columns have their own width, independent of the 12 body-column divisions — a selector on a toggled side column allows you to select Small (1/6 of the screen), Medium (1/4), or Large (1/3).

View of side-column size selector button.

Saving and Publishing

When working with the Template Designer, draft changes are auto-saved. When you're satisfied with your changes, simply click the Publish button for the changes to take effect.

On this page