Slide level Theme

Slide container

The slide container has the following default user options:

• width , default 900px;
• height , default 700px;
• background , default white;
• border , default 0;
• border-radius , default 0 0 0 0;
• color , default black;
• font ;
• font-size , default 100%;
• font-family , default Open Sans, Arial, sans-serif;
• slide-transition, default horizontal;
• data-scale , default 1;
• data-rotate , default 0;
• data-rotate-x , default 0;
• data-rotate-y , default 0;
• data-rotate-z , default 0;
• data-x , default 0;
• data-y , default 0;
• data-z , default 0.
• data-offset , default 1.

The most part of options are standard CSS options. However some exceptions are present. Before read about them, we discuss how set the slide options.

For all the slide containers the user can set any valid css style options, not only the default ones. To customize the options of slide container the syntax is the following:

---theme_slide_global
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_slide_global

The slide options must be enclosed into the tags ---theme_slide_global and ---endtheme_slide_global otherwise they will not considered. Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning inside the presentation preamble, that is just a convention rather than a physical part of the markdown document.

The slide options of the getting started presentation is made by:

---theme_slide_global
width            = 900px
height           = 700px
border-radius    = 10px
background       = green
color            = rgb(102,102,102)
font-size        = 100%
slide-transition = horizontal
---endtheme_slide_global

Let us now discuss about some of the special options.

The slide-transition option set the transition effect between subsequent slides. Presently, the available values for this options are:

• horizontal: the slides are placed into a horizontal raw from left-to-right direction; this the default setting;
• -horizontal: the slides are placed into a horizontal raw from right-to-left direction;
• vertical: the slides are placed into a vertical column from top-to-bottom direction;
• -vertical: the slides are placed into a vertical column from bottom-to-top direction;
• diagonal: the slides are placed into a diagonal line from top/left-to-bottom/right direction;
• -diagonal: the slides are placed into a diagonal line from bottom/right-to-top/left direction;
• diagonal-x: the slides are placed into a diagonal line from top/right-to-bottom/left direction;
• diagonal-y: the slides are placed into a diagonal line from bottom/left-to-top/right direction;
• absolute: the slides are placed exactly where indicated by data-x, data-y and data-z options.

The absolute transition mode has a practical use just for a local-slide overriding theme that is the subject of a following subsection: if you set slide-transition = absolute in the preamble settings and you do not set the data-x, data-y and data-z values for each slide, all slides will be placed in the same point..., the canvas center!

The data-scale option set the scaling factor of the slides. By default it is set to 1. This option has a practical use just for a local-slide overriding theme that is the subject of a following subsection: changing its value in the preamble settings has no visual effect because all slides will be rendered with the same scaling factor. On the contrary, setting different scale for different slides using local-slide overriding theme will produce a nice zooming effect.

Slide Header container

The header element is designed to render data in a single row above the main content rather than wrap the content into multi-lines.

Header element has the following default user options:

• display , default block;
• width , default 100%;
• height , default 100%, preferably expressed in percent of the slide height;
• padding , default 0;
• font-size , default 100%;
• font-family , default Open Sans, Arial, sans-serif;
• overflow , default hidden.
• metadata , a list of objects to be inserted, e.g. slide-title, presentation-title, presentation-logo,etc...;
• active , default True.

The most part of options are standard CSS options. The special thing is the metadata option that is discussed into the following.

Note that the width is automatically set to 100% and should not be customized from users. To customize the options of header n. N the syntax is the following

---theme_slide_header_N
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_slide_header_N

Each header is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with header 2 instead of header 1. However, the insertion follows the number order, thus header 1, if present, is inserted before header 2.

The header of the getting started presentation is made by

---theme_slide_header_1
height        = 6%
background    = #4788B3
color         = white
border-radius = 10px 10px 0 0
padding       = 1%
metadata      = [['slidetitle','font-variant:small-caps;font-size:180%;padding:2%'],&&
                 ['logo','float:right;height:90%;']]
---endtheme_slide_header_1

Slide Footer container

The footer element is designed to render data in a single row below the main content rather than wrap the content into multi-lines.

Footer element has the following default user options:

• display , default block;
• width , default 100%;
• height , default 100%, preferably expressed in percent of the slide height;
• padding , default 0;
• font-size , default 100%;
• font-family , default Open Sans, Arial, sans-serif;
• overflow , default hidden.
• metadata , a list of objects to be inserted, e.g. slide-title, presentation-title, presentation-logo,etc...;
• active , default True.

The most part of options are standard CSS options. The special thing is the metadata option that is discussed into the following.

Note that the width is automatically set to 100% and should not be customized from users. To customize the options of footer n. N the syntax is the following

---theme_slide_footer_N
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_slide_footer_N

Each footer is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with footer 2 instead of footer 1. However, the insertion follows the number order, thus footer 1, if present, is inserted before footer 2.

The footer of the getting started presentation is made by

---theme_slide_footer_1
height     = 6%
padding    = 1% 2%
background = #86B2CF
color      = white
metadata   = [['timer','controls;font-size:70%;font-variant:small-caps;float:right'],&&
              ['total_slides_number','float:right;padding:0 1%;'],                   &&
              ['|custom| of ','float:right;'],                                       &&
              ['slidenumber','float:right;padding:0 1%;'],                           &&
              ['|custom|slide ','float:right;']]
---endtheme_slide_footer_1

Slide Sidebar container

The sidebar element is designed to render data in a single column aside, left or right, the main content.

Sidebar element has the following default user options:

