Laden Sie die Datei scss-files.zip herunter und extrahieren Sie den Inhalt.
Zuletzt aktualisiert am
8. März 2022
Dieser Artikel enthält Links zu den neuesten und archivierten Versionen von RoboHelp-Bildschirm-Layouts und Profilen. Sie können diese Bildschirm-Layouts und Profile herunterladen, in Ihrem RoboHelp-Projekt verwenden und Responsive HTML- oder MultiScreen HTML5-Ausgabe generieren.
In diesem Abschnitt werden die Responsive HTML5-Layouts aufgeführt, die Sie in Ihren RoboHelp-Projekten unter Version 2017 verwenden können.
Laden Sie die Responsive-Bildschirmlayout aus der Liste unten herunter, ändern Sie die Dateinamenerweiterung von .zip zu .slz und importieren Sie diese dann in Ihr Projekt. Weitere Kontextinformationen finden Sie unter Bildschirmlayouts im RoboHelp Benutzerhandbuch.
Indigo
Ein Frame-los-Responsive HTML5-Layout mit erstklassiger Suche und Navigation.
Herunterladen
Ocean
Ein Frame-los-Layout, mit dem Ihre Benutzer ihre Lieblingsthemen in Ihrer Hilfe mit einem Lesezeichen versehen können.
Hinweis:
Ab Update 2 von RoboHelp ist das Ocean-Layout des Produkts veraltet.
Herunterladen
Benutzerdefinierte Layouts
Hinweis:
Um Layouts anzupassen, müssen Sie SCSS-, CSS- und JavaScript-Technologien verstehen. SCSS ist eine Erweiterung von CSS, mit der Sie Variablen, Mixins, verschachtelte Regeln und andere einfache Programmiergrundlagen verwenden können, um ein CSS zu erstellen.
Sie können ein Responsive-Layout auf zwei Arten anpassen:
- Passen Sie das Aussehen der Ausgabe mithilfe von Stylesheets an
- Passen Sie das Verhalten, wie z. B. Bearbeiten der Suche auf eine bestimmte Art von JavaScript an
In den folgenden Abschnitten werden diese beiden Methoden der Anpassung des Layouts erläutert.
Anpassung von Stylesheets
-
Hinweis:
Die Datei scss-files-2017.zip enthält die SCSS-Dateien für die Layouts Azurblau, Dunkelgrau und Indigo. Außerdem finden Sie andere Konfigurationsdateien, die von diesen Layouts verwendet werden, z. B. Layout-Konfigurationen von rechts nach links.
-
Ändern Sie die.scss-Datei des Layouts, das Sie verwenden möchten.
Hinweis:Wenn Sie beispielsweise das Indigo-Layout ändern möchten, ändern Sie die Datei layout.scss, die im Ordner scss-files-2017\indigo verfügbar ist.
-
Verwenden Sie einen beliebigen.scss-Dateicompiler, um eine CSS-Datei aus der aktualisierten .scss-Datei zu generieren.
Hinweis:Die CSS-Dateien, die mit RoboHelp-Layouts gebündelt werden, wurden mit einem Drittanbieter-Werkzeug namens Koala kompiliert. Sie können entweder Koala oder ein anderes Werkzeug verwenden, um die .scss-Datei zu kompilieren.
Hinweis:Wenn Sie die RTL CSS generieren möchten, öffnen Sie die Datei scss-files-2017\_rtl.scss in einem Texteditor. Setzen Sie$if-rtl auf true und benennen Sie dann die erstelltelayout.css in layout_rtl.css um.
-
Extrahieren Sie den Inhalt der Layout-Zip-Datei (Indigo.zip oder Ocean.zip) und ersetzen Sie ihn durch die Datei layout.css in der Zip-Datei mit der aktualisierten .css-Datei, die Sie in Schritt 3 erstellt haben.
Hinweis:Die Datei layout.css ist unter dem Stammordner der Layout-Zip-Datei verfügbar. Für das Dunkelgrau-Layout lautet der Speicherort der CSS-Datei beispielsweise scss-files-2017\indigo\layout.css.
-
Erstellen Sie die ZIP-Datei mit der aktualisiertenlayout.css neu.
-
Benennen Sie die ZIP-Datei in.slz und importieren Sie sie erneut in das Projekt.
JavaScript-Anpassung
Sie können das Verhalten bestimmter Ereignisse in Ihrem Layout auch ändern, indem Sie die zugehörigen JavaScript-Dateien anpassen. Wenn Sie beispielsweise einen Fehler, der mit JavaScript zu tun hat, sehen, können Sie den JavaScript-Code ändern, um das Problem zu beheben.
Führen Sie zur Anpassung des Layouts mithilfe von JavaScripts folgende Schritte aus:
-
Greifen Sie auf den Ordner "scripts" auf Ihrem System zu:
<RoboHelp_Installationsverzeichnis>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
Hinweis:Der Ordner scripts enthält vier Dateien: common.js, layout.js, rh.js und topic.js. Jede dieser JavaScript-Dateien enthält Code, der das Verhalten der verschiedenen Komponenten in Ihrem Layout steuert.
-
Erstellen Sie eine Sicherungskopie der .js Datei, an der Sie arbeiten möchten, und ändern Sie dann die .js-Dateien gemäß Ihren Anforderungen.
-
Benennen Sie die geänderte Datei in<Dateiname>.min.js um. Benennen Sie zum Beispiel diecommon.js-Datei in common.min.jsum.
Hinweis:Anstatt die.js-Dateien manuell in.min.js umzubenennen,, wird empfohlen, ein Minimierungswerkzeug (wie z. B.JavaScript minifier) zu verwenden, um die aktualisierten.js-Dateien zu aktualisieren.
-
Ersetzen Sie die JavaScript-Dateien im Ordner scripts im RoboHelp-Installationsverzeichnis (siehe Schritt 1). Alternativ können Sie die Skripts im veröffentlichten Ausgabeordner (des Projekts) ersetzen. Der Speicherort zum Speichern der aktualisierten JavaScript-Dateien in Ihrem Projekt lautet:
<Projektordner>\template\scripts
Wenn Sie die Skripts im RoboHelp-Installationsverzeichnis ersetzen, werden alle nachfolgenden Ausgaben mit den angepassten .js Dateien generiert.
Wenn Sie die Skripts im veröffentlichten Ausgabeordner ersetzen, verfügt nur das Projekt über die aktualisierten .js Dateien. Wenn Sie die Projektausgabe neu generieren, gehen alle Anpassungen verloren.
Laden Sie die Responsive-Bildschirmlayout aus der Liste unten herunter, ändern Sie die Dateinamenerweiterung von .zip zu .slz und importieren Sie diese dann in Ihr Projekt. Weitere Kontextinformationen finden Sie unter Bildschirmlayouts im RoboHelp Benutzerhandbuch.
Das Responsive Layout gibt jedem Gerät automatisch ein optimiertes Bild. Mit dem Responsive Layout können Sie Ihren Hilfeinhalt auf allen Geräten wie Desktop, Tablett oder Mobiltelefon gleichzeitig verwenden.
Azurblau
Herunterladen
Dunkelgrau
Herunterladen
Benutzerdefinierte Layouts
Hinweis:
Um Layouts anzupassen, müssen Sie SCSS-, CSS- und JavaScript-Technologien verstehen. SCSS ist eine Erweiterung von CSS, mit der Sie Variablen, Mixins, verschachtelte Regeln und andere einfache Programmiergrundlagen verwenden können, um ein CSS zu erstellen.
Sie können ein Responsive-Layout auf zwei Arten anpassen:
- Passen Sie das Aussehen der Ausgabe mithilfe von Stylesheets an
- Passen Sie das Verhalten, wie z. B. Bearbeiten der Suche auf eine bestimmte Art von JavaScript an
In den folgenden Abschnitten werden diese beiden Methoden der Anpassung des Layouts erläutert.
Anpassung von Stylesheets
-
Laden Sie den Inhalt der Datei scss-files.zip herunter.
Hinweis:Die Datei scss-files.zip enthält die .scss-Dateien für azurblaue und dunkelgraue Layouts. Außerdem finden Sie andere Konfigurationsdateien, die von diesen Layouts verwendet werden, z. B. Layout-Konfigurationen von rechts nach links.
-
Ändern Sie die.scss-Datei des Layouts, das Sie verwenden möchten.
Hinweis:Wenn Sie beispielsweise das Azurblau-Layout ändern möchten, ändern Sie die layout.scss-Datei, die im Ordner scss-files\scss\Azure_Blue verfügbar ist.
-
Verwenden Sie einen beliebigen.scss-Dateicompiler, um eine CSS-Datei aus der aktualisierten .scss-Datei zu generieren.
Hinweis:Die CSS-Dateien, die mit RoboHelp-Layouts gebündelt werden, wurden mit einem Drittanbieter-Werkzeug namens Koala kompiliert. Sie können entweder Koala oder ein anderes Werkzeug verwenden, um die .scss-Datei zu kompilieren.
Hinweis:Wenn Sie die RTL CSS generieren möchten, öffnen Sie diescss-files\scss\_rtl.scss-Datei in einem Texteditor. Setzen Sie$if-rtl auf true, benennen Sie dann die erstelltelayout.css in layout_rtl.css um.
-
Extrahieren Sie den Inhalt der Layout-Zip-Datei (Azure_Blue.zip oder Charcoal_Grey.zip) und ersetzen Sie ihn durch dielayout.css-Datei in der Zip mit der aktualisierten .css-Datei, die Sie in Schritt 3 erstellt haben.
Hinweis:Die layout.css-Datei ist unter dem Stammordner der Layout-Zip-Datei verfügbar. Beispiel: Für das dunkelgraue Layout ist der Speicherort der CSS-Dateiscss-files\scss\Charcoal_Grey\layout.css.
-
Erstellen Sie die ZIP-Datei mit der aktualisiertenlayout.css neu.
-
Benennen Sie die ZIP-Datei in.slz und importieren Sie sie erneut in das Projekt.
JavaScript-Anpassung
Sie können das Verhalten bestimmter Ereignisse in Ihrem Layout auch ändern, indem Sie die zugehörigen JavaScript-Dateien anpassen. Wenn Sie beispielsweise einen Fehler, der mit JavaScript zu tun hat, sehen, können Sie den JavaScript-Code ändern, um das Problem zu beheben.
Führen Sie zur Anpassung des Layouts mithilfe von JavaScripts folgende Schritte aus:
-
Laden Sie den Inhalt der Datei scss-files.zip -Datei herunter und extrahieren Sie ihn.
Hinweis:Die ZIP-Datei enthält vier Dateien: common.js, layout.js, rh.js und topic.js. Jede dieser JavaScript-Dateien enthält Code, der das Verhalten der verschiedenen Komponenten in Ihrem Layout steuert.
-
Ändern Sie die .js-Dateien gemäß Ihren Anforderungen.
-
Benennen Sie die geänderte Datei in<Dateiname>.min.js um. Benennen Sie zum Beispiel diecommon.js-Datei in common.min.jsum.
Hinweis:Anstatt die.js-Dateien manuell in.min.js umzubenennen,, wird empfohlen, ein Minimierungswerkzeug (wie z. B.JavaScript minifier) zu verwenden, um die aktualisierten.js-Dateien zu aktualisieren.
-
Ersetzen Sie die JavaScript-Dateien im Ordner scripts im RoboHelp-Installationsverzeichnis:
<RoboHelp_Installationsverzeichnis>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
Alternativ können Sie die Skripts im veröffentlichten Ausgabeordner (des Projekts) ersetzen. Der Speicherort zum Speichern der aktualisierten JavaScript-Dateien in Ihrem Projekt lautet:
<Projektordner>\template\scripts
Wenn Sie die Skripts im RoboHelp-Installationsverzeichnis ersetzen, werden alle nachfolgenden Ausgaben mit den angepassten .js-Dateien generiert.
Wenn Sie die Skripts im veröffentlichten Ausgabeordner ersetzen, verfügt nur das Projekt über die aktualisierten .js-Dateien. Wenn Sie die Projektausgabe neu generieren, gehen alle Anpassungen verloren.
In diesem Abschnitt werden die Responsive HTML5-Layouts, die Sie in Ihrem RoboHelp 11-Projekte verwenden können, aufgeführt.
Theme_1 Standard
Das Responsive Layout gibt jedem Gerät automatisch ein optimiertes Bild. Mit dem Responsive Layout können Sie alle Geräten gleichzeitig verwenden.
Herunterladen
Theme 2_Government layout
Ein formal klassisches Format mit dunklen meergrünen und grauen Akzenten für Banner und Überschriften.
Herunterladen
Theme_3 Black
Ein formal klassisches Format mit schwarzen Akzenten für Banner und Überschriften.
Herunterladen
In diesem Abschnitt werden die Responsive HTML5-Layouts, die Sie in Ihrem RoboHelp (2015 release) oder 11-Projekte verwenden können, aufgeführt.
Desktop-Layouts
- Desktop-Layout: Ein grau-brauner Stil kann einfach navigiert werden, mit dem Inhaltsverzeichnis, Index und Glossar auf der linken Seite. Dieses Layout für den Desktop ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: iPhone, iPad, Android-Telefon, Tablet und Kindle Fire.
Herunterladen
- Katalog: Tiefe Türkisbanner und Schlagschatten-Bedienfelder für Produkte und Dienste. Ungewöhnliche Anzeige des Inhaltsverzeichnisses, des Index und des Glossars, wird linksseitig angezeigt. Es kann mühelos ausgeblendet werden, wenn der Benutzer mehr Anzeigefläche haben möchte.
Herunterladen
- Katalog mit Homepage:Tiefe Türkisbanner und Schlagschatten-Bedienfelder für Produkte und Dienste. Ungewöhnliche Anzeige des Inhaltsverzeichnisses, des Index und des Glossars, wird linksseitig angezeigt. Es kann mühelos ausgeblendet werden, wenn der Benutzer mehr Anzeigefläche haben möchte.
Herunterladen
- Regierung: Ein formal klassisches Format mit dunklen meergrünen und grauen Akzenten für Banner und Überschriften.
Herunterladen
- Regierung mit Startseite: Ein formal klassisches Format mit dunklen meergrünen und grauen Akzenten für Banner und Überschriften. Die Startseite enthält Platzhalter für neue Elemente, die Sie für Ihren eigenen Text anpassen können.
Herunterladen
- Wissen: Weiche hellbraune Hintergrundfarben mit hellgrauen Symbolen und Akzenten. Verwendet ein horizontales Inhaltsverzeichnis, einen Index und ein Glossar, die sich auf der linken Seite befinden. Müheloser Zugriff auf „Suche“.
Herunterladen
- Wissen mit Startseite: Weiche hellbraune Hintergrundfarben mit hellgrauen Symbolen und Akzenten. Verwendet ein horizontales Inhaltsverzeichnis, einen Index und ein Glossar, die sich auf der linken Seite befinden. Müheloser Zugriff auf „Suche“.
Herunterladen
- Sozial: Ein farbiges soziales Layout mit Vorgabe-Code für Echtzeit-Facebook-Likes und Twitter-Follower. Es verwendet ein horizontales Navigations-Bedienfeld mit Akkordeon-Stil für das Inhaltsverzeichnis, den Index und das Glossar. Dieses Layout hat separate Seiten für das Thema und die Suchergebnisse.
Herunterladen
- Sozial mit Startseite: Ein farbiges soziales Layout mit Vorgabe-Code für Echtzeit-Facebook-Likes und Twitter-Follower. Es verwendet ein horizontales Navigations-Bedienfeld mit Akkordeon-Stil für das Inhaltsverzeichnis, den Index und das Glossar. Dieses Layout hat separate Seiten für das Thema und die Suchergebnisse.
Herunterladen
- Pharmazeutisch: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Dieses Design ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und iPad pharmazeutisch enthalten. Sie befinden sich in der Galerie. Sie können die Bildschirmgröße an Ihr Gerät anpassen.
Herunterladen
- Pharmazeutisch mit Startseite: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Die Startseite bietet Platzhalter für Ihre neuen Produkte oder Dienste in einer benutzerfreundlichen Einstellung. Dieses Layout ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und iPad pharmazeutisch enthalten. Sie können die Bildschirmgröße an Ihr Gerät anpassen.
Smartphone-Layouts
- iPhone: Ein hellblaues und graues Design, das hell ist und in dem leicht navigiert werden kann mit Inhaltsverzeichnis, Index und Glossar und immer verfügbarer Suche. Dieses Layout für iPhone ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Telefon, Tablet und Kindle Fire.
Herunterladen
- Android: Ein blaugrünes und schwarzes Farbschema, so vorkonfiguriert, dass es auf Android-Telefone mit gängigen Größen angezeigt werden kann. Dieses Layout ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Tablet und Kindle Fire.
Herunterladen
- Pharmazeutisch mit Startseite: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Die Startseite bietet Platzhalter für Ihre neuen Produkte oder Dienste in einer benutzerfreundlichen Einstellung. Dieses Layout ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und iPad pharmazeutisch enthalten. Sie können die Bildschirmgröße an Ihr Gerät anpassen.
Herunterladen
Tablet-Layouts
- Android: Ein blaugrünes und schwarzes Farbenschema, so vorkonfiguriert, dass es auf Android-Tablets mit gängigen Größen angezeigt werden kann. Dieses Layout ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Telefon und Kindle Fire.
Herunterladen
- iPad: Ein grau-brauner Stil kann einfach navigiert werden, mit Inhaltsverzeichnis, Index und Glossar und immer zugreifbarer Suche. Dieses Layout für iPhone ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, Android-Telefon, Android-Tablet und Kindle Fire.
Herunterladen
- Kindle Fire: Ein blaugrünes und schwarzes Farbschema, so vorkonfiguriert, dass es auf Kindle Fire angezeigt werden kann. Dieses Layout ist Teil einer Familie, die auch gebrauchsfertige Layouts für folgende Bildschirme beinhaltet: Desktop, iPhone, iPad, Android-Telefon und Android-Tablet.
Herunterladen
- Pharmazeutisch mit Startseite: Laborgeräte bieten ein modernes Motiv für dieses klassische Thema in Lavendelfarbtönen. Die Startseite bietet Platzhalter für Ihre neuen Produkte oder Dienste in einer benutzerfreundlichen Einstellung. Dieses Layout ist Teil einer Familie von bereits vorbereiteten Layouts, die auch iPhone pharmazeutisch und Desktop pharmazeutisch enthalten. Sie können die Bildschirmgröße an Ihr Gerät anpassen.
Herunterladen
Laden Sie die predefined_screens.zip-Datei herunter, die Bildschirmprofile für verschiedene Geräte umfasst. Die ZIP-Datei enthält eine XML-Datei - predefined_screens.xml. Speichern Sie die XML-Datei in den folgenden zwei Ordnern:
- AppData\Roaming\Adobe\RoboHTML\<Rh-Version>
- <Rh-Installationsordner>\RoboHTML\presets
RoboHelp aktualisiert die Liste vordefinierter Bildschirmprofile für Ihr Projekt.
Adobe MAX
Die Konferenz für Kreative
14. bis 16. Oktober in Miami Beach und online
Adobe MAX
Die Konferenz für Kreative
14. bis 16. Oktober in Miami Beach und online