There are several approaches to customizing the visual aspects of the WebApp.
All *.css and *.js files that are stored in the folders css and js of the root project directory are loaded automatically.
Consequently, it is possible to add new stylesheets and javascript functionality without modifying existing code.
Note that the files are loaded alphabetically but only after the main stylesheets of the application. This means that existing classes can be extended and overwritten.
The WebApp is based on the standard Bootstrap classes. These classes can either be extended or overridden in custom css files because custom files are loaded only after the bootstrap stylesheet is loaded. If, for eaxmple, the navigation bar should be bright red simply add
.navbar.bg-dark {
background-color: red !important;
}
to a custom stylesheet and place the file in the css folder at the project root.
Each style has a field CSS.
The text that is defined in this field will be attached to the class attribute of the root html tag of the style.
Either existing bootstrap classes can be used here or custom classes can be used which can further be specified in css/main.css.
This custom class in combination with CSS selectors and combinators allows to keep a tight control over the style of a specific instance of a style.