Enabling Runtime Skins

For HTML5 targets, you can enable runtime skins. Users can even choose from multiple skins to change the display of the output.

To help accomplish this, there is a Skin ID field on the Setup tab for HTML5 Side Navigation, Top Navigation, and Tripane skins. This ID is based on the file name of the skin, but you can change it if you want. See Setting a Skin ID.

How to Enable Runtime Skins

  1. If you are creating Top Navigation output, you should have a Topic Toolbar skin component in your project (see Adding Skin Files and Topic Toolbars in HTML5 Skin Components). Open the skin component, and select the Setup tab.

    If instead you are creating responsive Tripane output, open the regular skin and select the Toolbar tab. This lets you place the skin button in a web toolbar. See Web Toolbars in HTML5 Output.

  2. If necessary, move the SelectSkin button from the Available section to the Selected section.

  3. Open the HTML5 target.
  4. In the Target Editor, select the Advanced tab.

  5. Select Generate all skins.

  6. Click to save all files.

  7. Build the HTML5 target.

    Flare copies all of the project skins of the same type as the selected target (i.e., Tripane output will copy all project Tripane skins, Top Navigation output will copy all Top Navigation skins) and places them in the output folder.

    In addition, the CSS styles of those skins will be copied and merged into the stylesheet as its own CSS class.

Example Your main Top Navigation skin has a black header background, but you want users to be able to select a skin with a green header background and a different logo, or even a third skin that does not have a header at all. Therefore, you create the additional skins and edit them to look the way you want. Then you add the Skins button in your Topic Toolbar skin component.

In the output, a user can click the button in the topic toolbar and choose one of the options, which are based on the skin file name.

If the user selects Green, the output might look something like this:

And if the user selects NoHeader, the output might look something like this:

The name of the skin is reflected at the end of the URL in the browser.

Note For HTML5 Tripane output that is not enabled for responsive output, Flare does not support multiple skins in the output.