INHALTSVERZEICHNIS


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


Datum-Schritt: Hinweis-Element (Einen spezifischen Tag im Kalender auswählen, ...)

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


Mitarbeiter-Karte: Name


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