Download and extract the contents of the scss-files-2017.zip file.
This article provides links to the latest and archived versions of the RoboHelp screen layouts and profiles. You can download these screen layouts and profiles, use them in your RoboHelp project, and generate Responsive HTML5 or Multiscreen HTML5 output.
This section lists the Responsive HTML5 layouts that you can use in your RoboHelp (2017 release) projects.
Download the Responsive screen layout of your choice from the list below, change the filename extension from .zip to .slz, and then import it into your project. For more contextual information, see Screen layouts in RoboHelp User Guide.
A frameless Responsive HTML5 layout that has best-in-class search and navigation.
Downloaden
A frameless layout that allows your users to bookmark their favorite topics from your Help.
Starting with Update 2 of RoboHelp, the Ocean layout has been deprecated from the product.
Downloaden
To be able to customize layouts, you must have a clear understanding of SCSS, CSS, and JavaScript technologies. SCSS is an extension of CSS, which allows you to use variables, mixins, nested rules, and other basic programming fundamentals to create a CSS.
You can customize a Responsive layout in two ways:
The following sections explain these two methods of customizing the layout.
Download and extract the contents of the scss-files-2017.zip file.
The scss-files-2017.zip file contains the .scss files for Azure Blue, Charcoal Grey, and Indigo layouts. Also, you will find other configuration files used by these layouts, such as right-to-left layout configuration files.
Modify the .scss file of the layout you want to use.
For example, if you want to modify the Indigo layout, then modify the layout.scss file available in the scss-files-2017\indigo folder.
Use any .scss file compiler to generate a .css file from the updated .scss file.
The CSS files bundled with RoboHelp layouts have been compiled using a third-party tool named Koala. You can either use Koala or any other tool to compile the .scss file.
If you want to generate the RTL CSS, then open the scss-files-2017\_rtl.scss file in a text editor. Set $if-rtl to true, then rename the generated layout.css to layout_rtl.css.
Extract the contents of the layout zip file (Indigo.zip or Ocean.zip) and replace the layout.css file in the zip with the updated .css file that you have created in Step 3.
The layout.css file is available under the root folder of the layout zip file. For example, for Charcoal Grey layout, the location of the CSS file is scss-files-2017\indigo\layout.css.
Re-create the zip file with the updated layout.css.
Rename the zip file to .slz and import it into your project.
You can also change the behavior of certain events in your layout by customizing the associated JavaScript files. For example, if you see any JavaScript related error in any browser, you can change the JavaScript code to fix the issue.
Perform the following steps to customize layout using JavaScripts:
Access the scripts folder on your system:
<RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
The scripts folder contains four files: common.js, layout.js, rh.js, and topic.js. Each of these JavaScript files contains code that controls the behavior of various components in your layout.
Create a backup of the .js file that you want to work on and then modify the .js files as per your requirements.
Rename the modified file to <file name>.min.js. For example, rename the common.js file to common.min.js.
Instead of manually renaming the .js files to .min.js, it is recommended to use a minification tool (such as JavaScript minifier) to minify the updated .js files.
Replace the JavaScript files in the scripts folder in the RoboHelp install location (given in Step 1). Or, you can replace the scripts in the published (project's) output folder. The location to store the updated JavaScript files in your project is:
<project folder>\template\scripts
If you replace the scripts in the RoboHelp install location, then all subsequent output will be generated with the customized .js files.
If you replace the scripts in the published output folder, then only the project will have the updated .js files. If you regenerate the project output, then it will lose all customizations.
Download the Responsive screen layout of your choice from the list below, change the filename extension from .zip to .slz, and then import it into your project. For more contextual information, see Screen layouts in RoboHelp User Guide.
The Responsive layout automatically gives every device an optimized frame. With the Responsive layout, you serve your Help content on all devices such as desktop, tablet, or mobile at the same time.
Downloaden
Downloaden
To be able to customize layouts, you must have a clear understanding of SCSS, CSS, and JavaScript technologies. SCSS is an extension of CSS, which allows you to use variables, mixins, nested rules, and other basic programming fundamentals to create a CSS.
You can customize a Responsive layout in two ways:
The following sections explain these two methods of customizing the layout.
Download and extract the contents of the scss-files.zip file.
The scss-files.zip file contains the .scss files for Azure Blue and Charcoal Grey layouts. Also, you will find other configuration files used by these layouts, such as right-to-left layout configuration files.
Modify the .scss file of the layout you want to use.
For example, if you want to modify the Azure Blue layout, then modify the layout.scss file available in the scss-files\scss\Azure_Blue folder.
Use any .scss file compiler to generate a .css file from the updated .scss file.
The CSS files bundled with RoboHelp layouts have been compiled using a third-party tool named Koala. You can either use Koala or any other tool to compile the .scss file.
If you want to generate the RTL CSS, then open the scss-files\scss\_rtl.scss file in a text editor. Set $if-rtl to true, then rename the generated layout.css to layout_rtl.css.
Extract the contents of the layout zip file (Azure_Blue.zip or Charcoal_Grey.zip) and replace the layout.css file in the zip with the updated .css file that you have created in Step 3.
The layout.css file is available under the root folder of the layout zip file. For example, for Charcoal Grey layout, the location of the CSS file is scss-files\scss\Charcoal_Grey\layout.css.
Re-create the zip file with the updated layout.css.
Rename the zip file to .slz and import it into your project.
You can also change the behavior of certain events in your layout by customizing the associated JavaScript files. For example, if you see any JavaScript related error in any browser, you can change the JavaScript code to fix the issue.
Perform the following steps to customize layout using JavaScripts:
Download and extract the contents of the js-files.zip file.
The zip contains four files: common.js, layout.js, rh.js, and topic.js. Each of these JavaScript files contains code that controls the behavior of various components in your layout.
Modify the .js files as per your requirements.
Rename the modified file to <file name>.min.js. For example, rename the common.js file to common.min.js.
Instead of manually renaming the .js files to .min.js, it is recommended to use a minification tool (such as JavaScript minifier) to minify the updated .js files.
Replace the JavaScript files in the scripts folder in the RoboHelp install location:
<RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
Or, you can replace the scripts in the published (project's) output folder. The location to store the updated JavaScript files in your project is:
<project folder>\template\scripts
If you replace the scripts in the RoboHelp install location, then all subsequent output will be generated with the customized .js files.
If you replace the scripts in the published output folder, then only the project will have the updated .js files. If you regenerate the project output, then it will lose all customizations.
This section lists the Responsive HTML5 layouts that you can use in your RoboHelp 11 projects.
The layout gives every device an optimized frame. With the Responsive layout, you serve all devices at the same time.
Downloaden
A formal classic style with dark sea green and slate gray color accents for banners and headings.
Downloaden
A formal classic style with black accents for banners and headings.
Downloaden
This section lists the Multiscreen HTML5 layouts that you can use in your RoboHelp (2015 release) or 11 projects.
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Downloaden
Download the predefined_screens.zip file, which contains screen profiles for various devices. The zip contains an XML file - predefined_screens.xml. Save the XML file at the following two locations:
RoboHelp updates the list of predefined screen profiles for your project.
Aanmelden bij je account