Calenso

INHALTSVERZEICHNIS

• Introduction
• How it works
• Activate template
• Examples

Introduction

Since version 4.37.0, it is possible to completely style the design of the booking widget yourself in the Whitelabel or Enterprise subscription.

How it works

The function is available at https://dashboard.calenso.com/app/settings/custom-css. Calenso provides some examples which should illustrate how a custom CSS can look like. In order to customize the template, it must first be cloned. Select the template and click on "Clone". Then define a name for the template, change the CSS (not mandatory) and click on "Save". After that the template is available in the template dropdown.

Activate template

Once you are done with the customizations, you can define the template as "active template". Only then will the template be activated in the booking widget:

Navigate to your booking page and you should see the changes live:

Examples

Global changes for the entire booking widget

#calenso-booking {
    background-color: white !important;
}

Text: Select service

#calenso-booking .cbw-select-service-title {
    color: #5b80ee !important;
}

Text: Select branch

#calenso-booking .cbw-select-store-title {
    color: #5b80ee !important;
}

Text: Select booking type

#calenso-booking .switcher-title {
    color: #5b80ee !important;
}

Text: Select desired date

#calenso-booking .cbw-choose-date-title {
    color: #5b80ee !important;
}

Text: Select resource

#calenso-booking .cbw-resource-title {
    color: #5b80ee !important;
}

#calenso-booking .cbw-date-select-hint-alert {
    color: #5b80ee !important;
}

Customize employee card

#calenso-booking .cbw-worker-card {
    background-color: #2c3948;
    border: none;
    box-shadow: none;
}

#calenso-booking .cbw-worker-card .cbw-worker-name {
    color: #9da3ab;
    font-weight: 800;
}

Employee card: Job title

#calenso-booking .cbw-worker-card .cbw-function {
    color: #9da3ab;
}

Employee card: Activated employee

#calenso-booking .cbw-active-worker-card {
    border: 1px solid #d6d6d6;
}

Employee card: Icon with activated employee

#calenso-booking .cw-radio-tick {
    color: #ebf1fb !important;
}

Adjust all images (e.g. darken)

#calenso-booking img {
    filter: brightness(.8) contrast(1.2);
}