Custom templates

*Customising the templates requires some knowledge about HTML and CSS styling. Some knowledge about how vue.js templates work, might be useful too, but you should be able to derive the necessary information from the examples in the default templates.

Find the list of templates

A custom template allows you to change the presentation of your event information according to your needs. You can either start from one of the default templates that are provided in the application and apply changes, or start from scratch in order to create a fully new lay-out.

Add a new set of templates

To check your list of display templates, navigate from the home page to your User Account page. On the left-hand menu you’ll find the Display templates page.

By default, the list contains the templates that are provided out of the box. You can open and consult these pages to check the template code.

Add your own templates

To create a new set of templates, click the add button from the list.

Give your new template set a name for you to make sense and select a parent set.
The parent set will provide a basis for your new set, so you don’t need to override all types of pages in order for your template set to work. In fact you don’t need to override any page type at all.
From the get go, your new set of templates is identical to the parent set that you selected.

Customise the template styles (CSS)

When you first create a new set of template, you’ll see only the CSS section added. If you only want to change some small details about the appearance of the information, without structural changes, adding some css rules might be all you need.

The css you add here will apply to all page types, also if you don’t override the template for that type.

Add page types

If you want to make more structural changes to the page layout, you need to add the page types that you want to override. To add a type, click the ‘add layout’ button and select the page type that you want to change.

These are the types that are available:

• default: this is the idle page as well as the page type used for showing logo’s.
• ranking: the template for rankings
• score: the template used for exercise announcement and results.
• participant presentation: template used to present participants (as triggered from the display control page)
• announcement: template for making announcements (apart from participants)
• block: template for presenting block starting orders.
• medal winner: template for presenting a single medal winner.
• medal winners: template for presenting all medal winners of a ranking.
• flags: template for presenting the flags of the medal winners.