Contest Template editor
Andrew Busuttil avatar
Written by Andrew Busuttil
Updated over a week ago

Configuring Contest Micro-site Look and Feel

Select the "Design" button from the specific contest you would like to begin styling.

Once design is selected all the components that can be styled will be displayed.

  • My Saved Templates : This tab displays all templates that you have begun to edit for your contest. You must have at least one edited template in order to apply it to your contest.

  • Template Library : This tab contains all the default templates that come with the platform.

  • Contest Widgets : This tab contains all the widgets for the contest

  • Static HTML Pages : This tab contains all the static html pages specific for the contest.

Template Library

The Template Library tab contains all the default templates that come with the platform. In order to setup at least one template for your contest you must select a default template and edit it.
To edit the default templates to your own specific contest design, select the Edit option for one of the templates within the Template Library tab. 

Any change to the template including Template Name or any of the settings will then save the template into the My Saved Templates area.

To preview the contest template that you have enabled select the Preview button in the top right.

Once a template has been edited and placed into the My Saved Templates working area some additional edit options will be displayed.

The options for each template is as follows:

  • EDIT – This takes you to the template configurator,

  • CODE – This will take you to the template code editor for more advanced customisation,

  • COPY – This will allow you to copy a template

  • DEFAULT – This is the default template that will be displayed if multiple templates are active and the clients browser language doesn’t match one you have setup (see setting up multiple language templates).

  • ACTIVE – Allows you to set more than one theme “Active”. This is handy for setting up multiple versions of your contest site to support multiple languages.

The active template will be displayed with the “Active” status under the toggle switch. The “Active” template is the template that is activated for the contest website. Multiple templates can be active at any one time. To activated another template select the “INACTIVE” toggle switch on any of the other template themes.

Whenever multiple templates are active the site will automatically place a site selector in the top right hand corner of the site menu. End users can then select the site they would like to go to. This is typically used to select another language translation for the site.

The “Default” option is used to let the system know which is the default theme to show when a user comes to the contest website. When a user arrives at the contest site the system will also detect the language of the users browser. If multiple templates are active and a theme language setup matches the users browser language setting then this theme will be displayed for that user. 

The “Default” site will always be used by default when a language cannot be matched.

To configure the template using the standard configurator select the “EDIT” button. You can also make advanced customisations to the template by selecting the “CODE” button. This will take you to a HTML editor where you can make advanced changes.

Copying a theme can also be very handy when you have setup a theme and then want to create another version of the same theme. To do this simply select the “COPY” option and the theme will be copied as is.

Contest Template Configurator

The Contest Template Configurator is a simple to use site configuration tools that allows you to create a stunning contest website in minutes without coding or any technical knowledge.

To go to the theme configurator  select the “configure” button to take you to the configurator.

Once in the configurator you will notice the preview of the contest web page on the right hand side and the configuration tabs on the left hand side. Except for the Global Styling take each of the configuration tab represents each of the web pages of the contest web site.

The Language Preferences tab is where you setup your language for the theme. This contains multiple settings which are explained below:

Language – This is the language setting for the theme. This is used to match to the users browser language setting.

Country – This is to set the country setting for the theme. This is handy when multiple themes of the same language are active however multiple dialects of the same language may exist across different countries e.g. Spanish in Mexico vs Spain. In this case if a users browser country is Mexico the language Spanish with country Mexico theme will be used.

Language file – This is used for translating internal language copy for the platform. This includes widget text, system messages, menu’s, etc. Note this file also includes fields that have been setup for the contest. You can replace the standard labels and placeholder text that was setup in the contest “settings” area with the text in this file. In order to upload this file you must download the CSV file by selecting “Click here to download the CSV”. This will download a CSV file for you contest where you can then replace all the text with the language translation of your choice. Note this should be done after you have setup all your fields so these are captured in the file. If you add more fields later, that’s fine, just download the file again (it will still contain your previous translations) and just translate the additional fields you have added.

IMPORTANT: If you make changes to the CSV file make sure you save the file using UTF-8 formatting.

Global Styling

The global styling tab is for styling the header and footer of your contest site as well as global font, buttons and video metric viewing options.
The header and footer remain consistent across your entire website regardless on the page which is displayed.
Under the logo area you can select a logo image to display in the top right hand of the menu. You can also select the padding around your logo to ensure it is displayed correctly in the allowed area.

By default it will point to your home page of your contest.
The fonts and styling area allows you to select the default styling of font types, colours and weights. These can also be overridden in each of the sections if you need something specific in each area.
The buttons area provides the global styling of buttons across your site.
You can also select to show key metrics on your videos across your site. Currently these show views, comments and votes however these will continue to expand over time. Lastly you can also control colours of your header and footer.

By selecting your home page table you are able to configure the look and feel of your home page.

The home page is typically broken up into multiple sections depending on your theme. Each section can be configured and customised.

The hero sections allows the title to either be an image as per the current example of just plain text. as you make changes to the setting the preview screen will display the result in realtime. This is the same for description which is not set here. however if we enter you will see it will appear so you can instantly see the results.
The background section can even contain a video as per the example. You can also include a copyright notice in case you want to use assets that require recognition for the publisher.

In the next section you can include a counter which will count down to the different milestones in your contest. This can be a countdown to when your contest starts, when your contest uploads finish and when voting finishes. again you can change background and text colors.

You can then customise the look and feel and also content of the subsequent sections. Again all changes can be previewed in real time.

Each of the text boxes allow you to format text and override the global settings. This can be done for all text in the text box using the paragraph colour or can be done individually in the text box by using the formatting controls.

Now you can move through the other tabs formatting the subsequent pages easily. As you select each tab the preview panel is updated with the web page for that tab so that you can review as changes are made.

Special options

In the Terms and Conditions tab you can edit the conditions of entry for your contest by selecting the “edit page” button. This will open a separate tab which will display the static page for terms and conditions. You can edit and save this directly. We will discuss static pages in a separate section.

The other special settings to point out are in the “View Entry page tab”. With each entrant you are able to turn off and on social sharing networks that can be used.

By selecting each option the social sharing option will automatically appear at the bottom of the entry.

Also under the Comments section you can edit whether Comments are switch on or off. This button again opens another tab in your browser which will take you to the contest settings page where you can select the contest, go to the contest settings area and either turn on or off commenting. 

After you have finished editing your contest template, save it and then go back to the My Saved Templates tab.

Then select the Preview button.

Did this answer your question?