Custom content

Add custom content to your Kimai installation

A Kimai plugin which allows adding custom content for:

  • Stylesheet (embedded in all pages)
  • Javascript (embedded in all pages, except security screens)
  • A global warning message, shown to every logged-in user
  • An entire new page to display (markdown formatted) information for your users

Custom content page

You can edit two fields:

  • The title is the name of the menu entry
  • The content for the page, markdown is supported for formatting.

If the title is empty, the menu will be hidden.



React on global events and utilize the Kimai Javascript API:

document.addEventListener('kimai.initialized', function(event) {

Select an Activity e.g. to simulate a global default activity. The ID 1234 is the Activity ID to be selected (should be global).

$('body').on('change.select2', '#timesheet_edit_form_activity', function() { 
    setTimeout( function() { $(this).val('1234').trigger('change'); }, 200 ); 

Make sure that the “mark as exported” checkbox in the “invoice screen” is pre-selected:

$('#invoice-print-form input[name=markAsExported]').prop('checked', true);

Set the activity description upon selection as description for the timesheet record:

$('body').on('change.select2', '#timesheet_edit_form_activity', function() {
    const descriptionField = $('#' + $(this.form).prop('name') + '_description');
    kimai.getPlugin('api').get('/api/activities/' + $(this).val(), {}, function(data) {

Automatically login with SAML (only works if normal form login is deactivated):

document.querySelector('div.login-box-body a.btn-block')?.click();


That's how the **alert / warning message** looks like. You can even include _markdown_ and [links](/en/custom-content-news) !

CSS / Stylesheet

Hiding a menu:

ul.sidebar-menu li#calendar { display:none; }

Hiding the colored dots:, {display:none !important;}

Activating horizontal scrolling on data-tables:

.box .dataTables_wrapper {
    overflow-x: auto;
    min-height: .01%;
.box .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
.box .dataTables_wrapper > .row > .col-sm-12 {
    padding-left: 0;
    padding-right: 0;

Deactivate the background blur for modals, which might be problematic in RDP sessions:

.modal-blur { 
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;

Switching the order of save and cancel buttons:

.modal-footer button[type=submit], .box-footer input[type=submit] {
    float: right !important
.modal-footer .btn-cancel, .box-footer input[type=reset] {
    float: left !important

Remove the red dotted lines between overlapping timesheet entries:

table.dataTable tr.overlapping {
    border-top: none;

Highlight active timesheet records:

tr.recording {
    background-color: #ffa059 !important;

Hiding the billable field:

label[for=timesheet_edit_form_billable] { display:none; }

Hiding the navigation icons:

.sidebar-menu>li>ul>li>a>i, .sidebar-menu>li>a>i {
    display: none;
body.sidebar-collapse .sidebar-menu>li>ul>li>a>i, body.sidebar-collapse .sidebar-menu>li>a>i {
    display: inline-block;

Remove the title on security screens (login, reset password):

.login-logo, .register-logo { visibility: hidden; }

Setting a plain background color for security screens:

.login-logo, .register-logo { visibility: hidden; }
.layout-boxed body, .layout-boxed html, body, html { background: #000000; }
.login-page, .register-page { background: none; }

Hide the header on mobile devices:

@media (max-width: 767px) {
    .main-header .logo {
        display: none;
    .fixed .content-wrapper, .fixed .right-side, .control-sidebar, .main-sidebar {
        padding-top: 50px;


Permission Name Description
edit_custom_content show the “custom content” administration screen

By default, these are assigned to each user with the role ROLE_SUPER_ADMIN.