Theming: defining the presentation theme

We have pointed out that MaTiSSe.py has an extremely friendly theme handling. In general, to define and to handle a MaTiSSe.py theme the user does not need to be a html/css guru. However, some basic knowledge of html/css can be useful at least at the beginning. In particular, it can be useful to know some very common css style selectors. The following style options should be very common in any style definition:

• width is the width of element you are styling;
• height is the height of element you are styling;
• padding for padding the contents of the element you are styling;
• background is the background of element you are styling: it can be a color, a gradient, an image, etc...;
• color is the color of the text inside the element you are styling;
• display is way your contents are displayed; the most common setting are:
  • display: inline displays an element as an inline element (like <span>);
  • display: block displays an element as a block element (like <p>);
  • display: inline-block displays an element as an inline-level block container; the inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box;
• float float to left or right the element you are styling;
• border is the style of the border of the element you are styling;
• border-radius for rounding the border of the element you are styling;
• font, font-size, font-style etc..., for setting the font of the element your are styling.

MaTiSSe.py has a very simple theme handling by means of which you can inject almost any valid css options into you theme element, only two remarks must be done:

• the box model adopted by MaTiSSe.py is set to border-box, in particular into the main css theme is placed:

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}     

this means that the size of each element is computed by the width/height values plus padding whereas margin is not considered;

• the theme elements are, in general, converted to div elements.

This means that altering this defaults setting (e.g. manually modifing the main theme.css) can result in an unpredictable presentation output.

For styling your presentation useful resources can be w3schools/css and w3schools/html.

MaTiSSe.py Universe (again)

I known, you have just seen the universe of MaTiSSe.py, this is just a recall... The customizable theme elements are:

• presentation with its own options, having:
  • one canvas with its own options over wich the slides are rendered:
  • N slide(s) with their own options; each slide has:
    • N_H headers, with N_H being an arbitrary number;
    • N_F footers, with N_F being an arbitrary number;
    • N_L left sidebars, with N_L being an arbitrary number;
    • N_R right sidebars, with N_R being an arbitrary number;
    • 1 main content.

In the following we will see how to customize each element.

Presentation-level Theme	Slide-level Theme	Theme Examples
Presentation-level Theme	Slide-level Theme	Theme Examples