Téléchargez et extrayez le contenu du fichier scss-files-2017.zip.
Dernière mise à jour le
Mar 08, 2022 08:26:14 AM GMT
Cet article fournit des liens vers les dernières versions archivées des dispositions et des profils d’écran de RoboHelp. Vous pouvez télécharger ces dispositions et profils d’écran, les utiliser dans votre projet RoboHelp et générer une sortie Responsive HTML5 ou Multiscreen HTML5.
Cette section répertorie les dispositions Responsive HTML5 que vous pouvez utiliser dans vos projets RoboHelp (version 2017).
Téléchargez la disposition d’écran Responsive de votre choix dans la liste ci-dessous, changez l’extension de nom de fichier .zip en .slz, puis importez-la dans votre projet. Pour obtenir des informations plus contextuelles, voir Dispositions d’écran dans le Guide de l’utilisateur de RoboHelp.
Indigo
Une disposition Responsive HTML5 sans cadre qui offre la meilleure recherche et navigation de sa catégorie.
Telechargement
Ocean
Une disposition sans cadre qui permet à vos utilisateurs de mettre en signet leurs rubriques préférées à partir de votre aide.
Remarque :
À partir de la mise à jour 2 de RoboHelp, la disposition Ocean est déconseillée dans le produit.
Telechargement
Personnalisation des dispositions
Remarque :
Pour pouvoir personnaliser des dispositions, vous devez avoir une notion claire des technologies SCSS, CSS et Javascript. SCSS est une extension de CSS, qui vous permet d’utiliser des variables, des mixins, des règles imbriquées, et d’autres principes de base de programmation pour créer un CSS.
Vous pouvez personnaliser une disposition Responsive de deux manières :
- Personnalisation de l’aspect de la sortie par le biais des feuilles de style
- Personnalisation du comportement, telle que la gestion de la recherche d’une façon particulière, par le biais de JavaScript
Les sections suivantes expliquent ces deux méthodes de personnalisation de la disposition.
Personnalisation via une feuille de style
-
Remarque :
Le fichier scss-files-2017.zip contient les fichiers .scss pour les dispositions Azure Blue, Charcoal Grey et Indigo. En outre, vous trouverez d’autres fichiers de configuration utilisés par ces dispositions, telles que les fichiers de configuration de disposition de droite à gauche.
-
Modifiez le fichier .scss de la disposition que vous souhaitez utiliser.
Remarque :Par exemple, si vous souhaitez modifier la disposition Indigo, modifiez le fichier layout.scss disponible dans le dossier scss-files-2017\indigo.
-
Utilisez un compilateur de fichier .scss pour générer un fichier .css à partir du fichier .scss mis à jour.
Remarque :Les fichiers CSS fournis avec les dispositions de RoboHelp ont été compilés à l’aide d’un outil tiers appelé Koala. Vous pouvez utiliser Koala ou tout autre outil pour compiler le fichier .scss.
Remarque :Si vous souhaitez générer le RTL CSS, ouvrez le fichier scss-files-2017\_rtl.scss dans un éditeur de texte. Définissez $if-rtl sur true, puis renommez le fichier layout.css généré en layout_rtl.css.
-
Extrayez le contenu du fichier zip de la disposition (Indigo.zip ou Ocean.zip) et remplacez le fichier layout.css dans le zip par le fichier .css mis à jour que vous avez créé à l’étape 3.
Remarque :Le fichier layout.css est disponible sous le dossier racine du fichier zip de la disposition. Par exemple, pour la disposition Gris anthracite, l’emplacement du fichier CSS est scss-files-2017\indigo\layout.css.
-
Recréez le fichier zip avec le fichier layout.css mis à jour.
-
Renommez le fichier zip en .slz et importez-le dans votre projet.
Personnalisation de Javascript
Vous pouvez également modifier le comportement de certains événements dans votre disposition en personnalisant les fichiers JavaScript associés. Par exemple, si vous voyez une erreur spécifique de JavaScript dans un navigateur, vous pouvez modifier le code JavaScript pour corriger le problème.
Effectuez les étapes suivantes pour personnaliser la disposition à l’aide de JavaScript :
-
Accédez au dossier scripts sur votre système :
<RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
Remarque :Le dossier scripts contient quatre fichiers : common.js, layout.js, rh.js et topic.js. Chacun de ces fichiers JavaScript contient du code qui gère le comportement des divers composants de votre disposition.
-
Créez une sauvegarde du fichier .js que vous souhaitez utiliser, puis modifiez les fichiers .js selon vos besoins.
-
Renommez le fichier modifié en <nom du fichier>.min.js. Par exemple, renommez le fichier common.js en common.min.js.
Remarque :Au lieu de renommer manuellement les fichiers .js en .min.js, il est recommandé d’utiliser un outil de réduction (tel que JavaScript minifier) pour réduire les fichiers .js mis à jour.
-
Remplacez les fichiers JavaScript dans le dossier scripts de l’emplacement d’installation de RoboHelp (indiqué à l’étape 1). Vous pouvez également remplacer les scripts dans le dossier de sortie publié (du projet). L’emplacement de stockage des fichiers JavaScript dans votre projet est :
<dossier de projet>\template\scripts
Si vous remplacez les scripts dans l’emplacement d’installation de RoboHelp, toutes les sorties suivantes seront générées avec les fichiers .js personnalisés.
Si vous remplacez les scripts dans le dossier de sortie publié, seul le projet disposera des fichiers .js mis à jour. Si vous régénérez la sortie du projet, il perdra toutes les personnalisations.
Téléchargez la disposition d’écran Responsive de votre choix dans la liste ci-dessous, changez l’extension de nom de fichier .zip en .slz, puis importez-la dans votre projet. Pour obtenir des informations plus contextuelles, voir Dispositions d’écran dans le Guide de l’utilisateur de RoboHelp.
La disposition Responsive attribue automatiquement à chaque périphérique une image optimisée. Avec la disposition Responsive, vous servez votre contenu d’aide sur tous les périphériques tels que bureau, tablette ou mobile en même temps.
Bleu azur
Telechargement
Gris anthracite
Telechargement
Personnalisation des dispositions
Remarque :
Pour pouvoir personnaliser des dispositions, vous devez avoir une notion claire des technologies SCSS, CSS et Javascript. SCSS est une extension de CSS, qui vous permet d’utiliser des variables, des mixins, des règles imbriquées, et d’autres principes de base de programmation pour créer un CSS.
Vous pouvez personnaliser une disposition Responsive de deux manières :
- Personnalisation de l’aspect de la sortie par le biais des feuilles de style
- Personnalisation du comportement, telle que la gestion de la recherche d’une façon particulière, par le biais de JavaScript
Les sections suivantes expliquent ces deux méthodes de personnalisation de la disposition.
Personnalisation via une feuille de style
-
Téléchargez et extrayez le contenu du fichier scss-files.zip.
Remarque :Le fichier scss-files.zip contient les fichiers .scss pour les dispositions Bleu azur et Gris anthracite. En outre, vous trouverez d’autres fichiers de configuration utilisés par ces dispositions, telles que les fichiers de configuration de disposition de droite à gauche.
-
Modifiez le fichier .scss de la disposition que vous souhaitez utiliser.
Remarque :Par exemple, si vous souhaitez modifier la disposition Bleu azur, modifiez le fichier layout.scss disponible dans le dossier scss-files\scss\Azure_Blue.
-
Utilisez un compilateur de fichier .scss pour générer un fichier .css à partir du fichier .scss mis à jour.
Remarque :Les fichiers CSS fournis avec les dispositions de RoboHelp ont été compilés à l’aide d’un outil tiers appelé Koala. Vous pouvez utiliser Koala ou tout autre outil pour compiler le fichier .scss.
Remarque :Si vous souhaitez générer le RTL CSS, ouvrez le fichier scss-files\scss\_rtl.scss dans un éditeur de texte. Définissez $if-rtl sur true, puis renommez le fichier layout.css généré en layout_rtl.css.
-
Extrayez le contenu du fichier zip de la disposition (Azure_Blue.zip ou Charcoal_Grey.zip) et remplacez le fichier layout.css dans le zip par le fichier .css mis à jour que vous avez créé à l’étape 3.
Remarque :Le fichier layout.css est disponible sous le dossier racine du fichier zip de la disposition. Par exemple, pour la disposition Gris anthracite, l’emplacement du fichier CSS est scss-files\scss\Charcoal_Grey\layout.css.
-
Recréez le fichier zip avec le fichier layout.css mis à jour.
-
Renommez le fichier zip en .slz et importez-le dans votre projet.
Personnalisation de Javascript
Vous pouvez également modifier le comportement de certains événements dans votre disposition en personnalisant les fichiers JavaScript associés. Par exemple, si vous voyez une erreur spécifique de JavaScript dans un navigateur, vous pouvez modifier le code JavaScript pour corriger le problème.
Effectuez les étapes suivantes pour personnaliser la disposition à l’aide de JavaScript :
-
Téléchargez et extrayez le contenu du fichier js-files.zip.
Remarque :Le zip contient quatre fichiers : common.js, layout.js, rh.js et topic.js. Chacun de ces fichiers JavaScript contient du code qui gère le comportement des divers composants de votre disposition.
-
Modifiez les fichiers .js en fonction de vos besoins.
-
Renommez le fichier modifié en <nom du fichier>.min.js. Par exemple, renommez le fichier common.js en common.min.js.
Remarque :Au lieu de renommer manuellement les fichiers .js en .min.js, il est recommandé d’utiliser un outil de réduction (tel que JavaScript minifier) pour réduire les fichiers .js mis à jour.
-
Remplacez les fichiers JavaScript dans le dossier scripts de l’emplacement d’installation de RoboHelp :
<RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
Vous pouvez également remplacer les scripts dans le dossier de sortie publié (du projet). L’emplacement de stockage des fichiers JavaScript dans votre projet est :
<dossier de projet>\template\scripts
Si vous remplacez les scripts dans l’emplacement d’installation de RoboHelp, toutes les sorties suivantes seront générées avec les fichiers .js personnalisés.
Si vous remplacez les scripts dans le dossier de sortie publié, seul le projet disposera des fichiers .js mis à jour. Si vous régénérez la sortie du projet, il perdra toutes les personnalisations.
Cette section répertorie les dispositions Responsive HTML5 que vous pouvez utiliser dans vos projets RoboHelp 11.
Theme_1 Standard
Disposition qui donne à chaque périphérique une image optimisée. Avec la disposition Responsive, vous servez tous les périphériques en même temps.
Telechargement
Disposition Theme 2_Gouvernement
Style classique formel accentué de couleurs vert foncé et gris ardoise pour bannières et titres.
Telechargement
Theme_3 Noir
Style classique formel accentué de noir pour bannières et titres.
Telechargement
Cette section dresse la liste des dispositions Multiscreen HTML5 que vous pouvez utiliser dans vos projets RoboHelp (2015 release) ou 11.
Dispositions Bureau
- Disposition Bureau : thème gris et brun facile à parcourir avec table des matières, index et glossaire sur le côté gauche. Cette disposition Bureau fait partie d’une gamme qui comprend également des dispositions prédéfinies pour ces écrans : iPhone, iPad, Android Phone, Android Tablet et Kindle Fire.
Telechargement
- Catalogue : Bannières turquoises et panneaux à ombre portée pour présenter des produits ou des services. L’affichage inhabituel de la table des matières, de l’index et du glossaire est placé à gauche. Il est facilement masqué lorsque l’utilisateur préfère avoir plus d’espace d’affichage.
Telechargement
- Catalogue avec page d’accueil : Bannières turquoises et panneaux à ombre portée pour présenter des produits ou des services. L’affichage inhabituel de la table des matières, de l’index et du glossaire est placé à gauche. Il est facilement masqué lorsque l’utilisateur préfère avoir plus d’espace d’affichage.
Telechargement
- Gouvernement : style classique formel accentué de couleurs vert foncé et gris ardoise pour bannières et titres.
Telechargement
- Gouvernement avec page d’accueil : style classique formel accentué de couleurs vert foncé et gris ardoise pour bannières et titres. La page d’accueil comporte des espaces réservés pour les articles phares, prêts à modifier avec votre propre texte.
Telechargement
- Connaissances : couleurs d’arrière-plan marron clair lisse avec des icônes et des accents gris clair. Utilise une table des matières horizontale, un index et un glossaire placés sur la gauche. Accès facile à la recherche.
Telechargement
- Connaissances avec page d’accueil : couleurs d’arrière-plan marron clair lisse avec des icônes et des accents gris clair. Utilise une table des matières, un index et un glossaire placés à l’horizontale sur la gauche. Accès facile à la recherche.
Telechargement
- Social : disposition colorée, spéciale réseaux sociaux avec code prédéfini pour accéder à Facebook Likes et Twitter Follows en temps réel. Elle utilise un panneau de navigation de style accordéon horizontal pour la table des matières, l’index et le glossaire. Cette disposition a des pages distinctes pour les rubriques et les résultats de recherche.
Telechargement
- Social avec page d’accueil : disposition colorée, spéciale réseaux sociaux avec code prédéfini pour accéder à Facebook Likes et Twitter Follows en temps réel. Elle utilise un panneau de navigation de style accordéon horizontal pour la table des matières, l’index et le glossaire. Cette disposition a des pages distinctes pour les rubriques et les résultats de recherche.
Telechargement
- Pharmaceutique : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. Ce thème fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et iPad Pharmaceutique. Elles se trouvent dans la Galerie. Vous pouvez la personnaliser en fonction de la taille d’écran requise par vos périphériques.
Telechargement
- Pharmaceutique avec page d’accueil : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. La page d’accueil comporte des espaces réservés pour ajouter vos produits ou services phares dans un format facile à parcourir. Cette disposition fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et iPad Pharmaceutique. Vous pouvez aussi la personnaliser en fonction de la taille d’écran requise par vos périphériques.
Dispositions pour Smartphones
- iPhone : Un thème bleu clair et gris, lumineux et facile à parcourir avec table des matières, index et glossaire, et recherche accessible à tout moment. Cette disposition pour iPhone fait partie d’une gamme qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPad, Android Phone, Android Tablet et Kindle Fire.
Telechargement
- Android : Un modèle bleu sarcelle, vert et noir préconfiguré pour affichage dans les téléphones Android de tailles courantes. Cette disposition fait partie d’une famille qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPad, Android Phone, Android Tablet et Kindle Fire.
Telechargement
- Pharmaceutique avec page d’accueil : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. La page d’accueil comporte des espaces réservés pour ajouter vos produits ou services phares dans un format facile à parcourir. Cette disposition fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et iPad Pharmaceutique. Vous pouvez aussi la personnaliser en fonction de la taille d’écran requise par vos périphériques.
Telechargement
Dispositions pour Tablette
- Android : un modèle bleu sarcelle, vert et noir préconfiguré pour affichage dans les tablettes Android de tailles courantes. Cette disposition fait partie d’une famille qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPhone, iPad, Android Phone et Kindle Fire.
Telechargement
- Disposition iPad : thème gris et brun facile à parcourir avec table des matières, index et glossaire, et recherche accessible à tout moment. Cette disposition pour iPad fait partie d’une gamme qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPhone, Android Phone, Android Tablet et Kindle Fire.
Telechargement
- Kindle Fire : un modèle bleu sarcelle, vert et noir préconfiguré pour affichage dans Kindle Fire. Cette disposition fait partie d’une famille qui comprend également des dispositions prédéfinies pour ces écrans : Bureau, iPhone, iPad, Android Phone et Android Tablet.
Telechargement
- Pharmaceutique avec page d’accueil : la verrerie de laboratoire crée un motif actuel pour ce thème classique traité en nuances de couleur lavande. La page d’accueil comporte des espaces réservés pour ajouter vos produits ou services phares dans un format facile à parcourir. Cette disposition fait partie d’une gamme de dispositions prédéfinies, incluant également iPhone Pharmaceutique et Bureau Pharmaceutique. Vous pouvez aussi la personnaliser en fonction de la taille d’écran requise par vos périphériques.
Telechargement
Téléchargez le fichier predefined_screens.zip, qui contient des profils d’écran pour différents appareils. Le fichier contient un fichier XML - predefined_screens.xml. Enregistrez le fichier XML aux deux emplacements suivants :
- AppData\Roaming\Adobe\RoboHTML\<version Rh>
- <emplacement d’installation Rh>\RoboHTML\presets
RoboHelp met à jour la liste des profils d’écran prédéfinis pour votre projet.
Accéder à votre compte