Wie man einen benutzerdefinierten Stil zum Online-Buchungs-Widget hinzufügt

Für eine nahtlose Integration in deine Website kannst du der Online-Buchungsseite dein eigenes benutzerdefiniertes Stylesheet hinzufügen.

Bitte beachte, dass nur Farbeigenschaften in einer Themen-CSS-Datei erlaubt sind.
Änderungen am Layout oder der Sichtbarkeit sind nicht erlaubt und werden aus der Datei entfernt. 

Die Buchungsseite verwendet das Bootstrap-CSS-Framework responsive grid zusammen mit einer Reihe seiner Komponenten wie Schaltflächen, Formulare, Etiketten, Warnungen, Listengruppen, Brunnen und modale Dialoge.

Weitere Informationen über das Framework, seine Komponenten und das Farbschema findest du in der Bootstrap-Dokumentation. 

Jede Seite der Online-Buchungsseite besteht aus einer Reihe von Einzelkomponenten, von denen einige in der gesamten Anwendung wiederverwendet werden.

Jede Komponente kann über ihren Klassennamen angesteuert werden, und die Farben für alle Elemente innerhalb dieser Komponente können über CSS geändert werden.

Mit dem Webinspektor in Safari, Firefox oder Chrome kannst du die in den einzelnen Komponenten enthaltenen Elemente anzeigen und sie per CSS einzeln ansteuern.

Der Klassenname für jede Komponente ist unten aufgeführt, zusammen mit Vorschlägen, wie du deine Änderungen lokal testen können, bevor du sie an Phorest übermittelst.

Home page

mceclip0.png

 

Service category

mceclip1.png

 

Booking option requests

mceclip2.png

Booking option list

mceclip3.png

Appointment reservation

mceclip4.png

 

Appointment activation

mceclip5.png

Booking History

mceclip6.png

Misc

Header

header.header {

}

Footer

footer.footer {

}

Cart

.cart-items-modal {

}

mceclip7.png

Success alert

.alert.alert-success {

}

mceclip8.png

Warning alert

.alert.alert-warning {

}

mceclip9.png

Danger alert

.alert.alert-danger {

}

mceclip10.png

Sign in modal

.authentication-modal {

}

mceclip11.png

Service group modal

.service-group-modal {

}

mceclip12.png

Änderungen testen

Wenn Sie Ihre CSS-Änderungen auf einer Live-Seite testen möchten, empfehlen wir Ihnen, die Firefox-Entwicklungstools zu verwenden, um Ihr lokal erstelltes Stylesheet zu importieren und so die Live-Version zu überschreiben.

Wenn Sie mit den Ergebnissen zufrieden sind, können Sie das Stylesheet an Phorest übermitteln.

Importieren eines lokalen Stylesheets über die Firefox-Entwicklungstools

1. Öffnen Sie den Webinspektor und klicken Sie auf Stileditor.
2. Klicken Sie auf die Schaltfläche Importieren und suchen Sie Ihre CSS-Datei.
3. Ihre lokalen Änderungen sollten in Echtzeit angezeigt werden.

Startpunkt

Nachfolgend finden Sie ein Standard-Stylesheet, das Sie für den Anfang verwenden können

War dieser Beitrag hilfreich?
0 von 6 fanden dies hilfreich