Themes Basics & Structure

Themes (or templates, we can say both) are composed of various files inside the same folder. To facilitate their exchange, they are often provided as a .zip archive.

This document describes the format of the themes used by Slideas.

General theme format

The theme.json file

This is the central piece of a theme. It describes the theme, it’s layouts and palettes. It has to be a valid JSON file. You can use JSONLint to make sure that your JSON file is valid.

Theme description

"Name": "Stockholm",
"Version": 1.0,
"Author": "Slideas",
"Description": "Minimalistic and clean theme",
"Css": "stockholm-theme.css"

In addition to several metadata, it contains the name of the stylesheet that will be used for the theme.
All keys and values are mandatory.

Palettes

Palets is an array of palettes dictionaries:

{
    "Name": "Green",
    "Css": "green-palet.css",
    "Dark1": "#000000",
    "Light1": "#ffffff",
    "Dark2": "#666666",
    "Light2": "#dddddd",
    "Accent1": "#91BEAA",
    "Accent2": "#B7D968",
    "Accent3": "#B576AD",
    "Accent4": "#E04644",
    "Accent5": "#FDE47F",
    "Accent6": "#7CCCE5"
},
  • All keys and values are mandatory.
  • Name has to be unique in the collection.
  • Css has to match the css stylesheet of the palette.

Layouts

{
    "Name": "HeaderAndColumns",
    "Group": "Basic",
    "Classes": "titleandcolumns default",
    "Dynamic": true,
    "FixedParts": 1,
    "Example": "Layout: HeaderAndColumns\n\n# Title\n+++\n### Column1\n+++\n### Column2\n+++\n### Column3\n\n",
    "DynamicPart": "<div class=\"column txtfit\"  data-slide-fit=\"fit\"> {@{content}@} </div>",
    "Template": "<div class = \"innercontent\"><div class=\"titleframe\"> {@{content}@} </div> <div class=\"grid\">{@{dynamic}@}</div><div class=\"footnotes\">{@{footnotes}@}</div></div><div class=\"slidenumber\">{{FOOTER}}</div>",
    "ThumbnailTemplate": "<div class = \"innercontent\"><div class=\"titleframe\"> <h1>Title</h1 </div> <div class=\"grid\"><div class=\"column txtfit\"  data-slide-fit=\"fit\"> <h2>Column 1</h2> </div><div class=\"column txtfit\"  data-slide-fit=\"fit\"> <h2>Column 2</h2> </div></div></div><div class=\"slidenumber\">1</div>",
},
Key Description
Name string Name of the layout, has to be unique for a given theme.
Group string Reserved for a future usage
Classes string The CSS classes that will be applied on the generated slide
Dynamic boolean indicates if the layout has a variable number of parts (like for instance multiple columns)
FixedParts integer Indicate the number of parts that are not dynamic in the layout. Only used when Dynamic = true.
Example Markdown example of layout usage
DynamicPart The HTML that will be used to generate each variable part of the layout. In this example, this is the code for a column.
Template The HTML code used to generate the slide
ThumbnailTemplate HTML code that will be used to generate an example thumbnail for the layout in the layout selector

DynamicPart and Template contains special variables that will be substituted during slide generation.

Variable Description
{@{content}@} It will be replaced by the Markdown of the slide static part.
{@{dynamic}@} It will be replaced by the Markdown of the slide dynamic part.
{@{footnotes}@} Will be substituted by the footnotes of the slide
{@{FOOTER}@} Will be substituted by the footer
{@{SLIDE_NUMBER}@} Will be substituted by the slide number

The theme.png file

It has to have the following dimensions: 480 × 270 pixels

CSS files

  • A theme contains at least one stylesheet for the theme and a stylesheet for a palette.
  • Even if the theme framework of Slideas is based on LessCss, they have to be compiled before being used.

Fonts

The preferred format for fonts is the WOFF2 font format.