Work with skins

Learn how you can use a skin in RoboHelp to quickly customize the layout of your output.

What is a skin

A skin in RoboHelp helps you alter and customize the look and feel of your Help system before publishing it. You can customize a skin by changing colors, buttons, fonts, icons, logos, and background of your output. Whether it is Responsive Html5 or WebHelp that you want to publish, RoboHelp provides several predefined skins in the Skins panel of the publishing window. You can apply one of these predefined skins as it is or edit it to achieve the preferred output layout.

Add a skin

You can add a skin in the Responsive HTML5 or WebHelp format. To add a skin, do the following:

Click the Output tab at the left side of the Standard toolbar. The Output view opens.

In the Output toolbar, click the Skins icon .

In the Skins panel, click New Skin. From the drop-down menu, click one of the following options:

New WebHelp Skin To add a WebHelp skin. The New WebHelp Skin dialog box opens.

In the New WebHelp Skin or the New Responsive HTML5 Skin dialog box, select a predefined template in the Templates section. You can preview the selected template in the Preview area.

In the Name field, modify the default name of the predefined template, if required.

Click Done.

The new skin is added to the Skins panel and placed in alphabetical order of skin names. RoboHelp also opens the skin editor as a tabbed document. The skin editor comprises a live skin preview on the left side and the Skin Components panel on the right side.

Edit a skin

You can easily customize a skin to suit your liking. To edit a skin, follow these steps:

Click the Output tab at the left side of the Standard toolbar. The Output view opens.

In the Output toolbar, click the Skins icon .

In the Skins panel, against the skin you want to customize, choose Options () > Edit.

RoboHelp opens the skin editor as a tabbed document. The skin editor comprises a live skin preview on the left and the Skin Components panel on the right side.

In a Responsive HTML5 skin, a toolbar above the skin editor allows you to do the following:

Toggle highlight icon Toggles the highlighting of skin components in the skin editor.

The skin components and its settings vary according to the type of Responsive HTML5 skin view (desktop, phone, or tablet) you select.

In the Skin Components panel, click a skin component on the left to set your preferences for the component.

On clicking a skin component, RoboHelp displays its current settings and highlights the component in the output preview tab. For example, clicking Filter displays its current settings and highlights the Filter icon and area in the output preview tab.

Specify the preferred settings for each skin component as required, and click the Save icon in the standard toolbar of the publishing window.

RoboHelp applies the new skin settings to your content and displays it in the output preview tab.

Import a skin

To import a skin, do the following:

Click the Output tab at the left side of the Standard toolbar. The Output view opens.

In the Output toolbar, click the Skins icon .

In the Skins panel, choose New Skin () > Import.

In the Open dialog box, navigate to the skin (.skz or .slz file) you want to import, and then click Open.

The selected skin is added to the Skins panel and placed in alphabetical order of skin names.

Export a skin

To export a skin, do the following:

Click the Output tab at the left side of the Standard toolbar. The Output view opens.

In the Output toolbar, click the Skins icon .

In the Skins panel, against the skin you want to export, choose Options () > Export.

In the download dialog box, the Downloads folder in your computer is the default location to export a skin. You can navigate to a location of your choice, and then click Save.

The skin is saved to the chosen location.

Delete a skin

To export a skin, do the following:

Click the Output tab at the left side of the Standard toolbar. The Output view opens.

In the Output toolbar, click the Skins icon .

In the Skins panel, against the skin you want to delete, choose Options () > Delete.

In the Confirm dialog box, click Yes to confirm the deletion.

The skin is deleted.

Locate a skin file

To see the location of a skin file in your project, do the following:

Click the Output tab at the left side of the Standard toolbar. The Output view opens.

In the Output toolbar, click the Skins icon .

In the Skins panel, against the skin you want to locate, choose Options () > Show in Explorer.