Theme

Developer documentation for frontend and theming

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 number 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') }}
Top