Theme

Kimai uses the Tabler.io bootstrap theme. You find the theme specific documentation here.

Twig context

You have the following global objects available to work with:

  • the tabler_bundle context (see here)
  • the kimai_config to access system configurations
  • the kimai_context helper to identify javascript and modal requests

Aligning data in tables

Always align the table header to the content cell.

Use the following alignments in your data-tables:

Data type Alignment Component
Date Start  
Datetime Start  
Time Center  
Money End  
Duration End  
Boolean Center  
Text Start  
Count (int) Center badge
Collections (Text) Start label

Max. active entries warning

A small colored warning sign will be shown, if a user has an active timesheet.

The maximum amount of active timesheets can be configured with the setting timesheet.active_entries.hard_limit (called Permitted number of simultaneously running time entries, see System > Settings).

Icons

Kimai allows you to configure icons in several places (provided by Font Awesome 5) and ships with a pre-defined list of icon aliases to guarantee a consistent look.

The pre-defined icons aliases can be found in this config/packages/tabler.yaml.

Icon aliases can be used by applying the icon filter, e.g.

<i class="{{ 'money'|icon }}"></i>

or by using the icon function, e.g.

{{ icon('money') }}