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



Class overview


In the following section, all important classes of the Calenso booking widget are documented.


/* With the help of this function, the booking widget can be designed completely independently. */
/* Use the Chrome dev tools (or any other browser to get the respective IDs and classes). */

/*-------------------------------------------*\
    General basic styles
    Fonts, Buttons
\*-------------------------------------------*/

/* Booking widget container class (wrapper outside)*/.
#calenso-booking{}

/* Booking widget (appointment) container class (wrapper inside)*/.
#appointment-component{}

/* Standard classes for the fonts */
#calenso-booking h1, #calenso-booking h2, #calenso-booking h3, #calenso-booking h4, 
#calenso-booking p, #calenso-booking small, #calenso-booking div, #calenso-booking span{}

/* Styling of the links <a> throughout the widget */
#calenso-booking .custom-control-label a,
#calenso-booking a{}

/* Styling the general buttons */
#calenso-booking .calenso-button{}
#calenso-booking .calenso-button:hover{}
#calenso-booking .calenso-button:disabled{}

/* Forward-Back Button Font */
#calenso-booking .calenso-button span{}

/* Styling of the forward/back buttons */
#calenso-booking #cbw-prev-button{}
#calenso-booking #cbw-prev-button span{}
#calenso-booking #cbw-next-button{}
#calenso-booking #cbw-next-button span{}

/* Forward-Backward Buttons Icon */
#calenso-booking #cbw-next-button .next-arrow-container{}
#calenso-booking #cbw-next-button .next-arrow-container .cbw-next-arrow-button{}


/*-------------------------------------------*\
    Navigation
    Process steps: Standard/Hover/Active/Completed
\*-------------------------------------------*/


/* Styling of the navigation element: supports the classes hover, active and valid*/.
#calenso-booking .wizard-navigation{}
#calenso-booking ul.nav.nav-pills{}
#calenso-booking li.nav-item{}
#calenso-booking li.nav-item button{}
#calenso-booking li.nav-item button span{}

/* Navigation Element (hover) */
#calenso-booking li.nav-item button:hover{}
#calenso-booking li.nav-item button:hover span{}

/* Navigation element active element (visible) */
#calenso-booking li.nav-item.active button{}
#calenso-booking li.nav-item.active button:hover{}
#calenso-booking li.nav-item.active button span{}

/* Navigation element valid elements (all completed steps in the process) */
#calenso-booking li.nav-item.valid button{}
#calenso-booking li.nav-item.valid button:hover{}
#calenso-booking li.nav-item.valid button span{}

/*-------------------------------------------*\
    Booking widget step 1
    Booking type / Branch / Service
\*-------------------------------------------*/


/* Title: Select booking type */
#calenso-booking .switcher-title {}

/* Title: Select branch */ 
#calenso-booking label.cbw-select-store-title{}

/* Styling of the branch selection as a list or card element*/.
#calenso-booking .store-container{}

/* Styling of the branch listing card element */.
#calenso-booking .cbw-store-select-card{}

/* Styling the store search */
#calenso-booking .store-container .ng-select-searchable{}
#calenso-booking .store-container .ng-select-opened{}
 
 
/* Title: Select service */
#calenso-booking label.cbw-select-service-title{}

/* Styling of the service selection */
#calenso-booking #appointment-services-accordion{}

/* Container of service category */
#calenso-booking #appointment-services-accordion .card-header{}
#calenso-booking #appointment-services-accordion .card-header div.multilang-title{}

/* Container from the service overview */
#calenso-booking #appointment-services-accordion .card-body{}
#calenso-booking #appointment-services-accordion .custom-control-label{}
#calenso-booking #appointment-services-accordion .service-title div.cw-custom-title.multilang-title{}
#calenso-booking #appointment-services-accordion .cbw-service-description{}
#calenso-booking #appointment-services-accordion .cbw-service-duration{}
#calenso-booking #appointment-services-accordion .cbw-service-price{}

/* Radio button selection */ 
#calenso-booking #appointment-services-accordion .custom-control-input:checked~.custom-control-label:before {}

 
/*-------------------------------------------*\
    Booking widget step 2
    Resources / Employees
\*-------------------------------------------*/

/* Title: Select employee/resource */
#calenso-booking h4.cbw-resource-title{}

