RoboHelp screen profiles and layouts

Zoeken

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.

Indigo

A frameless Responsive HTML5 layout that has best-in-class search and navigation.

Downloaden

Bestand ophalen
Indigo.zip
Bestand ophalen
SCSS file for 2017 release.
Indigo layout sample

Ocean

A frameless layout that allows your users to bookmark their favorite topics from your Help.

Opmerking:

Starting with Update 2 of RoboHelp, the Ocean layout has been deprecated from the product.  

Downloaden

Bestand ophalen
Ocean.zip
Ocean layout sample

Customize layouts

Opmerking:

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:

  • Customize the appearance of the output through style sheets
  • Customize the behavior, such as handling search in a particular way, through JavaScript

The following sections explain these two methods of customizing the layout.

Style sheet customization

  1. Download and extract the contents of the scss-files-2017.zip file.

    Opmerking:

    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.

  2. Modify the .scss file of the layout you want to use.

    Opmerking:

    For example, if you want to modify the Indigo layout, then modify the layout.scss file available in the scss-files-2017\indigo folder.

  3. Use any .scss file compiler to generate a .css file from the updated .scss file.

    Opmerking:

    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.  

    Opmerking:

    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.

  4. 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.  

    Opmerking:

    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.

  5. Re-create the zip file with the updated layout.css.

  6. Rename the zip file to .slz and import it into your project.

JavaScript customization

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:

  1. Access the scripts folder on your system:

    <RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts

    Opmerking:

    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.

  2. Create a backup of the .js file that you want to work on and then modify the .js files as per your requirements.

  3. Rename the modified file to <file name>.min.js. For example, rename the common.js file to common.min.js.

    Opmerking:

    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.

  4. 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.

Azure Blue

Downloaden

Bestand ophalen
Azure_Blue.zip
Azure Blue layout sample

Charcoal Grey

Downloaden

Bestand ophalen
Charcoal_Grey.zip
Charcoal Grey layout sample

Customize layouts

Opmerking:

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:

  • Customize the appearance of the output through style sheets
  • Customize the behavior, such as handling search in a particular way, through JavaScript

The following sections explain these two methods of customizing the layout.

Style sheet customization

  1. Download and extract the contents of the scss-files.zip file.

    Opmerking:

    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.

  2. Modify the .scss file of the layout you want to use.

    Opmerking:

    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.

  3. Use any .scss file compiler to generate a .css file from the updated .scss file.

    Opmerking:

    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.  

    Opmerking:

    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.

  4. 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.  

    Opmerking:

    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.

  5. Re-create the zip file with the updated layout.css.

  6. Rename the zip file to .slz and import it into your project.

JavaScript customization

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:

  1. Download and extract the contents of the js-files.zip file.

    Opmerking:

    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.

  2. Modify the .js files as per your requirements.

  3. Rename the modified file to <file name>.min.js. For example, rename the common.js file to common.min.js.

    Opmerking:

    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.

  4. 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.  

Theme_1 Standard

The layout gives every device an optimized frame. With the Responsive layout, you serve all devices at the same time.

Downloaden

Bestand ophalen
Theme1_Standard.zip

Theme 2_Government layout

A formal classic style with dark sea green and slate gray color accents for banners and headings.

Downloaden

Bestand ophalen
Theme2_Government.zip

Theme_3 Black

A formal classic style with black accents for banners and headings.

Downloaden

Bestand ophalen
Theme3_Black.zip

This section lists the Multiscreen HTML5 layouts that you can use in your RoboHelp (2015 release) or 11 projects.  

Desktop layouts

  • Desktop layout: A gray and brown theme is easy to navigate with TOC, Index, and Glossary on the left side. This layout for Desktop is part of a family that also includes ready-made layouts for these screens: iPhone, iPad, Android Phone, Android Tablet, and Kindle Fire.

Downloaden

Bestand ophalen
Desktop_Layout.zip
Desktop screen layout

  • Catalog: Deep Turquoise banners and drop shadow panels for featuring products or services. Unusual display of the Table of Contents, Index, and Glossary is set to the left. It is easily hidden when the user prefers to have more real estate for viewing.

Downloaden

Bestand ophalen
Desktop_Catalog.zip
Desktop Catalog screen layout

  • Catalog with home page: Deep turquoise banners and drop shadow panels for featuring products or services. Unusual display of the Table of Contents, Index, and Glossary is set to the left. It is easily hidden when the user prefers to have more real estate for viewing.

Downloaden

Bestand ophalen
Desktop_Catalog_WithHomePage.zip
Desktop Catalog with home page screen layout

  • Government: A formal classic style with dark sea green and slate gray color accents for banners and headings.

Downloaden

Bestand ophalen
Desktop_Government.zip
Government screen layout

  • Government with home page: A formal classic style with dark sea green and slate gray and color accents for banners and headings. The Home Page has placeholders for Featured items ready for you to modify with your own text.

Downloaden

