Presentation level Theme

Canvas container, available options and their setting

Presently, the canvas container has only one default option:

• background, default radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)).

Note that the canvas options are applied to the body html element. As a consequence it can be customized only at the beginning of the presentation for all slides: an eventual slide overriding theme cannot change the canvas options!

To set the canvas options use the following syntax:

---theme_canvas
background = #background_value
---endtheme_canvas

For more details on the css background options see http://www.w3schools.com/css/css_background.asp.

The canvas of the getting started presentation is based is made by:

---theme_canvas
background = radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110))
---endtheme_canvas

You can define other css options, however the background seems to be only with a sense for a canvas container.

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.

For all themes definitions each option values cab be split using the symbol && as line continuation:

---theme_canvas
background = radial-gradient(rgb(240, 240, 240), &&
                             rgb(110, 110, 110))
---endtheme_canvas

Headings and Custom Selector Themes

Besides the main presentation theme, you can set the default theme of headings (h1,h2,...,h6) and you can specify the theme of custom selectors for customizing special elements of the presentation that are not part of the main theme, e.g. the blocks of code.

Notes that both headings and custom selectors can be re-defined by the slide overriding theme.

The headings themes, that are 6, have the following default user options:

• width;
• height;
• background, default inherit;
• border, default 0;
• border-radius, default 0 0 0 0;
• color, default black;
• font, default inherit;
• font-size, default [120%,140%,160%,180%,200%,220%] for [h6,h5,h4,h3,h2,h1];
• font-family, default Open Sans, Arial, sans-serif;
• margin, default 0;
• padding, default 0;
• text-decoration, default inherit;
• border-bottom, default inherit.

The options are all standard CSS ones.

The headings H1, H2 and H3 are not available for standard use being MaTiSSe.py protected keywords; as a matter of facts, MaTiSSe.py uses these three headings for the definition of sections, subsections and slides respectively. To effectively use the first 3 headings you must use html syntax rather than markdown one.

To customize the options of heading n. N the syntax is the following

---theme_heading_N
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_heading_N

The heading options must be enclosed into the tags ---theme_heading_N and ---endtheme_heading_N 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 custom selector has the following default user options:

• width ;
• height ;
• 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;
• display ;
• margin ;
• padding ;
• text-decoration;
• border-bottom ;
• box-shadow ;
• white-space ;
• overflow-x , default auto;

The options are all standard CSS ones.

To customize a custom selector the syntax is the following

---theme_selector_selname
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_selector_selname

The theme data must be enclosed into the tags ---theme_selector_selname and ---endtheme_selector_selname 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 selector has a particular behavior for selecting nested selectors. The selname indicate the class of css element to which the theme will be applied; you can also define nested class. Let us suppose we want customized the theme of blocks of code that are generally defined as a code tag inside a pre tag; our custom selector should look like:

---theme_selector_pre-code
display     = block
white-space = pre
font-family = monospace, monospace
---endtheme_selector_pre-code

the selector name, pre-code will be converted into the nested css tags selector pre code {...} doing the magic for you: the symbol - is used to select nested selectors like pre code one. Simple and elegant!

TOC Theme

Table of Contents, TOC, is a particular metadata and its handling is very different from any other metatada. Consequently TOC has its own special theme that can be customized by the following syntax:

 ---theme_toc
option_name1 = option_value1
option_name2 = option_value2
...
---endtheme_toc

As common for MaTiSSe.py the option_name = option_value pairs are valid css style options. Into the TOC it is possible to emphasize the current section/subsection/slide as it has been done for the getting started presentation. The syntax to define an emphasized current position into the TOC is:

---theme_section_emph_toc
option_name1 = option_value1
...
---endtheme_section_emph_toc

---theme_subsection_emph_toc
option_name1 = option_value1
...
---endtheme_subsection_emph_toc

---theme_slide_emph_toc
option_name1 = option_value1
...
---endtheme_slide_emph_toc

Box-like environments themes

To customize a box-like environments the syntax is the following

---theme_box
style   = style_options
caption = caption_options
content = content_options
---endtheme_box

where style/caption/content_options are valid css style.

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.

For example the getting started presentation uses the following theme:

---theme_note
style   = display:inline-block;font-variant:small-caps;box-shadow: 7px 7px 5px rgba(200,200,200,0.3);border-radius:20px
caption = padding:0 2%;color:#4788B3;border-bottom:1px solid #4788B3;display:inline-block;
content = padding:0 2%;font-size:120%;
---endtheme_note 

Presentation-level Theme, an example

The getting started presentation uses the following theme definitions:

---theme_canvas
background = radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110))
---endtheme_canvas

---theme_toc
font-variant = small-caps
---endtheme_toc

---theme_section_emph_toc
border        = 1px solid #4788B3
border-radius = 5px
---endtheme_section_emph_toc

---theme_subsection_emph_toc
border        = 1px solid #4788B3
border-radius = 5px
---endtheme_subsection_emph_toc 
---theme_figure
style   = font-variant:small-caps;text-align:center;
caption = font-size:80%;color:#4788B3;
---endtheme_figure

---theme_note
style   = display:inline-block;font-variant:small-caps;box-shadow: 7px 7px 5px rgba(200,200,200,0.3);border-radius:20px
caption = padding:0 2%;color:#4788B3;border-bottom:1px solid #4788B3;display:inline-block;
content = padding:0 2%;font-size:120%;
---endtheme_note