The Skin Editor

The skin editor now allows changes to all skins.

There is also a change in terminology.

  • Previously, the design was referred to as the layout. There were also problems when the functionality needed to be changed that resulted in the loss of customisation.
  • Now "layout" will refer to the structure and "skin" will refer to the appearance.

The changes mean the terminology for both outputs is now the same and Adobe can change the underpinning code of the layout without any loss of customisation.

Click Output > Output Settings and then click Skins. When you select what you want to edit, a preview will display on the right along with the Skin Components you can customise. As you click each component, its properties will be displayed on the left of the preview for editing.

Because the Logo setting has focus, the preview on the right has a red square showing what will be affected by any changes made.

Duplicate Skins

You might want to make some changes to a skin 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 skin or export one.

Editing Skins

The Skin Editor offers many more options to customise a skin than in Classic versions. This section is a guide to what the options are but does not describe each option in detail.

Skins 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 that 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 TOC editor you can apply different images to each book or page, just click the book or page and select Properties.

In the skin 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 skin editor will apply to all the books.

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 Skin

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

The skin 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 Layout Tab

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

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.