CSS (Cascading Style Sheets) Anpassungen

Mittels CSS können gewisse Elemente Ihrer Buchungsseite noch individueller in Layout, Farbe und Größe für Sie angepasst werden.

Sie finden unten aufgeführt einige Beispiele für CSS Befehle, die Sie unter Buchungsseite > Farben & Schrift > Cascading Style Sheets (CSS) hinterlegen können. Grundsätzlich können alle CSS-Klassen von Ihrer Online Buchungsseite angepasst werden.

Hinweis: Bitte verwenden Sie CSS Befehle nur, wenn Sie ein fortgeschrittener Benutzer sind und Ihre Designwünsche nicht durch die grundlegenden Farb- und Schrifteinstellungen unter Buchungsseite > Farben & Schrift abgedeckt werden können (mehr dazu hier). 

Im Nachfolgenden finden Sie eine Auflistung der am häuftigsten gewünschten CSS Anpassungen und eine Anleitung zur Buchungsseitenintegration derer.

Generell finden Sie sämtliche CSS Einstellungen unter Buchungsseite > Farben & Schrift > Cascading Style Sheets (CSS). Standardmäßig ist dieses Feld leer, allerdings können unbegrenzt Anpassungen vorgenommen werden.

Hinweis: Sollten die Farbeinstellungen für die gewünschte Farbgebung nicht ausreichen, können CSS Klassen für das CI überschrieben werden. Gerne können Sie uns in solchen Fällen kontaktieren.

Inhaltsverzeichnis

1. Farbanpassungen auf der Buchungsseite
2. Elemente ausblenden (auf Buchungsseite)
3. Responsive Design (Ansicht der Buchungsseite auf Mobilgeräten)
4. Leistungsgruppen (auf Buchungsseite)
5. Erweiterte CSS-Befehle (für die Buchungsseite)

1. Farbanpassungen

1.1. Selektierte Kacheln einfärben

