Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Templates

Marvin Frederickson edited this page · 3 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

Selectors for the Screen

The outermost container for a screen is div.screen. It includes, another div.screen which is styled with width:100%, height:100%; position: relative;.

Next is the div.template which is also styled at 100% by 100% and includes the background image of the template. The template div contains a div.position for each position defined in the template. These are styled with absolute positioning and any overflow is hidden.

Within each position div is the div.field for the field that the position contains. These are styled at 100% by 100%. The content of the fields vary over time as the content is displayed or refreshed.

Each content item is contained within a div with a class name of the type (or kind) of content being rendered: ticker, htmltext, clienttime, graphic. The style defined for each field in the template descriptor is applied to these divs.

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 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 (a zip file containing one image for the background, and an xml descriptor file) or by specifying an image file and a descriptor file.

Something went wrong with that request. Please try again.