Bestand ophalen
Desktop_Government_WithHomePage.zip
Government with home page screen layout

  • Knowledge: Soft light brown background colors with light gray icons and accents. Uses a horizontal Table of Contents, Index, and Glossary positioned on the left. Easy access to search.

Downloaden

Bestand ophalen
Desktop_Knowledge.zip
Knowledge screen layout

  • Knowledge with home page: Soft light brown background colors with light gray icons and accents. Uses a horizontal Table of Contents, Index, and Glossary positioned on the left. Easy access to search.

Downloaden

Bestand ophalen
Desktop_Knowledge_WithHomePage.zip
Knowledge with home page screen layout

  • Social: A colorful, socially enabled layout with preset code for real-time Facebook Likes and Twitter Follows. It uses a horizontal accordion-style navigation panel for the TOC, Index, and Glossary. This layout has separate topic and search results pages.

Downloaden

Bestand ophalen
Desktop_Social.zip
Social screen layout

  • Social with home page: A colorful, socially enabled layout with preset code for real-time Facebook Likes and Twitter Follows. It uses a horizontal accordion-style navigation panel for the TOC, Index, and Glossary. This layout has separate topic and search results pages.

Downloaden

Bestand ophalen
Desktop_Social_WithHomePage.zip
Social with home page screen layout

  • Pharmaceutical: Laboratory glassware creates a modern motif for this classical theme done in shades of lavender. This theme is part of a family of already-prepared layouts, which also include iPhone Pharmaceutical and iPad Pharmaceutical. They can be found in the Gallery. You can customize for whatever screen size your device needs.

Downloaden

Bestand ophalen
Desktop_Pharmaceutical.zip
Pharmaceutical screen layout

  • Pharmaceutical with home page: Laboratory glassware creates a modern motif for this classical theme done in shades of lavender. The home page offers placeholders for adding your featured products or services in an easy-to-navigate setting. This  layout is part of a family of already-prepared layouts, which also include iPhone Pharmaceutical and iPad Pharmaceutical. Or, customize for whatever screen size your device needs.
Pharmaceutical with home page screen layout

Smartphone layouts

  • iPhone: A light blue and gray theme is bright and easy to navigate with TOC, Index, and Glossary and always accessible Search. This layout for iPhone is part of a family that also includes ready-made layouts for these screens: Desktop, iPad, Android Phone, Android Tablet, and Kindle Fire.

Downloaden

Bestand ophalen
iPad_Layout.zip
iPhone screen layout

  • Android: A teal, green and black color scheme pre-configured to display in Android Phones of popular sizes. This layout is part of a family that also includes ready-made layouts for these screens: Desktop, iPhone, iPad, Android Tablet, and Kindle Fire.

Downloaden

Bestand ophalen
Android_Phone_Layout.zip
Android smartphone screen layout

  • Pharmaceutical with home page: Laboratory glassware creates a modern motif for this classical theme done in shades of lavender. The home page offers placeholders for adding your featured products or services in an easy-to-navigate setting. This layout is part of a family of already-prepared layouts, which also include iPhone Pharmaceutical and iPad Pharmaceutical. Or, customize for whatever screen size your device needs.

Downloaden

Bestand ophalen
Phone_Pharmaceutical_WithHomePage.zip
Pharmaceutical with home page (Smartphone screen layout)

Tablet layouts

  • Android: A teal, green and black color scheme pre-configured to display in Android Tablets of popular sizes. This layout is part of a family that also includes ready-made layouts for these screens: Desktop, iPhone, iPad, Android Phone, and Kindle Fire.

Downloaden

Bestand ophalen
Android_Tablet_Layout.zip
Android tablet layout

  • iPad: A gray and brown theme is easy to navigate with TOC, Index, and Glossary and always accessible Search. This layout for iPad is part of a family that also includes ready-made layouts for these screens: Desktop, iPhone, Android Phone, Android Tablet, and Kindle Fire.

Downloaden

Bestand ophalen
iPad_Layout.zip
iPad screen layout

  • Kindle Fire: A teal, green and black color scheme pre-configured to display in Kindle Fire. This layout is part of a family that also includes ready-made layouts for these screens: Desktop, iPhone, iPad, Android Phone, and Android Tablet.

Downloaden

Bestand ophalen
Kindle_Fire_Layout.zip
Kindle Fire screen layout

  • Pharmaceutical with home page: Laboratory glassware creates a modern motif for this classical theme done in shades of lavender. The home page offers placeholders for adding your featured products or services in an easy-to-navigate setting. This layout is part of a family of already-prepared layouts which also include iPhone Pharmaceutical and Desktop Pharmaceutical. Or, customize for whatever screen size your device needs.

Downloaden

Bestand ophalen
Tablet_Pharmaceutical_WithHomePage.zip
Pharmaceutical with home page (tablet screen layout)

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:

  • AppData\Roaming\Adobe\RoboHTML\<Rh version>
  • <Rh install location>\RoboHTML\presets

RoboHelp updates the list of predefined screen profiles for your project.

Adobe-logo

Aanmelden bij je account

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren

Legal Notices    |    Online Privacy Policy