Themen: Farben und Formatierung einstellen

Diese Seite beschreibt, wie die Farbe und Formatierung von Kundenseiten angepasst werden kann. Kundenseiten sind Seiten, die ein Kunde durchlaufen kann, um eine Reservierung zu erstellen.

Das Erscheinungsbild der Kundenseiten kann ganz nach Wunsch angepasst werden. Das Erscheinungsbild der Kundenseiten kann angepasst werden, um den Reservierungsdialog beispielsweise in einem gewünschten Corporate Design darzustellen.

Gehen Sie zum Konfigurationsbildschirm, indem Sie im Dropdown-Menü unter dem Benutzernamen auf Konfiguration klicken. Wählen Sie anschließend Farben und Formatierung einstellen im Dropdown-Menü unter 'Kundenseite'.

Thema hinzufügen

Mit der Schaltfläche + Hinzufügen können zusätzliche Themen hinzugefügt werden. Es öffnet sich ein Dialogfenster, in dem unter anderem der Name und die Beschreibung des Themas eingegeben werden können. Hierfür können nur Kleinbuchstaben verwendet werden. Die übrigen Bestandteile dieses Dialogfensters werden unter der Überschrift 'Übrige Einstellungen ändern' behandelt. Klicken Sie auf Speichern, um das hinzugefügte Thema zu bewahren.

Thema ändern

Für die Anpassung der Farben und Formatierung des Reservierungsdialogs stehen diverse Einstellungen zur Verfügung. Diese Einstellungen können im Konfigurationsbildschirm angepasst werden. Wählen Sie im Dropdown-Menü unter 'Kundenseite' Farbe und Formatierung einstellen. Die Einstellungen, die in diesem Fenster angepasst werden können, beziehen sich auf die Farben, die Schriftart und -größe der Elemente im Reservierungsdialog. Wählen Sie ein Thema aus, um es anzupassen.

Wenn die Einstellungen nach Wunsch konfiguriert sind, müssen die Änderungen mit der Schaltfläche Speichern unten auf der Seite bestätigt werden.

Übrige Einstellungen ändern

Mit der Schaltfläche Ändern öffnet sich ein Dialogfenster, in dem die folgenden Einstellungen des ausgewählten Themas angepasst werden können.

• Themaname
• Themabeschreibung
• Erweitertes CSS
• Header
• Footer
• Standardbild

CSS hinzufügen

In i-Reserve ist es möglich, Kundenseiten mithilfe von CSS zu gestalten. CSS steht für Cascading Style Sheets und kann verwendet werden, um jedes Element einer Webseite zu gestalten. Im Dialogfenster 'theme' können im Textfeld 'Erweitert (CSS)' die Formatierungsregeln eingegeben werden. Wählen Sie nach dem Eingeben der CSS-Regeln Speichern, um die Änderungen zu bewahren.

Wenn die Einstellungen, die am Thema geändert werden können, nicht ausreichen, kann man sich dafür entscheiden, CSS zu implementieren. Dieses (erweiterte) CSS wird zuletzt geladen. Dadurch können bestehende Stil- und Layout-Einstellungen nach Wunsch überschrieben werden.

Das CSS funktioniert nur, wenn es syntaktisch korrekt notiert ist. Ein CSS-Regelsatz besteht aus einem Selektor und einer Deklaration.

Header und Footer auswählen

Im Dialogfenster 'Theme' können auch der gewünschte Header und Footer für die Kundenseiten ausgewählt werden. Ein Header und Footer befinden sich jeweils oben und unten auf einer Webseite und bilden die Grundlage der Gestaltung. Wählen Sie Ändern , um das Dialogfenster 'Theme' zu öffnen. Verwenden Sie für die Auswahl des gewünschten Headers oder Footers die Dropdown-Menüs hinter 'Header' und 'Footer' und bestätigen Sie diese Auswahl, indem Sie auf Speichern klicken. Um einen Header oder Footer auswählen zu können, müssen diese zunächst als Content-Block angelegt worden sein.

Standardbild als Logo festlegen

Es ist möglich, dem betreffenden Thema ein Standardbild hinzuzufügen. Dies ermöglicht es, ein Standardlogo auf bestimmten Kundenseiten anzuzeigen. Diese Funktionalität befindet sich im Dialogbildschirm 'Theme'. Öffnen Sie das Dialogfenster mit der Schaltfläche Ändern und klicken Sie mit der Maus auf das Symbol neben 'Standardbild'. Der Dialogbildschirm wird geöffnet. Klicken Sie anschließend auf Datei auswählen und navigieren Sie im geöffneten Explorer zum gewünschten Bild auf dem PC. Wählen Sie das richtige Bild aus, klicken Sie auf Öffnen und laden Sie das Bild mit der Schaltfläche Speichern hoch.

Das Standardbild kann beispielsweise im Header oder Footer des Themas platziert werden. Das Bild kann auf zwei Arten in den Code aufgenommen werden.

Durch Hinzufügen des Folgenden zum Code wird das Bild in den Content-Block oder den Content platziert. Das Bild erscheint in diesem Fall so, wie es dem Thema hinzugefügt wurde.

 {logo}

Die Verwendung des folgenden Codes ermöglicht es, die Eigenschaften des Bildes anzupassen.

 <img src="{logo url='true'}"/> 

Beispiel: Das Bild wird im Header platziert und soll dreißig Prozent der Gesamtbreite einnehmen und mit der Größe des Fensters mitskalieren. Dies wird erreicht, indem dem obigen Code das Folgende hinzugefügt wird.

 "width=30%"

Die Codezeile, die das Bild aufruft und die gewünschten Eigenschaften übergibt, lautet dann wie folgt.

 <img src="{logo url='true'}"width=30%"/> 

Verschiedene Themen verwenden

Es ist möglich, eine Kundenseite in jedem verfügbaren Thema anzuzeigen. Um eine Seite in einem bestimmten Thema anzuzeigen, muss der URL des Reservierungsdialogs &style=$ID hinzugefügt werden. Die $ID steht in Klammern hinter dem Namen des Themas im Bildschirm 'Farbe und Formatierung'. Die Verwendung dieser Erweiterungen ermöglicht es, verschiedene Themen nebeneinander zu verwenden. Indem auf einer Kundenseite ein Hyperlink mit einer Erweiterung platziert wird, kann auf eine Kundenseite in einem anderen Thema verwiesen werden.

Beispiel: Neben dem Standardthema wurde ein Thema mit dem Namen Thema 2 hinzugefügt. Wenn dieses Thema in 'Farbe und Formatierung' ausgewählt ist, steht oben auf der Seite 'Ausgewähltes Thema: Thema 2 (113)'. Es gibt eine Kampagnenseite für ein zeitlich begrenztes Angebot, die in Thema 2 angezeigt werden soll. Um dies zu erreichen, wird dem Link der Schaltfläche Angebot im Bootstrap-Menü &style=113 hinzugefügt.