Skip to content

Templates

Marvin Frederickson edited this page Dec 12, 2015 · 4 revisions

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. 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.

CSS

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.

Fonts

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;
 }

Template Descriptor File XML

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>

Format

name

Name of the template. Text.

width

Width of the template in pixels. Integer.

height

Height of the template in pixels. Integer.

author

Author of the template. Text.

hidden

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

field

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

name

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

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

style

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

left, top, width, height

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.

Something went wrong with that request. Please try again.