Kenntnisse im Umgang mit CSS und dem LESS-Framework.
Der Artikel listet öffentlich verfügbare CSS-Klassen von adaptiven Formularen. Sie können diese Klassen nutzen, um verschiedene Komponenten eines adaptiven Formulars zu gestalten. Der Stil von Authoring-Komponenten, wie Dialogfelder und Statusleisten, die Warnungen anzeigen, gehen über den Rahmen dieses Artikels hinaus. Verwenden Sie diese Stilkonstrukte, um Stile (mit CSS oder LESS) nur dann zu erstellen, wenn Sie mit dem Designeditor keine Komponenten formatieren können.
Das LESS-Framework vereinfacht das Anwendungsbeispiel, um Stile in adaptiven Formularen anzupassen. Mit dem Framework können Sie Stile mit einem Satz von Variablen und Funktionen (Mixins) definieren. Mit dem LESS-Framework können Sie die Größe des enthaltenen Codes reduzieren und dessen Wiederverwendbarkeit verbessern.
Sie können adaptive Formularstile wie folgt anpassen:
Sie können das Design eines adaptiven Formulars ändern, um sicherzustellen, dass sein Aussehen mit Web-Seiten konsistent ist, in denen das adaptive Formular integriert ist.
Änderungen des Gesamtaussehens des adaptiven Formulars mithilfe von CSS-Eigenschaften sind in der Regel Teil der Designänderungen. Große Veränderungen am Aussehen des adaptiven Formulars, wie Änderungen am Layout und an der Platzierung von Komponenten, werden nicht als Design-Änderungen betrachtet.
Basierend auf dem Bootstrap, definiert der folgende Satz von CSS-Eigenschaften das Design einer Webseite:
Derzeit sind LESS-Variablen nur für diese Eigenschaften der verschiedenen Elemente in einem adaptiven Formular definiert.
Sie können Änderungen an Aussehen, Layout, Positionierung und Sichtbarkeit von Elementen vornehmen. Erstellen oder aktualisieren Sie dazu Ihre benutzerdefinierten CSS-Dateien und beziehen sie dabei die in diesem Artikel aufgeführten Designkonstrukte ein.
Um ein Design auf ein adaptives Formular anzuwenden, öffnen Sie das adaptive Formular zum Bearbeiten, öffnen Sie den Container mit den Eigenschaften des adaptiven Formulars und geben Sie im Basisregister den Pfad der benutzerdefinierten CSS-Datei ein. Standard-Designkonstrukte des adaptiven Formulars und mit den in der benutzerdefinierten CSS-Datei aufgeführten Konstrukten überschriebene Konstrukte.
Komponenten, die in diesem Artikel behandelt werden, verfügen über vordefinierte CSS-Klassen. Sie können die Variablen bearbeiten, um die Stile in den CSS-Klassen zu ändern. Alternativ dazu können Sie die gesamte Klasse neu definieren. In diesem Abschnitt werden die Klassen in den Komponenten und Stile, die Sie mithilfe von Variablen ändern können, beschrieben.
Ein Container ist die Komponente der obersten Ebene. Andere Bedienfelder und Felder befinden sich unterhalb der Containerkomponente.
CSS-Klasse |
|
Variablenbeschreibung |
Variablenbeschreibung |
|
Hintergrundfarbe des Containers |
|
Auffüllung für den Container |
|
Rand für den Container |
|
Schriftfarbe für den Container |
Adaptive Formulare enthalten verschiedene Arten von Feldern. Jedes Feld verfügt über einen eindeutigen Klassennamen, der der Name des Feldes ist. Das Feld enthält außerdem den gemeinsamen Klassennamen guideFieldNode
.
Felder enthalten Bezeichnungen, Widgets, Hilfebeschreibung (lange und kurze) sowie Feldhilfesymbole (Fragezeichen).
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Auffüllung für das Feld |
|
Schriftfarbe der Fehlermeldung des Felds |
|
Schriftgröße der Fehlermeldung des Felds |
Das HTML-Element Bezeichnung, das für das Feld verwendet wird, enthält die Klassen links oder oben, je nachdem, ob die Beschriftung sich oben oder links befindet.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Schriftfarbe für die Feldbezeichnung |
|
Schriftgröße für die Feldbezeichnung |
|
CSS-Zeilenhöheneigenschaft für die Feldbezeichnung |
|
CSS-Schriftbreiteneigenschaft für die Feldbezeichnung |
|
Rand für die Feldbezeichnung |
Die CSS-Regeln für die Bezeichnung werden mithilfe der guideFieldLabel-Bezeichnung angewendet. Wenn Sie Autor sind, überschreiben Sie diese Regel, um Ihre benutzerdefinierten Änderungen sichtbar zu machen.
Je nach Typ enthalten Widgets auch Klassen. Normalerweise beinhalten Widgets die guideFieldWidget
-Klasse. Die Widgets, die mit HTML geliefert werden, verwenden normalerweise die standardmäßige HTML-Elementeingabe und -Auswahl. Der Stil wird entsprechend ausgeführt. Sie können ein benutzerdefiniertes Widget nicht anpassen, indem Sie die Variablen ändern.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Hintergrundfarbe für die Widgets (funktioniert nicht für Kontrollkästchen und Optionsfelder) |
|
Rahmenfarbe für die Widgets |
|
Rahmengröße für die Widgets |
|
Rahmenradius für die Widgets |
|
Rahmentyp für die Widgets |
|
Fokustyp für Widget-Rahmen |
|
Konsolidierter Rahmenstil von Widgets |
|
Farbe des Texts im Widget |
|
Größe des Textes im Widget |
|
CSS-Zeilenhöheneigenschaft für das Widget |
|
CSS-Auffüllung für das Widget |
|
Rahmenfarbe, wenn das Widget im Fokus ist |
|
Rahmenfarbe des Widgets für die Pflichtfelder |
|
Hintergrundfarbe des Widgets für die Pflichtfelder |
|
Hintergrundfarbe für das Widget, wenn das Feld deaktiviert ist |
|
Schriftfarbe für das Widget, wenn das Feld deaktiviert ist |
|
Rahmenfarbe für das Widget, wenn das Feld deaktiviert ist |
|
Höhe des Widgets (funktioniert nicht für Kontrollkästchen und Optionsfelder) |
|
Höhe für Kontrollkästchen und Optionsfelder. |
|
Maximale Höhe für eine Mehrfachauswahl-Dropdown-Liste |
Der Stil für fokussierte, deaktivierte und Pflichtfelder ist auf Variablen eingeschränkt. Sie können diese jedoch ändern, indem Sie die Stile überschreiben. Einschränkungen mithilfe von Variablen wird hauptsächlich dazu verwendet, um die Anzahl der Variablen zu kontrollieren. Die Einschränkungen können abgeschwächt werden, wenn sich das Erscheinungsbild eines Felds drastisch ändert, da es sich in einem der oben genannten Status befindet.
Ein Autor kann den Hilfeinhalt in den Feldern unter Verwendung der Komponenten für kurze und lange Beschreibungen angeben. Beide Komponenten haben die gemeinsame Klasse .guideHelpDescription
und eine weitere Klasse .long
/.short
, je nach Typ der Beschreibung. Der Hilfeinhalt wird in einem Absatzelement eingeschlossen, um den Stil der Beschreibung zu überschreiben. Die Hilfebeschreibung (lang und kurz) wird mithilfe der Variablen geändert. Angefangen wird mit Widgets-Hilfe, wie in der nachfolgenden Tabelle angegeben:
Variablen |
Beschreibung |
|
Hintergrundfarbe der langen Widget-Hilfe |
|
Rahmenfarbe der langen Widget-Hilfe |
|
Rahmenfarbe für linken Indikator der langen Widget-Hilfe |
|
Hintergrundfarbe der kurzen Widget-Hilfe |
|
Schriftfarbe der kurzen Widget-Hilfe |
|
Hintergrundfarbe der kurzen QuickInfo-Hilfe der Widgets |
|
Schriftfarbe der kurzen QuickInfo-Hilfe der Widgets |
Mit dem Geschäftsbedingungs-(TnC
)-Widget können Sie Geschäftsbedingungen angeben. Sie können das Widget mithilfe der Variablen anpassen, die in folgender Tabelle beschrieben sind.
Variablen |
Beschreibung |
tnc-unvisited |
Schriftfarbe des ungeöffneten Geschäftsbedingungs-Links |
tnc-visited |
Schriftfarbe des geöffneten Geschäftsbedingungs-Links |
Schaltflächen sind auch Widgets. Allerdings unterscheidet sich deren Stil von Widgets. In den adaptiven Formularen bildet Folgendes eine Schaltflächen:
HTML-Code für Schaltfläche:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS-Klasse |
Beschreibung |
|
Bietet Symbole für Schaltfläche |
|
Bestimmt den Stil der Schaltflächenbezeichnung/-beschriftung |
Variablen |
Beschreibung |
|
Rahmengröße für die Schaltflächen |
|
Rahmentyp |
|
CSS-Auffülleigenschaft für die Schaltfläche |
|
Schriftgröße für die Schaltfläche |
|
Hintergrundfarbe für die Schaltfläche |
|
Schriftfarbe der Schaltfläche |
|
Rahmenfarbe der Schaltfläche |
|
Auffüllung für große Schaltflächen (Schaltflächen mit Klasse .buttonlarge) |
|
Schriftgröße für große Schaltflächen |
|
Auffüllung für kleine Schaltflächen (Schaltflächen mit Klasse .buttonsmall) |
|
Schriftgröße für kleine Schaltflächen |
|
Hintergrundfarbe für informative Schaltflächen (Schaltflächen mit Klasse .buttoninformative) |
|
Schriftfarbe für informative Schaltflächen |
|
Rahmenfarbe für informative Schaltflächen |
|
Hintergrundfarbe für Warnungsstilschaltflächen (Schaltflächen mit Klasse .buttonwarning) |
|
Schriftfarbe für Warnungsstilschaltflächen |
|
Rahmenfarbe für Warnungsstilschaltflächen |
|
Hintergrundfarbe für Warnschaltflächen (Schaltflächen mit Klasse .buttonalert) |
|
Schriftfarbe für Warnschaltflächen |
|
Rahmenfarbe für Warnschaltflächen |
Für die Widgets wird ein Fragezeichen angezeigt, wenn ein Verfasser eine lange Beschreibung im Hilfeinhalt hinzufügt. Das im Bootstrap bereitgestellte Standardsymbol wird verwendet. Um ein benutzerdefiniertes Symbol zu verwenden, können Sie die Bootstrap-Symbole anpassen.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Farbe des Symbols |
|
Farbe des Symbols, wenn mit der Maus darauf gezeigt wird |
Sie können das Farbschema für Kopf- und Textzeilen in einer Tabelle ändern, indem Sie folgende Variablen verwenden.
Variablen |
Beschreibung |
|
Hintergrundfarbe für die Kopfzeile. Der Standardwert ist |
|
Hintergrundfarbe für die ungeraden Textzeilen. Der Standardwert ist |
|
Hintergrundfarbe für gerade Textzeilen. Der Standardwert ist |
Mit dem Dateianhangswidget von adaptiven Formularen können Sie Dateien hochladen. Sie können außerdem das Widget mithilfe von Variablen anpassen.
Variablen |
Beschreibung |
|
Auffüllung für die im Widget angezeigten Dateien |
|
Hintergrundfarbe für das Dateielement |
|
Rahmenfarbe für den oberen Rahmen |
|
Schriftfarbe für das Dateielement |
|
Farbe für das Vorschau-Symbol (Bootstrap-Symbol) im Widget |
|
Höhe des Kommentars für das Dateielement |
Es gibt vier Arten von Navigatorregisterkarten. Dazu gehören Registerkarten links, oben, im Assistenten und im Akkordeon. Jeder Navigator beinhaltet eine andere Klasse.
Navigator |
CSS-Klasse |
|
.accordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.wizard-navigators |
Im Folgenden wird der HTML-Code für das Registerkartennavigatorelement gezeigt (ähnlich der Bootstrap-Registerkarten):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
Sie können den Stil des Navigators mithilfe der CSS-Regeln ändern, anhand derer die Elemente mithilfe der untergeordneten Selektoren ausgewählt werden. Wenn Sie beispielsweise einen Textdekorationsstil im Anker-Tag hinzufügen:
Registerkartennavigator oben:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
Zusätzlich gibt es Klassen für Stilregisterkarten-Navigatoren (links und oben), abhängig davon, ob sie verschachtelte/untergeordnete/Unternavigatoren haben.
CSS-Klasse |
Beschreibung |
|
Registerkartennavigatoren (links und oben) mit verschachtelten/untergeordneten/Unternavigatoren |
|
Registerkartennavigatoren (links und oben) ohne verschachtelte/untergeordnete/Unternavigatoren |
Die guideNavIcon-Klasse stellt ein Standardsymbol für Registerkartennavigatoren (links und oben) und Assistentennavigatoren bereit.
CSS-Klasse |
|
Sie können das Symbol für einen bestimmten Navigator ändern, indem Sie eine CSS-Klasse im Bedienfeld unter Authoring, Formularbeispiel <CLASS_NAME> bereitstellen. Sie können ein <CLASS_NAME>_nav für das Symbol des Navigators hinzufügen.
Variablen |
Beschreibung |
Registerkartennavigatoren |
|
|
Hintergrundfarbe für den gesamten Registerkartennavigator |
|
Hintergrundfarbe für die Registerkarte |
|
Schriftfarbe für die Registerkarte |
|
Hintergrundfarbe für die Registerkarte, wenn mit der Maus darauf gezeigt wird |
|
Schriftfarbe für die Registerkarte, wenn mit der Maus darauf gezeigt wird |
|
Hintergrundfarbe, wenn das Bedienfeld im Fokus ist (aktiv) |
|
Schriftfarbe, wenn das Bedienfeld im Fokus ist |
|
Hintergrundfarbe, wenn der Abschlussausdruck des Bedienfelds „true“ zurückgibt |
|
Schriftfarbe, wenn der Abschlussausdruck des Bedienfelds „true“ zurückgibt |
|
Hintergrundfarbe, wenn das Bedienfeld im Fokus war, aber der Abschlussausdruck „false“ zurückgibt |
|
Schriftartfarbe, wenn das Bedienfeld im Fokus war, aber der Abschlussausdruck „false“ zurückgibt |
|
Rahmenfarbe für die Registerkarte |
|
Schriftgröße für die Registerkarte |
|
Auffüllung für die Registerkarte |
|
Rand für die Registerkarte |
|
Rand für die vertikalen Registerkarten |
|
Rahmengröße für die Registerkarten |
|
Mindesthöhe der Registerkarten |
|
Einzug für die verschachtelten Registerkarten |
Assistentennavigatoren |
|
|
Hintergrundfarbe für den gesamten Assistentennavigator |
|
Hintergrundfarbe für den Assistenten |
|
Schriftfarbe für den Assistenten |
|
Hintergrundfarbe, wenn das Bedienfeld im Fokus ist (aktiv) |
|
Schriftfarbe, wenn das Bedienfeld im Fokus ist (fokussiert) |
|
Hintergrundfarbe, wenn der Abschlussausdruck des Bedienfelds „true“ zurückgibt |
|
Schriftfarbe, wenn der Abschlussausdruck des Bedienfelds „true“ zurückgibt |
|
Hintergrundfarbe, wenn das Bedienfeld im Fokus war, aber der Abschlussausdruck „false“ zurückgibt |
|
Schriftartfarbe, wenn das Bedienfeld im Fokus war, aber der Abschlussausdruck „false“ zurückgibt |
|
Farbe für den Assistenten |
|
Schriftgröße für den Assistenten |
|
Auffüllung für den Assistenten |
|
Rahmengröße für den Assistenten |
|
Rahmenfarbe des Aufzählungszeichens für den Assistentennavigator (Präfix für Beschriftung/Bezeichnung) |
|
Hintergrundfarbe der Statusleiste des Assistentennavigators |
|
Füllfarbe für die Statusleiste |
Akkordeonnavigatoren |
|
|
Auffüllung für Akkordeon |
Ein Bedienfeld enthält eine optionale Symbolleiste und entsprechenden Inhalt.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Hintergrundfarbe für das Bedienfeld |
|
Schriftgröße für den Bedienfeldtext |
|
Schriftfarbe für den Bedienfeldtext |
|
Auffüllung im Bedienfeld |
|
Schriftgröße der Bedienfeldbeschreibung |
|
Auffüllung der Bedienfeldbeschreibung |
|
Hintergrundfarbe für die Bedienfeldhilfe |
|
Indikatorrahmenfarbe für die Bedienfeldhilfe |
Der Bedienfeldknoten wird in Navigatoren und Inhalt unterteilt. Es
gibt keine separate Stilkomponente für den Inhalt. Die beschriebenen Variablen werden auf den Navigator sowie Inhalte angewendet.
Das oberste Bedienfeld (RootPanel) verfügt nicht über diese Klasse.
Diese Variablen beeinflussen die Kopfzeilenleiste, die auf einem Mobilgerät oder Geräten mit kleinem Bildschirm sichtbar ist, die Bedienfeldtitel und die Navigatoren „Weiter“ und „Zurück“ beinhalten.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Hintergrundfarbe für die Kopfzeilenleiste |
|
Schriftfarbe für den Text in der Kopfzeilenleiste |
|
Auffüllung für die Kopfzeilenleiste |
Diese Variablen beeinflussen den Scroll-Indikator, der als orangefarbener Pfeil auf einem Mobilgerät oder auf Geräten mit kleinem Bildschirm angezeigt wird. Der Scroll-Indikator zeigt an, dass es Inhalt gibt, der über den sichtbaren Bereich des Bildschirms hinausgeht. Sie können nach unten blättern, um diesen Inhalt anzuzeigen. Wenn Sie das Ende des Inhalts erreichen, wird der Pfeil nicht mehr angezeigt.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Feste Position eines Scroll-Indikators von unten |
|
Feste Position eines Scroll-Indikators von rechts |
|
Breite des Scroll-Indikators |
|
Höhe des Scroll-Indikators |
Diese Variablen in folgender Tabelle beeinflussen das feste Symbolleisten-Layout für Mobilgeräte.
CSS-Klasse |
|
Variablen |
Beschreibung |
|
Feste Position der Symbolleiste auf einem Mobilgerät von unten |
|
Feste Position der Symbolleiste auf einem Mobilgerät von oben |
|
Feste Position der Symbolleiste auf einem Mobilgerät von links |
|
Feste Position der Symbolleiste auf einem Mobilgerät von rechts |
|
Feste Position von Schaltflächensymbolen auf der Symbolleiste von oben |
|
Breite von Schaltflächensymbolen auf der Symbolleiste auf einem Mobilgerät |
|
Höhe der Schaltflächensymbole auf der Symbolleiste auf einem Mobilgerät |
|
Hintergrundfarbe der Symbolleiste auf einem Mobilgerät |
Das Design Einfache Registrierung unter /etc/clientlibs/fd/af/guidetheme/simpleEnrollment und die Kategorie guide.theme.simpleEnrollment
führen außerdem einige neue Variablen ein. Wenn Sie eine einfache Registrierung mit verbessertem Design erstellen möchten, können Sie folgende zusätzliche Variablen verwenden:
Variablen |
Beschreibung |
|
Hintergrundfarbe für Schaltfläche im Fokus |
|
Hintergrundfarbe für Schaltfläche beim Darüberbewegen des Mauszeigers |
|
Radius der Schaltfläche |
|
Hintergrundfarbe für Navigationsschaltflächen (Zurück/Weiter) |
|
Hintergrundfarbe für Navigationsschaltflächen (Zurück/Weiter) beim Darüberbewegen des Mauszeigers |
|
Hintergrundfarbe für Assistentennavigatoren und entsprechende Statusleiste beim ersten Rendern |
|
Hintergrundfarbe für aktuellen/aktiven Assistentennavigator und entsprechende Statusleiste |
|
Hintergrundfarbe für Assistentennavigatoren, die verwendet wurden, und entsprechende Statusleiste |
|
Rahmenfarbe zur Unterteilung des Containers in Navigatoren und Bedienfeld |
|
Farbe des unteren Rahmens, der die Registerkarten links trennt (Registerkartennavigatoren) |
|
Hintergrundfarbe für Navigatoren mit verschachtelten/untergeordneten/Unternavigatoren |