All CSS rules and the referenced media elements (icons, sounds) that are used to layout a OLAT-Core application build a so called theme. A theme must offer layouting rules for every component. Since a theme is completely separated from the code it is possible to have many themes on the same server, instantly change the look of an application and to share themes independent from the application code. In the Admin site in the OLAT application the installed themes can be selected and tested from a drop down list.

In OLAT-Core a default theme is delivered that includes rendering instructions for every component. An additional example theme demonstrates how one can build a derived theme without redefineing every single element but just overrideing some elements.

Themes are located under webapp/static/themes/

Please see also the theme documentation that you find under webapp/static/themes/themes.README

In the constructor of the BaseChiefController the current theme is detected and added into the HTML head section. There are several files that are loaded from a theme:

The CSS files that are included here do not contain actual CSS selectors and rules but rather do they serve as an entry point to load the necessary CSS files.

The theme structure is very close to the YAML structure. The rules are splitt into four different type of files:

These files are available in different directories, each symbolizes the usage of the rules:

In the images directory you will find all the images that are referenced in the CSS rules. The images are addressed relative to the location of the CSS file.

The main entry points for a theme are the layout.css and the patches.css file on the root level of the theme. Those are the files that are included in the HTML head element. All other files must be included in the correct order from those files.

An example from the default theme:

@charset "UTF-8";

/* basic layout definitions for all media */

@import url(../../yaml/core/slim_base.css);

@import url(all/yaml_basemod.css);

@import url(all/core.css);

@import url(all/olat.css);

@import url(all/content.css);

/* print specific adjustments */

@import url(../../yaml/core/slim_print_base.css);

@import url(print/yaml_basemod_print.css);

@import url(print/core_print.css);

@import url(print/olat_print.css);

/* aural styles */

@import url(aural/core.css);

@import url(aural/content.css);

A valid theme must provide the following files:

The default theme is located under webapp/static/themes/default/. It contains rules for every component of the OLAT-Core framework and the OLAT application.

In the first line of the theme, the YAML framework is included followed by rules for overriding the default YAML rules. Then, the OLAT-Core framework component rules are added and after that the OLAT application rules. The content rules are included last.

The default layout serves you as a case study how to write your own theme, however in most cases it does not make sense to redefine everything. Instead, in the first line of your theme you include the default theme and only override the styles that you want to change.

For your convenience we provide an example custom theme. The example theme is located under webapp/static/themes/example/.

Instead of redefineing everything, the example theme overrides CSS classes from the default theme to modify the look of the application. In the first line of the layout.css you will find a rule to include the default theme. Then, some rules are overriden in the theme. Typical rules you want to override are:

Since every image in OLAT is defined using CSS rules it is possible to change the entire icon set by the theme.