Templates introduction - campsych/concerto-platform GitHub Wiki

This documentation is OUTDATED. It applies to Concerto releases up to v5.0.beta.7.

In Concerto v5 we've separated the styling from the HTML elements. What does this mean?

Basically, the nodes that come with Concerto produce the HTML elements that are on the page. This includes things like "put a paragraph", "put a table", or "put a HTML form button." The template then defines how the element is styled, i.e. "make all the paragraphs font size 12," "make the table headings have a green background," or "make the form buttons bigger."

So each node produces HTML with classes, like this:

<form type='submit' value='next' class='questionnaireButton' />

Then if you go to the templates tab, edit the 'default_template', and switch to viewing the HTML code, you'll see that there is a lot of CSS code that determines how each element will appear. Code like:

.questionnaireButton {
font-size: 12;
background-color: red;
}

So if you want to change which elements are displayed on the page, you'll need to edit a node. If you want to change what the elements on the page look like, you'll need to edit a template.

The best way to change how a page looks is:

  1. Go to the Templates tab, click to edit the default template, and Copy the default template into a new one (e.g. "My new template")
  2. Switch to code mode, and change the CSS that you want to change
  3. On the Tests tab, edit your test, and change the 'create_template_definition' node so that it's using your new template.

Why is it good practice to separate styling from HTML elements?

By splitting the two apart, it means that if you want to apply a template style to multiple different nodes or multiple tests, it's easy to do and you know that each of them will be displayed in the same style. Additionally, if one person creates a beautiful template style sheet, then they can share it with other Concerto users and it will work on their test immediately.

It also ensures that all the styling is in the same place, so if you want to change how something looks you know where to go to do that.