Klicken Sie auf die Schaltfläche Link hinzufügen, um Links zu erstellen.
In jeder Webhilfeausgabe, z. B. responsives HTML5 oder Frame-los, erhalten Sie eine Erfahrung, die jedem Portal eng entspricht und Navigation, Suche und andere Funktionen enthält. Die Ausgabe hat ein Look-and-Feel, das ein Benutzer gemäß Firmen-Branding oder anderen Richtlinien anpassen kann.
Zum Beispiel können Sie die Skin anpassen. Neben der Definition des visuellen Stils legt die Skin auch das Layout fest. Beispielsweise kann das Inhaltsverzeichnis eine Dropdown-Liste anstatt einer Baumstruktur sein. RoboHelp wird standardmäßig mit verschiedenen Skins bereitgestellt. Mit dem Skin-Editor können Sie jede Skin nach Ihren Bedürfnissen anpassen.
Sie können alle Skins in Ihrem Projekt im Bereich „Skins“ auf der Registerkarte „Ausgabe“ anzeigen.
Durch Doppelklick auf eine Skin wird der Skin-Editor geöffnet. Der Skin-Editor des Typs „Responsives HTML5“ unterscheidet sich vom Typ „Frame-los“.
Die meisten Skins haben zwei Arten von Seiten, die Startseite und die Themenseite. Die Startseite verfügt über ein Hero Image, eine Suchleiste, Inhaltsverzeichniskacheln und andere optionale Inhalte. Die Startseite ist optional und in einigen Skins nicht enthalten. Die Themenseite enthält den eigentlichen Inhalt, die Navigation, die Suche und andere Widgets.
Echtzeitansicht
Der Skin-Editor bietet eine interaktive Echtzeitansicht von Beispielinhalten. Bearbeitungen im Skin-Editor sind sofort in der Vorschau sichtbar. Sie können die Vorschau in der Desktop- oder mobilen Ansicht über die Symbolleiste umschalten.
Die Vorschau enthält auch eine hilfreiche Hervorhebung mit einem dicken roten Rand. Wenn Sie eine Klasse im Skin-Editor auswählen, wird dieser Bereich in der Vorschau hervorgehoben. Sie können die Hervorhebung in der Symbolleiste ausschalten.
So passen Sie die Skin an
Die Skin definiert das Ausgabeerlebnis. Die Eingabe stammt aus drei verschiedenen Quellen:
Alle Zeichenfolgen stammen aus der sprachspezifischen Beschriftungsdatei im Bereich Ausgabe > Beschriftungen. Die Beschriftungsdatei enthält Zeichenfolgen für alle Vorgaben, die Sie in den entsprechenden Abschnitten bearbeiten.
Mit den Einstellungen in der Ausgabevorgabe können Sie die Startseite, den Fußzeileninhalt, benutzerdefinierten Inhalt auf der Startseite, die PDF-Downloadschaltfläche usw. anzeigen.
Mit dem Skin-Editor können Sie entscheiden, ob Sie die Skin responsiv machen oder das Cookie-Annahmedialogfeld anzeigen möchten. In diesem Dokument wird die Anpassung im Skin-Editor behandelt. Dabei wird bei Bedarf auf die Ausgabevorgabe und den Abschnitt „Beschriftungen" verwiesen.
Allgemeine Einstellungen
Dieser Abschnitt befasst sich mit einigen allgemeinen Eigenschaften und dem Verhalten der Skin. Der Stil von Startseite und Themenseiten wird in den folgenden Abschnitten behandelt.
Responsive Einstellung
Alle Skins sind responsiv und passen sich basierend auf der Bildschirmauflösung an Desktop- und mobile Ansichten an. Sie können die Bildschirmauflösung steuern, bei der der Modus vom Desktop zur mobilen Ansicht wechseln muss. Sie können den Wert im Feld Layout > Allgemein > Maximale Mobilbreite festlegen. Sie können die responsive Einstellung unter Layout > Allgemein > Interaktiv deaktivieren.
DSGVO-Konformität
Die Datenschutz-Grundverordnung (DSGVO) schreibt vor, dass Services die ausdrückliche Erlaubnis eines Benutzers einholen müssen, bevor sie Daten oder Cookies im lokalen Speicher des Browsers speichern.
Sie können diese Konformität über die Einstellung „Layout“ > „Allgemein“ > „DSGVO-Konformität“ aktivieren. Einige Funktionen wie Favoriten, Inhaltsverzeichnisstatus und Breadcrumbs funktionieren ohne diese Einwilligung möglicherweise nicht optimal.
Designeinstellungen
Der Skin-Editor ermöglicht Ihnen die allgemeine Kontrolle über einige Aspekte des Stils. Sie können sie bei Bedarf lokal überschreiben. Definieren Sie die Schriftfamilie mit Layout > Allgemein > Layoutschriftart. Verwenden Sie Layout > Allgemein > Themenfarbe , um die Farbe für Text und Symbole festzulegen.
Die Änderungen gelten nicht für Symbole und Text, die nicht der Designfarbe folgen. Verwenden Sie Layout > Allgemein > Textfarbe für Suchhervorhebung und Layout > Allgemein > Hintergrundfarbe für Suchhervorhebung, um die Hervorhebungsfarbe der Suchbegriffe und die Hintergrundfarben zu definieren.
Barrierefreiheit
Alle Skins sind barrierefrei. Sie können eine Bildschirmsprachausgabe, Tastenkombinationen usw. für die Barrierefreiheit verwenden. Beim Navigieren mit der Tastatur wird der Fokusbereich mit einem Rahmen hervorgehoben.
Sie können die Rahmenfarbe mit der Einstellung Layout > Allgemein > Fokuskonturfarbe steuern.
Benutzerassets
Beim Anpassen der Skin benötigen Sie oft keine zusätzlichen Dateien. Es gibt aber auch einige erweiterte Änderungen, beispielsweise wenn Sie eine benutzerdefinierte Aktion für eine Schaltfläche festlegen und eine JavaScript-Funktion aufrufen müssen. Dann müssen Sie die JavaScript-Datei zur Skin hinzufügen und unter Layout > Benutzerassets die Schaltfläche Asset hinzufügen verwenden. Sie können alle explizit hinzugefügten Assets im Bereich Layout > Benutzerassets verwalten.
Startseite
Beim Anpassen der Skin benötigen Sie oft keine zusätzlichen Dateien. Es gibt aber auch einige erweiterte Änderungen, beispielsweise wenn Sie eine benutzerdefinierte Aktion für eine Schaltfläche festlegen und eine JavaScript-Funktion aufrufen müssen. Dann müssen Sie die JavaScript-Datei zur Skin hinzufügen und unter Layout > Benutzerassets die Schaltfläche Asset hinzufügen verwenden. Sie können alle explizit hinzugefügten Assets im Bereich Layout > Benutzerassets verwalten.
Die Startseite besteht aus vier Abschnitten. Der obere Bereich enthält das Logo, Links, die Hauptsuchleiste und das Hero Image. Der Kachelbereich enthält die Kacheln gemäß dem Inhaltsverzeichnis. Darauf folgen die benutzerdefinierte Startseite
und die Fußzeilenabschnitte.
Oberer Abschnitt
Der obere Abschnitt besteht aus verschiedenen Teilen, z. B. Logo, Titel, Kopfzeilenlinks, Filter und Favoriten. Der Abschnitt ähnelt der Themenseite. Sie können die Kopfzeilenlinks auf der Startseite über das Kontrollkästchen Startseite > Kopfzeilenlinks aktivieren. Die folgende Abbildung zeigt Details zur Klassenzuordnung als Hilfe für die Formatierung.
Element | Wert |
---|---|
1 | Oberer Abschnitt > container |
2 | Oberer Abschnitt > logo |
3 | Oberer Abschnitt > title |
4 | Schaltflächen > button-1 |
5 | Oberer Abschnitt > caption |
6 | Suchfeld > inner-box |
7 | Filter > filter-selected |
Suche
Die Suche auf der Startseite funktioniert genauso wie auf der Themenseite. Das Suchfeld verfügt über eine Such- und eine Löschschaltfläche. Die Suchvorschläge und Suchergebnisse werden ähnlich angezeigt. Die folgende Abbildung zeigt Details zur Klassenzuordnung als Hilfe für die Formatierung.
Element | Wert |
---|---|
1 | Suchfeld > icon |
2 | Suchfeld > text-field |
3 | Suchfeld > clear-icon |
4 | Suchergebnisse > close-icon |
5 | Suchergebnisse > results-header-label |
6 | Suchergebnisse > result-item-title |
7 | Suchergebnisse > result-item-summary |
8 | Suchergebnisse > result-item-path |
Inhaltsverzeichniskacheln
Die Kacheln auf der Startseite entsprechen den Elementen im ausgewählten Inhaltsverzeichnis für die Ausgabegenerierung. Die Startseite enthält Kacheln für Abschnitte und Seiten. Mit der Option Layout > Startseite > Drilldown-Inhaltsverzeichnis können Sie steuern, ob Kacheln nur für die oberste Ebene oder für jede Ebene im Inhaltsverzeichnis angezeigt werden sollen.
Jede Kachel besteht aus drei Teilen: Bild, Beschreibung und Titel. Sie können im Skin-Editor eine Reihe von Bildern definieren, die für die Kacheln verwendet werden sollen. Alternativ können Sie die Option Layout > Startseite > Kacheln des Inhaltsverzeichnisses verwalten aktivieren, um die Bilder im Inhaltsverzeichnis für jeden Abschnitt und jede Seite zu definieren. Diese Option bietet Ihnen mehr Flexibilität bei der Verwaltung der Kacheln. Wenn Sie eine bestimmte Kachel nicht wünschen, geben Sie das Bild nicht an. Der Titel ist derselbe wie im Inhaltsverzeichnis.
Das Beschreibungsfeld muss mit der Option Layout > Startseite > Kachelbeschreibung aktiviert werden. Der Wert der Beschreibung ergibt sich aus dem, was Sie in den Themeneigenschaften definieren.
Die folgende Abbildung zeigt Details zur Klassenzuordnung als Hilfe für die Formatierung. Beispiel: Sie möchten überhaupt keine Inhaltsverzeichniskacheln auf der Startseite anzeigen. Navigieren Sie in diesem Fall zu Startseite > Inhaltsverzeichniskacheln > container > Layout > Anzeigen, und wählen Sie Keine im Dropdown-Menü aus.
Element | Wert |
---|---|
1 | Inhaltsverzeichniskacheln > container |
2 | Inhaltsverzeichniskacheln > tile-box |
3 | Inhaltsverzeichniskacheln > image-box |
4 | Inhaltsverzeichniskacheln > title |
5 | Inhaltsverzeichniskacheln > description |
Themenbereich
Der Themenbereich ist ein Platzhaltercontainer in Inhaltsverzeichniskacheln, wenn Sie zusätzlichen Inhalt hinzufügen möchten. Manchmal möchten Sie möglicherweise den Bereich „Inhaltsverzeichniskacheln“ ausschalten und nur benutzerdefinierte Inhalte verwenden. Um Ihre Inhalte im Themenbereich anzuzeigen, wählen Sie das HTML-Thema mit dem Inhalt im Feld Layout > Startseite der Ausgabevorgabe aus.
Fußzeile
Um die Fußzeile auf der Startseite anzuzeigen, müssen Sie ein HTML-Thema mit dem Fußzeileninhalt auswählen. Geben Sie das Thema im Feld Layout > Fußzeileninhalt der Ausgabevorgabe an.
Themenseite
Die Themenseite enthält drei Bereiche: Kopfzeile, Textkörper und Fußzeile. Der Kopfzeilenbereich enthält ein Logo, einen Titel, Links auf oberster Ebene und ein Suchfeld. Der Textkörperbereich enthält einen linken, einen mittleren und einen rechten Abschnitt. Der linke Abschnitt enthält die Bereiche „Inhaltsverzeichnis“, „Index“ und „Glossar“. Der mittlere Abschnitt verfügt über einen Symbolleistenbereich und den Themeninhaltsbereich. Im rechten Abschnitt befinden sich die Bereiche „Inhaltsverzeichnis des Themas“, „Favoriten“ und „Dynamische Filter“.
Die Layouts verschiedener Skins unterscheiden sich. Die Abbildungen in dieser Dokumentation verwenden die Skin „Orange“. Sie sind auch für die anderen Skins relevant. Ebenso unterscheiden sich die Desktop- und die mobile Ansicht. Dieses Dokument behandelt die Desktopansicht.
Kopfzeile
Die Kopfzeile enthält mehrere Abschnitte. Sie können die Stile und das Layout mit den jeweiligen Klassen steuern. Um beispielsweise die Höhe zu vergrößern, bearbeiten Sie das Feld Themenseite > Kopfzeile > container > LAYOUT > Höhe.
Element | Wert |
---|---|
1 | Kopfzeile > container |
2 | Kopfzeile > logo-box |
3 | Kopfzeile > logo |
4 | Kopfzeile > title |
5 | Kopfzeilenlinks > container |
6 | Kopfzeilenlinks > list |
7 | Kopfzeilenlinks > item |
8 | Kopfzeilenlinks > icon-000N |
9 | Suchfeld > search |
10 | Suchfeld > search-icon |
Logo
Um ein Logo festzulegen, navigieren Sie zum Feld Themenseite > Kopfzeile > logo > HINTERGRUND > Bildpfad.
Klicken Sie auf die Schaltfläche „Durchsuchen“, um das Bild für das Logo auszuwählen. Eine Kopie des Bildes wird im Skin-Ordner erstellt, wenn Sie das Bild von außen auswählen. Verwenden Sie die Felder „Höhe“ und „Breite“, um die Größe des Bildes zu ändern.
Für die Startseite und die Themenseiten muss das Logo separat angegeben werden. Überprüfen Sie auch, ob das Logo in der mobilen Ansicht angemessen angezeigt wird.
Titel
Der Text für den Titel stammt aus dem Feld Titel in der Ausgabevorgabe. Sie können die Größe, die Schriftart, die Textgröße und andere Attribute über den Skin-Editor steuern. Wählen Sie Themenseite > Kopfzeile > title > SCHRIFT aus, um Schriftfamilie, Schriftgröße und andere Eigenschaften festzulegen.
Wählen Sie Themenseite > Kopfzeile > title > LAYOUT aus, um die Breite zu steuern. Verwenden Sie linken Abstand oder einen linken Rand, um den Abstand zum Logo zu verwalten, usw.
Verwenden Sie Layout > Allgemein, um eine gemeinsame Schriftfamilie und -farbe für die gesamte Skin festzulegen.
Zeigen Sie eine Vorschau in der mobilen Ansicht an, um zu bestimmen, ob Anpassungen für Mobilgeräte erforderlich sind.
Kopfzeilenlinks
Kopfzeilenlinks werden auf der rechten Seite der Kopfzeile angezeigt. Beim Erstellen einer Skin gibt es keine Kopfzeilenlinks. Sie können die Links im Abschnitt Layout > Kopfzeilenlinks definieren. Führen Sie folgende Schritte durch.
Sie können jeden Link auf der Registerkarte Themenseite formatieren. Sie sehen das Layout der Felder oben in der Kopfzeilenabbildung. Verwenden Sie Themenseite > Kopfzeilenlinks > item, um die Links mit Schriftgröße, Textfarbe, Textformatierung usw. zu formatieren. Um das Symbol für einen beliebigen Link festzulegen, wählen Sie Themenseite > Kopfzeilenlinks > icon-000N aus, und führen Sie die folgenden Schritte aus. (Hinweis: N steht für die Symbolnummer, die in Schritt 5 oben definiert wurde.)
In der mobilen Ausgabe sehen diese Links anders aus. Wählen Sie oben eine mobile Ansicht aus, und legen Sie dann die relevanten Elemente aus der Gruppe „Kopfzeilenlinks“ fest.
Suche
Die Suche hat viele Komponenten und eine komplexe Struktur. Sie können allgemeine Teile wie Symbolfarbe und Schriftfamilie mit den Designeinstellungen auf der Registerkarte Layout ändern. Im folgenden Screenshot mit Beschriftungen sehen Sie jedoch, dass Sie die meisten Komponenten anpassen können.
Element | Wert |
1 | Suchfeld > search-selected |
2 | Suchfeld > searchbar |
3 | Suchfeld > search-icon |
4 | Suchfeld > search-textfield |
5 | Suchfeld > clear-icon |
6 | Suchfeld > predictions-box |
7 | Suchfeld > prediction-item |
8 | Suchergebnisse > results-outer-box |
9 | Suchergebnisse > results-inner-box |
10 | Suchergebnisse > results-header |
11 | Suchergebnisse > results-close |
12 | Suchergebnisse > results-header-label |
13 | Suchergebnisse > result-item |
14 | Suchergebnisse > result-item-title |
15 | Suchergebnisse > result-item-summary |
16 | Suchergebnisse > result-item-path |
17 | Suchergebnisse > results-footer |
18 | Suchergebnisse > paginator |
19 | Suchergebnisse > prev-page |
20 | Suchergebnisse > paginator-label |
21 | Suchergebnisse > next-page |
-
Sie können statische Kopf- oder Fußzeilen sowohl für Die Startseite als auch für die Themenvorlagenseite aktivieren oder deaktivieren.
- Um eine statische Fußzeile für die Startseite zu aktivieren, wählen Sie unter Layout die Option Startseite aus. Klicken Sie hier, um die Umschaltfläche für Statische Fußzeile zu aktivieren.
- Um eine statische Kopf- und Fußzeile für die Themenseite zu aktivieren, wählen Sie unter „Layout“ „Themenseite“ aus. Klicken Sie hier, um die Umschaltfläche für Statische Kopfzeile und Statische Fußzeile zu aktivieren.
Vorhandene Skin
Die Optionen „Statische Kopfzeile“ und „Statische Fußzeile“ sind für eine vorhandene Skin standardmäßig deaktiviert. Sie können die Option aktivieren, indem Sie die obigen Schritte ausführen.
Neue Skin
Die statische Kopfzeile ist standardmäßig aktiviert und die statische Fußzeile ist standardmäßig deaktiviert.
Textkörper
Der Textkörper befindet sich im mittleren Teil der Themenseite. Der Textkörper besteht aus vier Teilen: Symbolleiste, linker Bereich, Themeninhaltsbereich und rechter Bereich.
Symbolleiste
Jede Skin verfügt über Symbolleistenschaltflächen für verschiedene Benutzeraktionen. Sie finden die Liste im Abschnitt Themenseite > Schaltflächen. Sie können Elemente in der Liste umbenennen, neu anordnen und löschen. Klicken Sie auf Schaltfläche hinzufügen, um eine neue Schaltfläche hinzuzufügen. Um die Eigenschaften einer Schaltfläche zu definieren, wählen Sie sie in der Dropdown-Liste Schaltfläche auswählen aus. Sie können die folgenden Eigenschaften angeben.
- ID: Die ID wird automatisch generiert, um jeder Schaltfläche einen eindeutigen Wert zu verleihen.Themenseite > Abschnitt „Schaltflächen“ verwendet diese ID, um die Einstellungen für eine bestimmte Schaltfläche zu bearbeiten.
- Titel: Der Titel wird als QuickInfo der Schaltfläche angezeigt. Die Schaltfläche zeigt nur das Symbol an. Verwenden Sie die Option Layout > Themenseite > Schaltflächenname, um den Namen auf den Schaltflächen anzuzeigen. Der Wert des Namens der Schaltfläche ist mit dem Titel identisch.
- Statustitel umschalten: Wenn eine Schaltfläche den Status ändert, können Sie einen anderen Titel für den umgeschalteten Status angeben. Beispiel: Schaltfläche Alle einblenden/ausblenden.
- URL: Geben Sie die URL an, die bei einem Klick auf eine Schaltfläche ausgelöst werden soll. Dabei kann es sich um ein beliebiges lokales Thema, einen Weblink oder einen E-Mail-Link handeln.
- JavaScript: Fortgeschrittene Benutzer können ihren JavaScript-Funktionsnamen für verschiedene Statuswerte der Schaltfläche angeben. Benutzerdefinierte JavaScript-Dateien können über den Abschnitt Layout > Benutzerassets an die Skin angehängt werden.
Die folgende Abbildung veranschaulicht alle Klassen für die Symbolleiste.
Element | Wert |
---|---|
1 | Symbolleiste > toolbar-box |
2 | Symbolleiste > panel-hide |
3 | Symbolleiste > panel-show |
4 | Schaltflächen > button-0 |
5 | Schaltflächen > button-icon |
Teilen in sozialen Medien
Die Schaltfläche zum Teilen auf der Symbolleiste zeigt die Liste der Optionen an, die beim Klicken angezeigt werden. Jede Skin verfügt über eine vordefinierte Liste von Freigabeoptionen. Verwenden Sie den Abschnitt Layout > Freigabeoptionen, um die Liste anzupassen. Klicken Sie auf die Schaltfläche Freigabeoption hinzufügen, um eine neue Option hinzuzufügen.
Wählen Sie die Option in der Dropdown-Liste Option auswählen aus, um sie zu ändern. Führen Sie für die Anpassung folgende Schritte durch:
- ID: Diese ID wird automatisch generiert, um jeder Schaltfläche einen eindeutigen Wert zu verleihen. Sie wird beim Bearbeiten der Einstellungen im Abschnitt Themenseite > Freigabeschaltflächen verwendet.
- Titel: Definiert die Beschriftung der Schaltfläche.
- URL: Der Link, der beim Klicken auf die Schaltfläche ausgelöst wird. Dienstanbieter nutzen feste URLs für Social-Media-Schaltflächen.
- QuickInfo: Definiert die QuickInfo der Schaltfläche.
Die folgende Abbildung veranschaulicht alle Klassen für das Freigabe-Widget.
Element | Wert |
1 | Freigabeschaltflächen > container |
2 | Freigabeschaltflächen > list |
3 | Freigabeschaltflächen > button |
4 | Freigabeschaltflächen > button-icon |
Linke Bereiche
Auf der linken Seite befinden sich die Bereiche „Inhaltsverzeichnis“, „Index“ und „Glossar“. Der Bereich „Inhalt“ ist obligatorisch. Index und Glossar sind optional. Sie können die Bereiche „Index“ und „Glossar“ im Abschnitt Layout > Themenseite ein- und ausschalten. Außerdem können Sie den Bereich steuern, der zuerst für Benutzer angezeigt wird. Wenn Sie in der Ausgabevorgabe nicht Index- und Glossarinhalt auswählen, wird der entsprechende Bereich nicht angezeigt.
Die Namen der Bereichsregisterkarten stammen aus Beschriftungen. Wechseln Sie zur Registerkarte „Ausgabe“ der Anwendung, und öffnen Sie den Bereich „Beschriftungen“ in der linken Symbolleiste. Wählen oder erstellen Sie eine Beschriftungsdatei für die gewünschte Sprache. Wenn Sie die Datei zur Bearbeitung öffnen, finden Sie auf der Registerkarte „Frame-los“ alle relevanten Zeichenfolgen für die Ausgabe.
Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Inhaltsverzeichnisbereichs.
Element | Klasse |
---|---|
1 | Linker Bereich > container |
2 | Linker Bereich > tab-list |
3 | Linker Bereich > tab |
4 | Linker Bereich > selected-tab |
5 | Linker Bereich > toc |
6 | Linker Bereich > title-level-0 |
7 | Linker Bereich > collapse-icon |
8 | Linker Bereich > selected-title |
9 | Linker Bereich > selected-icon |
10 | Linker Bereich > expand-icon |
11 | Linker Bereich > topic-icon |
Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Indexbereichs.
Element | Klasse |
---|---|
1 | Index > search-box |
2 | Index > textfield |
3 | Index > keyword-level-0 |
4 | Index > selected-keyword |
Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Glossarbereichs.
Element | Klasse |
1 | Glossar > search-clear-icon |
2 | Glossar > glossary |
3 | Glossar > definition |
Themenbereich
Der Themenbereich besteht aus drei Teilen:
- Oben befinden sich Breadcrumbs.
- Themeninhalte stehen in der Mitte.
- Unten sehen Sie die Suchabfolge.
Verwenden Sie eine Formatvorlage, um den Themeninhalt zu formatieren. Sie können die Masterseite verwenden, um die Formatvorlage zum Zeitpunkt der Ausgabegenerierung zu überschreiben.
Breadcrumbs oben zeigen die Hierarchie des aktuellen Themas gemäß dem Inhaltsverzeichnis an. Sie können am Anfang eine Beschriftung aufweisen, die als Link zum Standardthema fungieren kann. Der Text dieser Beschriftung stammt aus dem Feld Ausgabe > Beschriftungen > (Sprachdatei) > FRAME-LOS > BreadcrumbStart in der sprachspezifischen Beschriftungsdatei. Verwenden Sie das Kontrollkästchen Layout > Themenseite > Breadcrumbs-Startseiten-Hyperlink, um die Beschriftung statisch zu machen oder nicht.
Die meisten Skins zeigen am unteren Rand eine Suchabfolge an. Verwenden Sie die Option Layout > Themenseite > Abfolge im rechten Fenster, um sie an den unteren Rand des rechten Bereichs zu verschieben. Einige Skins zeigen sie oben an.
Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Themenbereichs.
Element | Klasse |
---|---|
1 | Breadcrumbs > container |
2 | Breadcrumbs > label |
3 | Breadcrumbs > breadcrumbs-separator |
4 | Breadcrumbs > active-topic |
5 | Mittlerer Bereich > topic-box |
6 | Suchabfolge > container |
7 | Suchabfolge > prev-box |
8 | Suchabfolge > next-box:after |
Rechter Bereich
Der rechte Bereich enthält verschiedene Funktionen wie Mini-Inhaltsverzeichnis, Favoriten, dynamischer Filter und Freigabeoptionen. Er enthält auch eine Symbolleiste mit Schaltflächen und einige Schaltflächen am unteren Rand. Sie können den rechten Bereich ausblenden. Verwenden Sie die Einstellung Layout > Themenseite > Rechter Bereich, um den Bereich auszublenden. Fügen Sie die Schaltflächen des rechten Bereichs der Hauptsymbolleiste hinzu, falls Sie den rechten Bereich ausblenden möchten.
Es gibt drei Schaltflächen oben und zwei unten. Optional können Sie die Navigation durch die Suchabfolge zusammen mit den Schaltflächen mit der Option Layout > Themenseite > Abfolge im rechten Fenster unten anzeigen lassen.
Schaltflächen und Mini-Inhaltsverzeichnis
Das Mini-Inhaltsverzeichnis oder das Themen-Inhaltsverzeichnis wird standardmäßig im rechten Bereich angezeigt. Verwenden Sie die Einstellung Layout > Mini-Inhaltsverzeichnis, um die Überschriftenebenen zu steuern. Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren der Symbolleiste und des Mini-Inhaltsverzeichnisses.
Element | Klasse |
1 | Rechter Bereich > container |
2 | Rechter Bereich > fav-button |
3 | Rechter Bereich > print-button |
4 | Rechter Bereich > highlight-remove-button |
5 | Mini-Inhaltsverzeichnis > caption |
6 | Mini-Inhaltsverzeichnis > selected-item |
7 | Mini-Inhaltsverzeichnis > item |
8 | Rechter Bereich > pageup-button |
9 | Rechter Bereich > fullscreen-button |
Favoriten
Benutzer können jedes Thema als Favoriten markieren und die Liste später erneut aufrufen. Die Liste wird auf der rechten Seite angezeigt, wenn der Benutzer in der Hauptsymbolleiste auf die Schaltfläche „Favoriten“ klickt. Benutzer können jeden Favoriten löschen, indem sie auf die Bleistiftschaltfläche klicken, um in den Bearbeitungsmodus zu gelangen, und dann die Änderungen vornehmen. Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren des Favoritenbereichs.
Element | Klasse |
1 | Favoriten > label |
2 | Favoriten > edit-button |
3 | Favoriten > close-button |
4 | Favoriten > item |
5 | Favoriten > delete-button |
Dynamischer Inhaltsfilter
Dynamische Inhaltsfilteroptionen sind nur sichtbar, wenn für Ihre Inhalte ein Filter definiert ist. Diesen können Sie über die Ausgabevorgabe definieren. Die Symbolleiste enthält eine Schaltfläche zum Anzeigen der Filteroptionen im rechten Bereich. Benutzer können auf dieselbe Schaltfläche klicken, um sie auszublenden. Ausgewählte Filter werden oben über dem Themenbereich angezeigt. Der Filtertext stammt aus dem, was Sie im Bereich „Dynamischer Inhaltsfilter“ angegeben haben. Der Rest des Textes stammt aus dem Abschnitt „Frame-los“ der Beschriftungsdatei.
Die folgende Abbildung veranschaulicht alle Klassen für dynamische Inhaltsfilter.
Element | Klasse |
---|---|
1 | Filter > caption |
2 | Filter > group-label |
3 | Filter > resetall |
4 | Filter > filter-selected |
5 | Filter > filter-selected-remove |
Fußzeile
Sie können die Fußzeile für die Startseite und die Themenseiten als beliebiges HTML-Thema definieren. Geben Sie die Datei im Feld Layout > Fußzeileninhalt der Ausgabevorgabe an. Sie können das Feld für den Fußzeilenbereich mit der Klasse Themenseite > Fußzeile > Container formatieren.
Dialogfeld für die Annahme von Cookies
DSGVO steht für Datenschutz-Grundverordnung. Sie ist der Kern der europäischen Gesetzgebung zum digitalen Datenschutz. Die DSGVO und einige andere Vorschriften schreiben vor, dass Benutzer ihre ausdrückliche Einwilligung erteilen, bevor Daten oder Cookies im lokalen Speicher des Browsers gespeichert werden. Mit der Einstellung Layout > Allgemein > DSGVO-Konformität können Sie diese Konformität aktivieren. Dem Benutzer wird beim ersten Besuch ein Cookie-Annahmedialogfeld angezeigt. Dort kann er Cookies akzeptieren oder ablehnen. Der für die Annahme bereitgestellte Standardtext erklärt, warum die Cookies benötigt werden. Sie können den Text über die Beschriftungen anpassen. Die folgende Abbildung veranschaulicht alle Klassen zum Formatieren dieses Dialogfelds.
Elemente | Klasse |
1 | Cookie-Dialogfeld > browser-cookies-allowed |
2 | Cookie-Dialogfeld > allow-body |
3 | Cookie-Dialogfeld > reject-button |
4 | Cookie-Dialogfeld > accept-button |
Erweiterte Bearbeitung
Der Skin-Editor ist in den meisten Anwendungsfällen ausreichend, um die Skin anzupassen. Wenn Sie sich gut damit auskennen und erweiterte Anpassungen vornehmen möchten, sind die folgenden Details hilfreich.
- Beim Erstellen einer Skin werden nur wenige Dateien in den Projektordner kopiert. Klicken Sie mit der rechten Maustaste auf die Skin, und wählen Sie In Explorer anzeigen aus, um den Ordner zu öffnen.
- Die Vorlagendateien homepage.ejs und topicpage.ejs enthalten das Layout der Seite. Sie können diese Dateien wie eine HTML-Datei bearbeiten. Wenn Adobe ein Update veröffentlicht, werden diese Dateien möglicherweise überschrieben.
- Die Datei layoutDiff.css enthält alle CSS-Klassen zum Ändern des Stils. Alle Änderungen, die im Skin-Editor vorgenommen werden, werden darin gespeichert. Sie können Änderungen direkt in dieser Datei vornehmen, dürfen die Struktur der Datei aber nicht ändern.