Benutzerdefiniertes CSS für das Buchungswidget

INHALTSVERZEICHNIS

• Funktionsweise
• Vorlage aktivieren
• Beispiele
• Klassenübersicht

Einführung

Seit Version 4.37.0 ist es möglich, im Whitelabel- oder Enterprise-Abonnement das Design des Buchungswidget komplett selber zu stylen.

Funktionsweise

Die Funktion steht unter https://dashboard.calenso.com/app/settings/custom-css zur Verfügung. Calenso stellt einige Beispiele bereit, welche veranschaulichen sollen, wie ein benutzerdefiniertes CSS aussehen kann. Damit die Vorlage angepasst werden kann, muss sie zuerst geklont werden. Selektiere dazu die Vorlage aus und klicke auf "Klonen". Definiere anschliessend einen Namen für die Vorlage, ändere das CSS (nicht zwingend notwendig) und klicke auf "Speichern". Danach ist die Vorlage im Vorlagen-Dropdown verfügbar.

Vorlage aktivieren

Sobald du mit den Anpassungen fertig bist, kannst du die Vorlage als "aktive Vorlage" definieren. Erst dann wird die Vorlage beim Buchungswidget aktiviert:

Navigiere auf deine Buchungsseite und du solltest die Änderungen live sehen:

Beispiele

Globale Änderungen für das gesamte Buchungswidget

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

Text: Dienstleistung auswählen

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

Text: Filiale auswählen

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

Text: Buchungstyp wählen

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

Text: Gewünschtes Datum wählen

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

Text: Ressource wählen

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

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

Mitarbeiter-Karte anpassen

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

Mitarbeiter-Karte: Job-Titel

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

Mitarbeiter-Karte: Aktivierter Mitarbeiter

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

Mitarbeiter-Karte: Icon bei aktiviertem Mitarbeiter

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

Alle Bilder anpassen (z.B. abdunkeln)

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

Klassenübersicht

Im nachfolgenden Bereich werden alle wichtigen Klassen des Calenso Buchungswidget dokumentiert.

/* Mithilfe dieser Funktion kann das Buchungswidget komplett eigenst?ndig gestalltet werden. */
/* Verwende die Dev-Tools von Chrome (oder eines anderen Browsers, um an die jeweiligen IDs und Klassen zu kommen). */

/*-------------------------------------------*\
    Allgemeine Basis-Styles
    Schriftarten, Buttons
\*-------------------------------------------*/

/* Buchungswidget Container-Klasse (Wrapper aussen)*/
#calenso-booking{}

/* Buchungswidget (Termin) Container-Klasse (Wrapper innen)*/
#appointment-component{}

/* Standard-Klassen für die Schriftarten */
#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 der Links <a> im gesamten Widget */
#calenso-booking .custom-control-label a,
#calenso-booking a{}

/* Styling der generellen Buttons */
#calenso-booking .calenso-button{}
#calenso-booking .calenso-button:hover{}
#calenso-booking .calenso-button:disabled{}

/* Vor-Zurück Button Schrift */
#calenso-booking .calenso-button span{}

/* Styling der Vor-Zurück Buttons */
#calenso-booking #cbw-prev-button{}
#calenso-booking #cbw-prev-button span{}
#calenso-booking #cbw-next-button{}
#calenso-booking #cbw-next-button span{}

/* Vor-Zurück Buttons Icon */
#calenso-booking #cbw-next-button .next-arrow-container{}
#calenso-booking #cbw-next-button .next-arrow-container .cbw-next-arrow-button{}


/*-------------------------------------------*\
    Navigation
    Prozessschritte: Standard/Hover/Active/Erledigt
\*-------------------------------------------*/


/* Styling des Navigation Elements: unterstützt die Klassen hover, active und 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 aktives Element (sichtbar) */
#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 valide Elemente (alle erledigten Schritte im Prozess) */
#calenso-booking li.nav-item.valid button{}
#calenso-booking li.nav-item.valid button:hover{}
#calenso-booking li.nav-item.valid button span{}

/*-------------------------------------------*\
    Buchungswidget Schritt 1
    Buchungstyp / Filiale / Dienstleistung
\*-------------------------------------------*/


/* Titel: Buchungstyp auswählen */
#calenso-booking .switcher-title {}

/* Titel: Filiale auswählen */ 
#calenso-booking label.cbw-select-store-title{}

/* Styling der Filialauswahl als Liste oder Card-Element*/
#calenso-booking .store-container{}

/* Styling der Filialen-Auflistung Card-Element */
#calenso-booking .cbw-store-select-card{}

/* Styling der Filialsuche */
#calenso-booking .store-container .ng-select-searchable{}
#calenso-booking .store-container .ng-select-opened{}
 
 
/* Titel: Dienstleistung wählen */
#calenso-booking label.cbw-select-service-title{}

/* Styling der Dienstleistungsauswahl */
#calenso-booking #appointment-services-accordion{}

/* Container der Dienstleistungskategorie */
#calenso-booking #appointment-services-accordion .card-header{}
#calenso-booking #appointment-services-accordion .card-header div.multilang-title{}

/* Container der Dienstleistung */
#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 Auswahl */ 
#calenso-booking #appointment-services-accordion .custom-control-input:checked~.custom-control-label:before {}

 
/*-------------------------------------------*\
    Buchungswidget Schritt 2
    Ressourcen / Mitarbeiter
\*-------------------------------------------*/

/* Titel: Mitarbeiter/Ressource auswählen */
#calenso-booking h4.cbw-resource-title{}

