Recent Searches

No recent searches

    Popular Articles

      Articles
      View all
        Topics
        View all
          Tickets
          View all
            no results

            Sorry! nothing found for

            Custom CSS for the booking widget

            Created by Calenso Support, Modified on Mon, 10 Jun, 2024 at 11:15 AM by Calenso Support

            INHALTSVERZEICHNIS


            Introduction


            Since version 4.37.0, it is possible to completely style the design of the booking widget yourself.


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


            Was this article helpful?

            That’s Great!

            Thank you for your feedback

            Sorry! We couldn't be helpful

            Thank you for your feedback

            Let us know how can we improve this article!

            Select at least one of the reasons
            CAPTCHA verification is required.

            Feedback sent

            We appreciate your effort and will try to fix the article

            Preview
            0 of 0