Documentation

mAuthor offers two CSS styling methods for content creation and editing. While creating a presentation, it is possible to use either inline CSS or CSS classes, depending on the situation. It is recommended to set a global CSS class for most modules, as it helps prevent layout inconsistencies in the presentation.

Inline CSS

An inline CSS style is used to apply formatting to a single, particular module. This is best for unique elements that do not appear frequently in the presentation. Inline styles can be set by inserting values directly into the "Inline CSS" area, which is found in the "Styles" section of the module's properties.

CSS class

Each page of an mAuthor presentation consists of different module types. There are Text modules, buttons such as Previous Page Button or Next Page Button, and various exercise modules like Choice or Ordering. One of mAuthor's intelligent features is the ability to define a global look and graphical layout for all modules of the same type. For instance, 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 created classes are later displayed in the dropdown 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. Otherwise, they won't be properly displayed in the dropdown menu in the "Styles" section.

There are two types of modules: "modules" (which are part of the player) and "addons". The default class names are ".ic_name" and ".addon_name" respectively. If you want to add a new class, the following rule of thumb applies:

• for "modules" omit the prefix "ic_" and add a new suffix after "name", i.e.
  ".ic_text" -> ".text_new"


• for "addons" omit the "addon_" prefix and add a new suffix after the "name", e.g.
  ".addon_Hierarchical_Lesson_Report" => ".Hierarchical_Lesson_Report_New".

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

.MyPuzzle .myInnerClass {}

Player CSS classes