INHALTSVERZEICHNIS


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;
}
CSS


Text: Select service


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


Text: Select branch


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


Text: Select booking type


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


Text: Select desired date


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


Text: Select resource


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


Date step: Hint element (Select a specific day in the calendar, ...)


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


Customize employee card


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


Employee card: Name


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


Employee card: Job title


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


Employee card: Activated employee


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


Employee card: Icon with activated employee


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


Adjust all images (e.g. darken)


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