Mit jedem Stil ist ein Cascading Style Sheet (CSS-Datei) verknüpft. Jedem Element in den endgültigen, in HTML wiedergegebenen Umfrageseiten ist eine bestimmte Klasse beigefügt (Seite, Komponente, Fehler usw.) und es hat seine eigene, eindeutige ID, sodass der Stil jedes Elements in der CSS-Datei festgelegt werden kann.
Außerdem ist es möglich, benutzerspezifische Vorlagen zu definieren, die für die individuelle Anpassung der Seitenanzeige verwendet werden.
Der „Style Manager“ ist vom Menü „Aktion“ über die Option „Stile verwalten“ erreichbar.
- Stilliste: In diesem Bereich werden alle Stile mit ihren verknüpften Stylesheets angezeigt. Die Stile „Unternehmen“ und „Responsiv“ sind standardmäßig verfügbar.
- Vorlage: Für jeden Stil kann eine spezifische Vorlage definiert werden, eine pro Sprache im Form-Formular.
Die Style Manager-Symbolleiste bietet folgende Funktionen:
- Neu: erstellt einen neuen Stil
- Eigenschaften: öffnet die Eigenschaften des ausgewählten Stils
- Löschen: löscht den ausgewählten Stil
- Speichern: speichert die Änderungen, die im Stil vorgenommen wurden
- Duplizieren: erstellt eine Kopie des ausgewählten Stils
- Rückgängig machen: macht die Aktualisierung der Vorlage rückgängig
- Wiederholen: wiederholt die Aktualisierung der Vorlage
- Ausschneiden: schneidet den ausgewählten HTML-Code der Vorlage aus
- Kopieren: kopiert den ausgewählten HTML-Code einer Vorlage
- Einfügen: fügt den ausgewählten HTML-Code einer Vorlage ein
Erstellen eines neuen Stils:
Wenn die Option „Neu“ aus der Symbolleiste ausgewählt wird, wird das Fenster Stil-Eigenschaften angezeigt, in dem Sie den neuen Stil erstellen können.
Allgemein:
- Name: Der Name des Stils, der in der Liste angezeigt wird.
- Beschreibung: Beschreibung des Stils
- Responsiv:stellt das Form-Formular als responsiv ein. Dies impliziert, dass das wiedergegebene Form-Formular für die Anzeige auf verschiedenen Geräten optimiert wird: Desktop-Bildschirme, Tablets und Mobilgeräte (responsives Design). Wenn das Kontrollkästchen markiert ist, muss das in den Eigenschaften des Stils (Registerkarte „Erweitert“) eingestellte Stylesheet (CSS-Datei)das responsive Design unterstützen.Es wird empfohlen, diese Option zu verwenden.
- URL: URL eines Content-Renderers, der verwendet wird, um das Layout des Form-Formulars zu erzeugen.
Normalerweise wird die Form-URL von Selligent (http://DOMAINNAME/optiext/survey.dll?ID=) für das Rendering aller Form-URLs verwendet.Wenn ein Content-Renderer eingestellt ist, verwenden alle Form-Formulare die definierte URL statt der Standard-Form-URL.Geben Sie die URL des Content-Renderes ein. Zum Beispiel http://www.mysite.com/renderer.aspx?id=%s. '%s' muss immer verwendet werden. Es wird vom System durch die Selligent-ID (Hash) ersetzt.
Technischer Hinweis: Der Inhalt der Content-Renderer-Seite wird mit dem Inhalt der Selligent-Seite zusammengeführt. Die vorhandene Website holt den Inhalt der Selligent-Seite vom Selligent-Webserver, integriert Text- und Header-Teile in der Nachricht und sendet das zusammengeführte Ergebnis als eine HTML-Seite zum Browser der Kontakts zurück. Es gibt keinen Hinweis darauf, dass der Inhalt von einer Nicht-Website-Seite kommt. Um dies tun zu können, wird der Hashed-Code, der mit der HTTP-Anforderung übertragen wurde, verwendet, um alle Inhalte und Parameter abzurufen. Weitere Informationen finden Sie im Thema „Content-Renderer“.
Beispiel:
Der für die Umfrage zur Kundenzufriedenheit verwendete Einzelhandelsstil ist für die Verwendung des folgenden Content-Renderers konfiguriert: http://www.mysite.com/renderer.aspx?ID=%s
Beim Öffnen der URL des Content-Renderers sieht das Ergebnis wie folgt aus.
Das Form-Formular, das diesen Stil verwendet, wird im obigen Layout angezeigt. Das Form-Formular wird mit dem obigen Layout „dekoriert“.
Erweitert:
- Stylesheet:Dieses Feld wird mit der URL ausgefüllt, von der das Stylesheet (CSS-Datei) abgerufen werden kann. Stylesheets definieren das Layout der einzelnen Elemente auf den Webseiten.
- HTML-Header: ermöglicht die Definition von HTML-Header-Elementen. Diese Elemente werden zwischen die Tags <head></head> aller Umfrageseiten hinzugefügt (für jede Sprache). Sie können als Verweis auf JavaScript oder CSS-Stylesheets verwendet werden. (Beispiel: Fügen Sie einen Tag <TITLE> hinzu. Dadurch wird ein Titel in der obersten Browserleiste angezeigt.)
- HTML-Text: ermöglicht die Definition von HTML-Textelementen. Diese Elemente werden hinter dem öffnenden Tag <body> aller Form-Seiten hinzugefügt (für jede Sprache). (Beispiel: Fügen Sie ein Logo zum Text jeder Seite hinzu.)
Beispiel: Erweiterte Stil-Eigenschaften
Stylesheet: http://my_web_server/images/business.css
HTML-Header:
<meta name="description" content="Form 1" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Form Author" />
HTML-Text:
<div id="MyDiv">
<img src="http://www.mycompany.com/images/company_logo.gif" alt="company logo" />
</div>
Verwenden einer benutzerspezifische Vorlage
In den Stil-Eigenschaften ist es möglich, gemeinsamen HTML-Code für alle Form-Seiten zu definieren. Außerdem ist es möglich, benutzerspezifische Inhalte und ein benutzerspezifisches Layout für jede Sprache zu definieren, die im Form-Formular verwendet wird.
Bei Auswahl eines Stils führt der Teil „Vorlage“ die Vorlagen auf, die für jede Sprache definiert sind.
Hinweis: Es kann nur eine Vorlage pro Sprache ausgewählt werden.
Der grundlegende HTML-Code einer Vorlage muss die folgenden Abschnitte enthalten:
<body>
<DIV ID=MAHEADER></DIV>
<DIV ID=MAFORM></DIV>
<DIV ID=MAFOOTER></DIV>
</body>
Dies DIVs entsprechen den Teilen „Header, Seite und Footer“ jeder Form-Seite. Sie können Code zwischen diese DIVs eintragen. Wenn eine der DIVs in der Vorlage fehlt, wird der verbundene Inhalt bei der Anzeige des Form-Formulars nicht auf die Seite eingefügt.
Beispiel: Fügen Sie einen Urheberrechtshinweis unten auf Ihrem Form-Formular hinzu. Geben Sie im Vorlagenfenster hinter der DIV MAFOOTER Folgendes ein: <div id="bottom">© Compopnayname</div>. Geben Sie der DIV die Stil-ID „bottom“ in der CSS-Datei ein, die mit dem Stil verknüpft ist.
Definieren einer Vorlage für jede Sprache
1. Der Vorlagenbereich ist in Registerkarten pro Sprache aufgeteilt. Definieren Sie eine Vorlage für jede Sprache.
2. Speichern Sie die Vorlage und schließen Sie den Style Manager.
3. Im Form-Formular wird der entsprechende Inhalt je nach ausgewählter Sprache angezeigt.
Anwenden eines Stils auf das Form-Formular
Um einen Stil auf das Form-Formular anzuwenden, gehen Sie zu den Eigenschaften des Form-Formulars und wählen Sie auf der Registerkarte „Struktur“ einen Stil aus.