/* Styling der Mitarbeiter/Ressourcen Auswahl */
#calenso-booking .worker-tab{}

/* Container der Mitarbeiterauflistung */
#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-Auswahl: Ausgewählter Mitarbeiter/Ressource */
#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{}


/*-------------------------------------------*\
    Buchungswidget Schritt 3
    Datum und Uhrzeit
\*-------------------------------------------*/


/* Titel: Gewünschtes Datum auswählen */
#calenso-booking h4.cbw-choose-date-title{}

/* Styling der Terminauswahl */
#calenso-booking .cb-appointment-date-block{}

/*Terminauswahl: Linke Spalte (Kalender) */
#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{}

/* Deaktivierte Tage im Kalender: wichtige Standardeinstellung */
#calenso-booking .cb-appointment-date-block .cal-cell.cal-disabled .cal-day-number span{
    color: #e7e7e7 !important;
}
/* Aktive Tage im Kalender */
#calenso-booking .cb-appointment-date-block .cal-cell .cal-day-number{}

/* Ausgewählte Tage im Kalender */
#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) Anzahl ausgewählte Termine pro Tag */ 
#calenso-booking .badge.badge-primary.custom-slots-badge{}

/* Terminauswahl: Rechte Spalte (Uhrzeit) */
#calenso-booking .cb-appointment-date-block .termin-container{}
#calenso-booking .cb-appointment-date-block .cbw-appointment-slots-wrapper{}

/* Hinweis an den Benutzer */
#calenso-booking .cbw-date-select-hint-alert{}

/* Widget Gruppe Tabs zB. Vormittag / Nachmittag) */
#calenso-booking .cb-appointment-date-block .termin-container .mat-tab-group{}
#calenso-booking .mat-tab-label-active{}

/* (Badge) Anzahl ausgewählte Termine pro Tag (pro Widget Gruppe zB. Vormittag / Nachmittag) */ 
#calenso-booking .badge.tabs-slot-counter{}

/* Card-Auswahl der Terminvorschläge */
#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{}

/* Weitere Terminvorschläge laden Link */
#calenso-booking .load-more-button{}
#calenso-booking .load-more-button a.load-more-link{}

/*-------------------------------------------*\
    Buchungswidget Schritt 4
    Persönliche Daten / Zusammenfassung / Abschluss
\*-------------------------------------------*/

/* Styling des letzten Buchungsschritts: Persönliche Daten */
#calenso-booking .summary-tab{}
#calenso-booking .summary-tab .cb-appointment-summary-block{}

/* Container um die Formularfelder */
#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{}

/*Persönliche Daten Formular */
#calenso-booking .summary-tab .cb-appointment-summary-block .data-container{}

/* Buchungsformular Buchungsfragen vor den Stammdaten */
#calenso-booking .data-container .cw-custom_field_before{}

/* Persönliche Daten: Titel zB. Dr./Prof. */
#calenso-booking .data-container .cw-title{}

/* Persönliche Daten: Anrede */
#calenso-booking .data-container .cw-salutation{}

/* Persönliche Daten: Vorname */
#calenso-booking .data-container .cw-prename{}

/* Persönliche Daten: Nachname */
#calenso-booking .data-container .cw-lastname{}

/* Persönliche Daten: Firma */
#calenso-booking .data-container .cw-company{}

/* Persönliche Daten: E-Mail Adresse */
#calenso-booking .data-container .cw-email{}

/* Persönliche Daten: Telefonnummer */
#calenso-booking .data-container .cw-phone{}

/* Persönliche Daten: Wie möchte der Kunde benachrichtigt werden? */
#calenso-booking .data-container .cw-notification_preferences{}

/* Persönliche Daten: Adresse */
#calenso-booking .data-container .cw-address{}

/* Persönliche Daten: Land */
#calenso-booking .data-container .cw-country{}

/* Persönliche Daten: Kommentar */
#calenso-booking .data-container .cw-comment{}

/* Persönliche Daten: Interner Kommentar (nur internes Widget) */
#calenso-booking .data-container .cw-internal_comment{}

/* Buchungsformular Buchungsfragen nach den Stammdaten */
#calenso-booking .data-container .cw-custom_field_after{}
#calenso-booking .data-container .cw-custom_field_after .cw-custom-field.cw-radio-field-ID{}

/* Buchungsformular: Auswahl des Meeting-Anbieters */
#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{}

/* Buchungsformular: Abfrage der Calenso-Datenschutz Checkbox*/
#calenso-booking .data-container .cw-policy{}

$/* Buchungsformular: Abfrage des Geburtstages */
#calenso-booking .data-container .cw-birthday{}




/* Zusammenfassung der Buchung: Titel/Subtitel */
#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{}

/* Zusammenfassung der Buchung: ausgewählte Dienstleistung */
#calenso-booking .appointment-body .service{}

/* Zusammenfassung der Buchung: ausgewählter Termin */
#calenso-booking .appointment-body .appointment{}

/* Zusammenfassung der Buchung: ausgewählter Meeting-Anbieter */
#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{}


/* Zusammenfassung der Buchung: ausgewählter Termin entfernen */
#calenso-booking .appointment-body .remove-link{}

/* Zusammenfassung der Buchung: gebuchter Mitarbeiter */
#calenso-booking .appointment-body .worker-name{}

/* Zusammenfassung der Buchung: Preis des ausgewählten Termins */
#calenso-booking .appointment-body .cw-price{}

/* Buchung durchführen, absenden */
#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{}