Documentation

CSS class and inline CSS styles

mAuthor offers two CSS styles for content creation and edition. While creating a presentation, it is possible to use either inline CSS or CSS class style, depending on a situation. It is recommended to set a global CSS class for most modules, as it prevents any possible layout inconsistencies in the presentation.

Inline CSS

Inline CSS style is used to give formatting to a particular, single module, which do not appear frequently in the presentation. Inline CSS style can be set by simply inserting the values in the "Inline CSS" section in the "Styles" section in the bottom right.

CSS class

Each page of mAuthor presentations consists of different module types. There are text modules for paragraphs or instructions, buttons for navigation such as Previous or Next page, shapes or various exercise modules like Multiple choice or Ordering. One of the intelligent mAuthor’s features is the possibility to define a global look and graphical layout for all modules of the same type included in the presentation, e.g. it is possible to define the font size and color for all titles or subtitles in a presentation. This option is available in the "Presentation" -> "Edit CSS" section.

The previously assigned modules are later displayed in the drop-down menu in the "Styles" section of your presentation and can be easily selected to give formatting to a chosen module.

It is essential to remember that in order to use the defined module CSS classes properly, they need to be appropriately named in the "Edit CSS" section. For instance, if you want to define text modules, you need to give them distinctive names in the "Edit CSS" section, e.g. .shape_line, .gap_correct or .text_title. Otherwise, they won't be properly displayed in the drop-down menu in the "Styles" section.

While adding a new css class for the addon, it is good practice to use selectors with a base class name, e.g.:

.MyPuzzle .myInnerClass{
}

Player CSS classes





Obiekt CSS class name
Main page ic_mainPage
Header ic_header
Footer ic_footer