Custom content

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.

Examples

Javascript

React on global events and utilize the Kimai Javascript API:

document.addEventListener('kimai.initialized', function(event) {
    alert(event.detail.kimai.getTranslation().get('confirm'));
});

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) {
        descriptionField.val(data.comment);
    });
});

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

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

Alert

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:

i.dot, span.dot {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;
    }
}

Permissions

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