Templates are a way of skinning your screens. Templates are packaged into zip files and must include a background image and an XML descriptor file. Templates may also include a CSS stylesheet. When you edit a template, there are two buttons under "New Background Image and/or Custom CSS". You use one button to upload the css file and one for the image file-- doesn't matter which one. The names of the files within the package are not important-- it's the file extension that is used to identify which file is which.

The frontend screen is rendered with some custom elements. The hierarchy is as follows.

body
 concerto-screen
   div.template
     div.position
       concerto-field
         concerto-graphic|concerto-ticker|concerto-htmltext|concerto-client-time

• The div.template element also includes a style attribute that specifies the background image.
• The div.position element is repeated for each position in the template and includes a style attribute that specifies the location (top, left, width, and height) of the position.
• The concerto-field element contains one of the specific concerto content custom elements.
• The concerto-graphic element contains an img#graphic.
• The concerto-ticker element contains a div.ticker.
• The concerto-htmltext element contains a div.htmltext.
• The concerto-client-time element contains a div.clientTime.

And you can, of course, view the page source of a screen to see exactly how your template renders and figure out what selectors you would need to customize it with CSS.

You may include fonts (such as google fonts) in your CSS file using the import rule, like so. You should not specify the protocol in the url. These import statements should occur before any styling directive.

@import url(//fonts.googleapis.com/css?family=Exo+2);

.ticker {
  text-align: center;
  width: 100%;
  color:#FFF; 
  font-family: 'Exo 2', sans-serif;
 }

Here's a descriptor file for the Sample Template.

<?xml version="1.0"?>
<template>
  <name>Sample Template</name>
  <width>1920</width>
  <height>1080</height>
  <author>Testing Author</author>
  <field>
    <name>Graphics</name>
    <type>Graphics</type>
    <style>border:solid 2px #ccc;</style>
    <left>0.025</left>
    <top>0.026</top>
    <width>0.567</width>
    <height>0.77</height>
  </field>
  <field>
    <name>Ticker</name>
    <type>Ticker</type>
    <style>border:solid 2px #ccc;</style>
    <left>0.025</left>
    <top>0.796</top>
    <width>0.567</width>
    <height>0.204</height>
  </field>
</template>

Name of the template. Text.

Width of the template in pixels. Integer.

Height of the template in pixels. Integer.

Author of the template. Text.

If true hides the template from appearing in lists. Boolean. Defaults to false.

Information about a field in the template. Multiple fields can exists, but they are not contained within a <fields> node.

Name of the field. The canned field names are Graphics, Ticker, Text and Time. By using these names, templates can easily be swapped on any given screen. Text.

Type or kind of content to display for this field. Possible values at this time are Graphics, Ticker, Text, and Dynamic. Text.

Style to be applied to the field's content when rendered within the template. All !important specifiers are stripped out. Text (CSS).

Positioning for the field with the top left being 0, 0 and the bottom, right being 1, 1. Decimal/Float.

A template may be imported by specifying a package or it can be created from scratch. You can create a new template from scratch by going to Screens, View All Templates and then New Template and then the Create from Scratch tab. Once you create a template from scratch, you'll need to specify the position information for each position in the template.