Adding Custom Buttons to a Toolbar

In addition to the toolbar button options provided by Flare, you can add your own custom buttons with some associated JavaScript to serve various purposes. To work through a scenario for adding custom buttons with JavaScript, see the Custom Toolbar Tutorial.

How to Add a Custom Toolbar Button

  1. From the Project Organizer, open your Topic Toolbar skin component (if producing HTML5) or your Standard skin (and select the Topic Toolbar tab, if producing another output type).
  2. At the lower-left of the editor, click .
  3. In the dialog, provide a name for the new button, then click OK.
  4. On the left side of the editor, double-click the name of your custom button to move it to the right. Then use the arrow keys at the bottom to adjust its placement in the list of buttons. The higher a button is in the list, the further to the left it will be in the toolbar. The lower it is, the further to the right it will be.
  5. Add JavaScript for the button:
    • If the button requires multiple lines of JavaScript, select the button name. Then, on the lower-right of the editor, click Edit. Enter or paste your JavaScript Code, and click OK.

    • If the button just requires one line of JavaScript for its event, select the Styles tab in the editor. Expand the Toolbar Button node. Then expand the node with the name of your custom button. Finally, expand the Event node and in the Click field, enter the JavaScript.

      Note The above is for a Topic Toolbar skin component. If you are working in a Standard skin for a non-HTML5 output, the node and field labels are just a bit different (e.g., Toolbar Item, Type, OnClick).

  6. Provide a background image to represent the button. Under the node with your button name, expand the Background node, and complete the Image field.

    Note If you are working in a Standard skin for a non-HTML5 output, the node and field labels are just a bit different.

  7. (Optional) Use any of the other nodes and fields on the Styles tab to make further design changes for the custom button.
  8. Click Save the active file. to save your work.