/* Styling of the staff/resource selection */
#calenso-booking .worker-tab{}

/* Container of the employee/resource listing */
#calenso-booking .worker-container .cbw-worker-card-container{}
/* Card-Auswahl der Mitarbeiter */
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card{}
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card .avatar{}
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card .cbw-detail_description div.cbw-worker-name{}
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card .cbw-detail_description div.cbw-function{}
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card .cbw-worker-store-location{}

/* Card selection: Selected employee/resource */
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card.cbw-active-worker-card{}
#calenso-booking .worker-container .cbw-worker-card-container .cbw-worker-card.cbw-active-worker-card .cw-radio-tick{}


/*-------------------------------------------*\
    Booking widget step 3
    Date and time
\*-------------------------------------------*/


/* Title: Select the desired date */
#calenso-booking h4.cbw-choose-date-title{}

/* Styling of the appointment selection */
#calenso-booking .cb-appointment-date-block{}

/*Appointment selection: Left column (calendar) */
#calenso-booking .cbw-calender-picker-wrapper{}
#calenso-booking .cb-appointment-date-block .cbw-worker-card{}
#calenso-booking .cb-appointment-date-block .calendar-header{}
#calenso-booking .cb-appointment-date-block .cal-month-view{}

/* Disabled days in the calendar: important default setting */.
#calenso-booking .cb-appointment-date-block .cal-cell.cal-disabled .cal-day-number span{
    color: #e7e7e7 !important;
}
/* Active days in the calendar */
#calenso-booking .cb-appointment-date-block .cal-cell .cal-day-number{}

/* Selected days in the calendar */
#calenso-booking .cb-appointment-date-block .cal-cell.cal-selected .cal-day-number{}
#calenso-booking .cb-appointment-date-block .cal-cell.cal-selected .cal-day-number span{}
#calenso-booking .cb-appointment-date-block .cal-cell.cal-selected .cal-day-number .calendar-total-badge{}

/* (Badge) Number of selected appointments per day */. 
#calenso-booking .badge.badge-primary.custom-slots-badge{}

/* Date selection: Right column (time) */
#calenso-booking .cb-appointment-date-block .termin-container{}
#calenso-booking .cb-appointment-date-block .cbw-appointment-slots-wrapper{}

/* Note to the user */
#calenso-booking .cbw-date-select-hint-alert{}

/* Widget Group Tabs e.g. Morning / Afternoon) */
#calenso-booking .cb-appointment-date-block .termin-container .mat-tab-group{}
#calenso-booking .mat-tab-label-active{}

/* (Badge) Number of selected appointments per day (per widget group e.g. morning / afternoon) */. 
#calenso-booking .badge.tabs-slot-counter{}

/* Card selection of the appointments */.
#calenso-booking .slot-box-group{}
#calenso-booking .slot-box-group .cbw-appointment-card{}
#calenso-booking .slot-box-group .cbw-appointment-card.cbw-selected-appointment-card{}
#calenso-booking .slot-box-group .cbw-appointment-card.cbw-selected-appointment-card .next-arrow-container{}
#calenso-booking .slot-box-group .cbw-appointment-card.cbw-selected-appointment-card .next-arrow-container span{}
#calenso-booking .slot-box-group .cbw-appointment-card .cbw-worker-name{}
#calenso-booking .slot-box-group .cbw-appointment-card .cbw-title{}

/* Load more appointments Link */
#calenso-booking .load-more-button{}
#calenso-booking .load-more-button a.load-more-link{}

/*-------------------------------------------*\
    Booking widget step 4
    Personal data / Summary / Completion
\*-------------------------------------------*/

/* Styling of the last booking step: Personal data */.
#calenso-booking .summary-tab{}
#calenso-booking .summary-tab .cb-appointment-summary-block{}

/* Container around the form fields */
#calenso-booking .summary-tab .cbw-personal-data-wrapper{}
#calenso-booking .summary-tab .cb-appointment-summary-block .cw-new-card{}
#calenso-booking .summary-tab .cb-appointment-summary-block .cw-new-card .cw-card-header{}
#calenso-booking .summary-tab .cb-appointment-summary-block .cw-new-card .cw-card-header .cbw-card-title{}
#calenso-booking .summary-tab .cb-appointment-summary-block .cw-new-card .cw-card-header .cbw-card-subtitle{}

