• Final

    • Farbschema

    Owned by Roger Wesemann
    Last updated: Mai 11, 2023
    5 min read

    Hier handelt es sich nicht um eine Integration sondern um ein vordefiniertes Theme, dass von anderen Integrationen verwendet werden kann, um ein einheitliches Erscheinungsbild in allen Widgets zu gewährleisten.

    Diese Option lädt keine weiteren Felder und nur die Segmente “Erscheinungsbild” und “Erweiterte Einstellungen” nach.

    1.0 Konfiguration

    Das Buchungswidget wird in der Integrationsverwaltung konfiguriert. Die Integrationsverwaltung ist ein aufklappbares Segment auf der Seite

    Hotelverwaltung / Distribution / Eigener Vertriebskanal

    1.1 Übersicht

    In der Übersicht werden alle Integrationen in einer Tabelle dargestellt.

    Abb. 1.1.a: Die Übersicht der Integrationen auf der Seite "Eigener Vertriebskanal”

    Durch Klick auf einen Eintrag in der Tabelle kann die Konfiguration der Integration aufgerufen und bearbeitet werden. Durch Klick auf den Button "Hinzufügen", oben rechts, öffnet sich ein Fenster, dort können neue Integrationen angelegt werden.

    1.2 Einstellungen

    Um eine Integration vom Typ “Farbschema” anzulegen, klicken Sie auf den “Hinzufügen”-Button.

    Vergeben Sie einen Namen, wählen Sie als Integrationstyp “Farbschema” aus und klicken Sie auf “Speichern”.

    Abb. 1.1.b: Das Segment “Einstellungen” beim Neuanlegen einer Integration

    1.2.1 Name der Integration

    Hier können Sie einen Namen für die Integration vergeben.

    1.2.2 Integrationstyp

    Hier können Sie den Integrationstyp auswählen. Es stehen folgende Typen zur Verfügung:

    Wählen Sie hier als Integrationstyp “Farbschema” aus.

    1.3 Erscheinungsbild

    Hier kann das Farbschema der Integration angepasst werden. Die Untersegmente links können auf- und zugeklappt werden und die Farbe für jedes Element kann ausgewählt bzw. eingegeben werden. Rechts daneben befindet sich die Vorschau. Die Elemente können auch in der Vorschau angeklickt werden, um die Farbe anzupassen.

    2.4 Erweiterte Einstellungen (CSS/LESS)

    Hier können erweiterte Einstellungen vorgenommen werden, die das Layout beeinflussen.

    2.4.1 Offset CSS-Selector

    Es gibt Integrationen wie z. B. die Buchungsstrecke oder die Gutscheinverkaufsstrecke, die automatisch während der Benutzung an bestimmte Positionen scrollen, um dem Benutzer zu unterstützen. Je nach Design und Programmierung kann es aber Elemente auf einer Website geben, die die Scrollposition beeinflussen. Das ist z. B. der Fall, wenn der Header einer Seite die CSS-Eigenschaft „position: fixed“ besitzt. Das hat zur Folge, dass eine eingebettete Buchungsstrecke nicht mehr an die gewünschte Position scrollen kann.

    Wenn Sie wissen, dass Sie solche Elemente auf Ihrer Website einsetzen oder wenn Sie beim testen der Buchungsstrecke feststellen, dass die automatische Scrollposition nicht stimmt, können Sie hier den CSS-Selector angeben, der für die Beeinflussung der Scrollposition verantwortlich ist. Dieses Element wird dann bei der Berechnung der Scrollposition automatisch berücksichtigt und die Scrollposition korrigiert.

    Wenn die Angabe eines Elements nicht möglich ist, kann alternativ auch der Versatz in Pixeln (siehe Punkt 4.2 Scroll-Offset) angegeben werden.

    2.4.2 Scroll-Offset

    Es gibt Integrationen wie z. B. die Buchungsstrecke oder die Gutscheinverkaufsstrecke, die automatisch während der Benutzung an bestimmte Positionen scrollen, um dem Benutzer zu unterstützen. Je nach Design und Programmierung kann es aber Elemente auf einer Website geben, die die Scrollposition beeinflussen. Das ist z. B. der Fall, wenn der Header einer Seite die CSS-Eigenschaft „position: fixed“ besitzt. Das hat zur Folge, dass eine eingebettete Buchungsstrecke nicht mehr an die gewünschte Position scrollen kann.

    Wenn Sie wissen, dass Sie solche Elemente auf Ihrer Website einsetzen oder wenn Sie beim testen der Buchungsstrecke feststellen, dass die automatische Scrollposition nicht stimmt, können Sie hier den Versatz in Pixeln angeben. Dies ist als Alternative gedacht zum vorherigen Punkt 4.1. Offset CSS-Selector, wenn z. B. die Angabe eines Elements nicht möglich ist.

    Der Versatz wird dann bei der Berechnung der Scrollposition automatisch berücksichtigt und die Scrollposition korrigiert.

    2.4.3 CSS font-family

    Hier kann die Standard CSS “font-family” überschrieben werden mit den gewünschten Schriftarten. Die Angaben sollten identisch der CSS-Eigenschaft angegeben werden, also durch Komma getrennt. Bei Verwendung von nicht generischen Schriften sollten Sie darauf achten, dass die gewünschte Webfont im Quelltext der Seite via CSS referenziert wird.

    2.4.4. Eigenes CSS/LESS

    Für individuellere Styling-Wünsche, die über das Anpassen von Farben hinausgehen, kann hier das Standard-CSS mit CSS oder LESS überschrieben werden.

    Bitte beachten Sie:

    Es gibt aktuell keine Dokumentation für Entwickler über das Markup und das CSS-Klassen-Konzept. Wenn Sie das Standard-CSS überschreiben, sollten Sie genau wissen, was Sie tun und das Ergebnis auf jeden Fall überprüfen.

    Fehlerhaftes CSS kann dazu führen, dass die Integration nicht mehr korrekt angezeigt wird und/oder nicht mehr korrekt funktioniert. Wir übernehmen keine Haftung für fehlerhafte Angaben und können Ihnen dazu auch keine Unterstützung anbieten.