Online Templates (Previously Skins)

Online Templates are simply what were previously known as skins. 

Click Output > Templates to see your existing templates. On upgrading to Adobe RoboHelp 2022 you will see your skins from earlier versions.

Double click the required online template or select Edit from the menu that shows when you hover over a template. 

Templates with Home Pages

The home page shows icons to access the top level books in the table of contents.

All the books above are shown with the default images. You can change them in the skin editor. In the Layout Page tab go to TOC Tile Images to set your default images. If you set just two images, the images will be applied to every other book. If you set three or more, they will be applied in series.

In the editor you can set your image to cover the whole area and have the text sit on top of the image. In the skin editor Home Page tab, set the background opacity for tile-details-box to zero and the font colour to whatever you require.

The font colour for the number of articles is set in tile-topics-count. Note that the settings in the editor will apply to all the books.

Alternatively, you can manage the tiles from the Table of Contents. In the Layout tab > Home Page options select Manage Tiles from TOC and the tiles you define there will be used instead. If you do not define a tile for a specific section or topic in the TOC, there will be no tile for that section or topic enabling you to control which sections appear as tiles.

Using This Type of Skin Without the Home Page

This will open with the default topic displayed and work more like traditional help. Note though, no frames! It's all done with DIV tags. Each topic has a simple URL.

Home Page and Default Topic

This is simply the home page you see in the first image with your default topic below it. That can be configured in the skin editor.

Configuring the Settings

The options vary according to the template selected. The screens below are for the frameless Orange tempate but all templates broadly follow the same layout

The editor has many more options than ever before and you will likely find you can create whatever you want by digging into the editing tabs. As you drill down through the various options, the image will be highlighted to show the area you are working on.

The Preview

The editor shows a live template.

Note that Container has been selected and Default Topic in the Contents has no icon shown to the left of the text. It has not been clicked on so it is displaying as an unselected topic.

By clicking on Default Topic, the icon is then displayed as that has become the selected topic and displays with the icon for a selected topic.

Similarly, click on other areas such as the search icon top right to see what a user would see if they click on that icon.

The Layout Tab

User Assets

In a preset you can select a script that is to run when the output is generated. In User Assets you need to select that script defined in the preset along with any assets it requires such as a CSS file.

The Home Page Tab

The Topic Page Tab

The Options

There are more options than ever before and it is beyond the scope of this sample project to cover them all.

Some Highlights

  • All the text can be set to your preferred fonts, weights and colours.
  • Colours and images can all be changed.
  • The size of different areas can be set as required.
  • Borders can be set to whatever width you want and have square or round corners.
  • The skins have a Download PDF button. In the preset layout tab you can define the path enabling users to download a PDF of the help. If you don't want to use that option, delete the button from the skin.
  • In Frameless outputs the header and footer can be made static. Layout > Topic Page > Static Header/Footer.
  • The skin is created from the DIVs defined in the EJS and the supporting CSS files. Expert users can edit those as well but the skin editor should cover most requirements.

Duplicate Templates

You might want to make some changes to a template either because corporate branding is about to change or you just feel that some tweaks are needed. You don't want to play with the current skin though until the new one is ready. Use the context menu to duplicate a template or export it.

508 and WCAG Compliance

All frameless skins and the Azure Blue and Indigo HTML5 skins added to projects in this version are 508 and WCAG compliant as supplied.

Customisation and Compliance
If you apply any customisation, then you must ensure that too is compliant. Your customisation could break compliance if, for example, you define colours that do not have the necessary contrast.
You must also ensure that your content is compliant.

 If your project has been upgraded from any earlier version, it is recommended that you add one of the above skins.