/*Personal data form */
#calenso-booking .summary-tab .cb-appointment-summary-block .data-container{}

/* Booking form booking questions before personal data */
#calenso-booking .data-container .cw-custom_field_before{}

/* Personal data: Title e.g. Dr./Prof. */
#calenso-booking .data-container .cw-title{}

/* Personal data: Salutation */
#calenso-booking .data-container .cw-salutation{}

/* Personal data: First name */
#calenso-booking .data-container .cw-prename{}

/* Personal data: Surname */
#calenso-booking .data-container .cw-lastname{}

/* Personal data: Company */
#calenso-booking .data-container .cw-company{}

/* Personal data: E-mail address */
#calenso-booking .data-container .cw-email{}

/* Personal data: Telephone number */
#calenso-booking .data-container .cw-phone{}

/* Personal data: How would the customer like to be notified? */
#calenso-booking .data-container .cw-notification_preferences{}

/* Personal data: Address */
#calenso-booking .data-container .cw-address{}

/* Personal data: Country */
#calenso-booking .data-container .cw-country{}

/* Personal data: Comment */
#calenso-booking .data-container .cw-comment{}

/* Personal data: Internal comment (internal widget only) */
#calenso-booking .data-container .cw-internal_comment{}

/* Booking form Booking questions after personal data */
#calenso-booking .data-container .cw-custom_field_after{}
#calenso-booking .data-container .cw-custom_field_after .cw-custom-field.cw-radio-field-ID{}

/* Booking form: Meeting provider selection */
#calenso-booking .data-container .cw-meeting_types{}
#calenso-booking .data-container .cw-meeting_types .cbw-worker-store-location{}
#calenso-booking .data-container .cw-meeting_types .cbw-worker-store-location .cbw-worker-store-location{}
#calenso-booking .data-container .cw-meeting_types .cbw-worker-store-location .cbw-worker-store-location-name{}
#calenso-booking .data-container .cw-meeting_types .cbw-worker-store-location .cbw-worker-store-location-name-separator{}
#calenso-booking .data-container .cw-meeting_types .cbw-worker-store-location .cbw-worker-store-location-address{}

/* Booking form: Request for the Calenso data protection checkbox*/.
#calenso-booking .data-container .cw-policy{}

/* Booking form: Request birthday */
#calenso-booking .data-container .cw-birthday{}

/* Summary of booking: title/subtitle */
#calenso-booking .summary-tab .cbw-appointment-cart-overview-wrapper{}
#calenso-booking .summary-tab .cb-appointment-summary-block .cw-new-card .cw-card-header .cbw-card-title{}
#calenso-booking .summary-tab .cb-appointment-summary-block .cw-new-card .cw-card-header .cbw-card-subtitle{}

/* Booking summary: selected service */
#calenso-booking .appointment-body .service{}

/* Summary of the booking: selected date */.
#calenso-booking .appointment-body .appointment{}

/* Summary of booking: selected meeting provider */.
#calenso-booking .appointment-body .meeting-type-desc{}
#calenso-booking .appointment-body .cbw-summary-worker-store-location{}
#calenso-booking .appointment-body .cbw-summary-worker-store-location-name{}
#calenso-booking .appointment-body .cbw-summary-worker-store-location-name-separator{}
#calenso-booking .appointment-body .cbw-summary-worker-store-location-address{}


/* Summary of booking: remove selected appointment */.
#calenso-booking .appointment-body .remove-link{}

/* Summary of the booking: booked employee/resource */.
#calenso-booking .appointment-body .worker-name{}

/* Summary of the booking: price of the selected date */.
#calenso-booking .appointment-body .cw-price{}

/* Execute booking, send */
#calenso-booking .final-page-buttons-box .wizard-footer{}
#calenso-booking .final-page-buttons-box .wizard-footer #cbw-booking-finish{}
#calenso-booking .final-page-buttons-box .wizard-footer #cbw-booking-finish .next-arrow-container{}
#calenso-booking .final-page-buttons-box .wizard-footer #cbw-booking-finish .next-arrow-container .cbw-next-arrow-button{}