• display , default block;
• width , default 100%, preferably expressed in percent of the slide height;
• height , default 100%;
• padding , default 0;
• font-size , default 100%;
• font-family , default Open Sans, Arial, sans-serif;
• overflow , default hidden.
• metadata , a list of objects to be inserted, e.g. slide-title, presentation-title, presentation-logo,etc...;
• active , default True.

The most part of options are standard CSS options. The special thing is the metadata option that is discussed into the following.

Note that the height is automatically set to 100% and should not be customized from users. To customize the options of sidebar n. N the syntax is the following

---theme_slide_sidebar_N
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_slide_sidebar_N

Each sidebar is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with sidebar 2 instead of sidebar 1. However, the insertion follows the number order and the left to right order, thus left sidebars are inserted before right one and sidebar 1, if present, is inserted before sidebar 2.

The sidebar of the getting started presentation is made by

---theme_slide_sidebar_1
position      = R
width         = 20%
padding       = 1% 2%
background    = linear-gradient(#4788B3,#86B2CF)
color         = white
border-radius = 0
metadata      = [['title','font-weight:bold;font-variant:small-caps;font-size:105%;display:inline-block'],                                          &&
                 ['authors','font-variant:small-caps;font-size:90%;display:inline-block'],                                                          &&
                 ['affiliations','margin-top:4%;margin-bottom:10%;font-variant:small-caps;font-size:70%;white-space:pre-wrap;display:inline-block'],&&
                 ['toc','font-size:70%;',2]] 
---endtheme_slide_sidebar_1

Slide Content container

The content element is designed to render the main slide contents.

Content element has the following default user options:

• display , default block;
• width , default 100%;
• height , default 100%;
• padding , default 0;
• font-size , default 100%;
• font-family , default Open Sans, Arial, sans-serif;
• overflow , default hidden.

All are are standard CSS options.

Note that the height and width are automatically computed by MaTiSSe.py accordingly to the dimensions of headers, footers and sidebars, thus it has no sense for the user to set them. To customize the options of content the syntax is the following

---theme_slide_content
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_slide_content

The content of the getting started presentation is made by

---theme_slide_content
background    = white
color         = rgb(102,102,102)
padding       = 1%
---endtheme_slide_content

Slide-level Theme, an example

The getting started presentation uses the following theme definitions:

---theme_slide_global
width            = 900px
height           = 700px
border-radius    = 10px
background       = green
color            = rgb(102,102,102)
font-size        = 100%
slide-transition = horizontal
data-offset      = 200
---endtheme_slide_global

---theme_slide_content
background    = white
color         = rgb(102,102,102)
padding       = 1%
---endtheme_slide_content

---theme_slide_header_1
height        = 6%
padding       = 1% 2%
background    = #4788B3
color         = white
border-radius = 10px 10px 0 0
metadata      = [['slidetitle','font-variant:small-caps;font-size:150%;'],&&
                 ['logo','float:right;height:100%;']]
---endtheme_slide_header_1

---theme_slide_footer_1
height     = 6%
padding    = 1% 2%
background = #86B2CF
color      = white
metadata   = [['timer','controls;font-size:70%;font-variant:small-caps;float:right'],&&
              ['total_slides_number','float:right;padding:0 1%;'],                   &&
              ['|custom| of ','float:right;'],                                       &&
              ['slidenumber','float:right;padding:0 1%;'],                           &&
              ['|custom|slide ','float:right;']]
---endtheme_slide_footer_1

---theme_slide_sidebar_1
position      = R
width         = 20%
padding       = 1% 2%
background    = linear-gradient(#4788B3,#86B2CF)
color         = white
border-radius = 0
metadata      = [['title','font-weight:bold;font-variant:small-caps;font-size:105%;display:inline-block'],                                          &&
                 ['authors','font-variant:small-caps;font-size:90%;display:inline-block'],                                                          &&
                 ['affiliations','margin-top:4%;margin-bottom:10%;font-variant:small-caps;font-size:70%;white-space:pre-wrap;display:inline-block'],&&
                 ['toc','font-size:70%;',2]]
---endtheme_slide_sidebar_1

Metadata option

In the previous sections we learn that metadata can be used inside the theme definition. Considering a generic theme element, the syntax is the following:

metadata = [list_of_metadata]

where the list_of_metadata is the list of the metadata used into the theme element. Each metadata can be styled or it can inherit the style from its element container. For example:

metadata = ['slidetile', &&
           ['logo','float:right;']]

defines 2 metadata:

1. 'slidetitle' that ha no special style;
2. ['logo','float:right;'] that has its own special style, i.e. float:right.

Therefore, to define a styled metadata use a list where the second element is the css style.

The toc metadata is a special case. If styled it can accept a third optional value:

metadata = [ ['toc','float:right;','2'] ]

This third optional value, 2, indicates the TOC depth.

Slide-Overriding theme

Changing the Slide Theme on-the-fly

A very nice MaTiSSe.py feature is the possibility to define a theme locally to each slide, the so called slide overtheme, and change the theme on-the-fly. The syntax is the following:

### Slide Title
---slide
any valid slide-level theme
---endslide 

just put the slide themes into a ---slide/---endslide environment after the slide title and the slide will be rendered with its own theme.

For example to change the slide transition and temporarily disable a sidebar you can use:

---slide

---theme_slide_global
slide-transition = diagonal
data-z           = -2000
data-scale       = 2
data-rotate      = 90
data-rotate-y    = 30
---endtheme_slide_global

---theme_slide_sidebar_1
active = False
---endtheme_slide_sidebar_1 

---endslide