.ssel { background: #D8F6CE;}

Anstelle von #D8F6CE fügen Sie bitte Ihre Wunschfarbe als Hexcode ein. Eine Farbpalette dazu finden Sie beispielsweise auf https://html-color-codes.info/webfarben_hexcodes/

1.2. Füllfarbe der Icons in der Fortschrittsleiste einfärben

Anhand dieses CSS Codes können Sie die Füllfarbe der Icons in der Fortschrittsleiste (1, 2, 3) Ihrer Wunschfarbe anpassen.

#divWizard .sumBookingsIcon {fill: #FF4000;}

1.3. Farbe der Icons in der Buchungszusammenfassung einfärben

#sumBookings text {fill: #FF00FF;font-weight: 700;}

1.4. Wochentage in Kalenderansicht einfärben

.ui-datepicker-calendar th {color: #FF0080;}

1.5. Hintergrund und Schriftfarbe der Kalendertage einfärben

Nach "background" fügen Sie bitte die gewünschte Hintergrundfarbe (in unserem Fall Grün) ein, während Sie die Schriftfarbe nach "color" (in unserem Fall Weiß) definieren.

.dayA .ui-state-default {background-color: #8BC34A!important;color: #fff;
padding: .4375em .625em;}
.dayWL .ui-state-default {background-color: orange!important;color: #fff;
padding: .4375em .625em;}
.ui-datepicker td {padding: 0.1em;}

1.6. Pfeile für die Monatsauswahl einfärben

Sollten Sie einen dunklen Hintergrund nutzen, können Sie damit die Pfeile für die Monatsauswahl in der Kalenderansicht einfärben.

.ui-datepicker-next, .ui-datepicker-prev {
filter: invert(1);
}

2. Elemente ausblenden

2.1. Wochenende (Sa und So) in der Kalenderansicht ausblenden

Mit dem nachstehenden CSS Code können Sie sich auf Ihrer Buchungsseite das Wochenende aus Ihrer Kalenderansicht ausblenden lassen. Das macht beispielsweise Sinn, wenn Sie am Wochenende keine Termine anbieten.

.ui-datepicker-week-end {display:none}

2.2 Serientermine auf der Buchungsseite ausblenden

Wenn Sie die Buchung von Serienterminen auf Ihrer Buchungsseite anbieten, werden standardmäßig die Folgetermine auf der Buchungsseite angezeigt.

Mit dem folgenden Code werden die Folgetermine auf der Buchungsseite nicht mehr angezeigt. Die Information, dass es sich um einen wiederholenden Termin handelt, erscheint weiterhin.

.rrDiv {
display: none;
}

.3. Responsive Design

3.1. Mitarbeiter (Mitarbeiter-/Ressourcenauswahl) auf mobilen Endgeräten untereinander anzeigen:

Mit dem folgenden CSS Code können Sie Ihren Kunden die Auswahl Ihrer Mitarbeiter erleichtern, indem die Mitarbeiter nicht standardmäßig in einem Slider (Bild 1) horizontal einzeln angeklickt werden müssen, sondern direkt untereinander (Bild 2) erscheinen.

Folgenden Code bauen Sie bitte in Ihr CSS Feld ein:

@media (max-width: 34.375em /* 550px */ ) {

#calSelOverlay {flex-direction: column;}

.calImgName {display: flex !important;margin-bottom: 25px;}

#calSelPrev,  #calSelNext{display: none;}

}

3.2. Alle Mitarbeiter (Mitarbeiter-/Ressourcenauswahl) anzeigen lassen

Mithilfe dieses CSS Codes werden alle verfügbaren Mitarbeiter auf Ihrer Buchungsseite angezeigt. Als Kunde muss nicht mittels der Pfeiltasten nach dem gewünschten Kalender gesucht werden.

#calSelOverlay {flex-wrap: wrap;}
.calImgName {display: flex !important;margin-bottom: 25px;}
#calSelPrev, #calSelNext{display: none;}

3.3. Zusammenfassung der Buchung unterhalb anzeigen
 

Durch Verwenden des folgenden CSS Codes erscheint die Zusammenfassung der aktuellen Buchung (Bereich "Ihre Buchung") unterhalb der Leistungsauswahl, Terminauswahl und Kontaktdaten Eingabe. Dadurch müssen Kunden, die über ihr mobiles Gerät buchen, nicht immer nach unten scrollen, um eine Auswahl zu treffen.

@media (max-width: 62em) {
#divSumRight {
order: 2;
margin-bottom: 3em;
}
}

4. Leistungsgruppen

4.1. Leistungsgruppen in 2 Spalten anzeigen lassen

Mithilfe dieses CSS Codes werden die Leistungsgruppen in 2 Spalten angezeigt. Je nachdem wie viel Text die Leistungsgruppe hat oder ob Bilder vorhanden sind, muss der Wert der Klasse .sg bei min-height angepasst werden.

#services { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; }
.servicesSG { -ms-flex-preferred-size: 50%; flex-basis: 50%; }
.sg { min-height: 220px; }
@media (max-width: 650px ) { .servicesSG { -ms-flex-preferred-size: 100%; flex-basis: 100%; } }

5. Erweiterte CSS-Befehle

5.1. Schriftarten aus Google Fonts importieren

Der folgende CSS-Code importiert eine Schriftart aus den Google Fonts. Diese Schriftart kann dann mittels HTML-Formatierung der Buchungsseite verwendet werden bzw. als Standardschriftart gesetzt werden. Bitte beachten Sie dass hierzu eine Anmerkung in den Datenschutzbestimmungen gemacht werden muss.

@import url('https://fonts.googleapis.com/css2?family=Spartan&display=swap');
html, body {
  font-family: 'Spartan', sans-serif !important;
}

Sollten Sie Fragen haben oder Hilfe bei der Einrichtung benötigen, kontaktieren Sie uns bitte.