Topic Toolbars in HTML5 Skin Components

In Topic Toolbar skin components, you can use skin styles to control the look of a toolbar you add via a proxy. See Inserting and Editing a Topic Toolbar Proxy.

For more about web toolbars versus topic toolbars, see Toolbars.

How to Edit an HTML5 Topic Toolbar Skin Component

Open an HTML5 Topic Toolbar skin component.
Select the Setup tab, and choose the buttons you want to include in the toolbar, moving them to the right side of the tab. You can also add custom buttons (see Adding Custom Buttons to a Toolbar).
Select the Styles tab.
(Optional) If you are using responsive output, make sure you select the appropriate medium—Web, Tablet, or Mobile—in the local toolbar before making changes to styles. For more information about these mediums and responsive output, see Responsive Skins.

On the left side of the editor, expand and select any of the following Toolbar style groups:

Toolbar	This controls the look of the entire toolbar, such as its alignment and margins.
Toolbar > Button	This controls the look of individual buttons in the toolbar. If you set the properties at the root level, then all the buttons are affected. If you want specific values for a particular button, select the style group for that button and then set the properties for it.
Toolbar > Button Separator	This controls the look of the separator between buttons.
Toolbar > Button Drop-down	This controls the look of the toolbar button drop-down menu. You can also set properties for menu items, such as hover properties and fonts.

Expand any of the nodes and complete the necessary fields. The properties and fields that you see are different for each node. Following is a general list in alphabetical order:

Alignment

You can click in the Horizontal field and choose whether to position to the right or left side of the display.

Background

You can change any of the following to affect the background:

Gradient This lets you change the background color using a progression effect. Select the beginning gradient color in the first field, and then select a second gradient color in the second field. You can use any of the following to enter or select a color.

	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color or make the background transparent.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Color This lets you select a single color.
Image This lets you select an image for the background. Click and use the dialog to select an image file.
Repeat Use this field to tell Flare whether the image should repeat or not.

Note The Image field has the highest precedence, which means that if you enter settings in all of the Background fields, the image will win. Gradient has the next highest precedence. If you want to use the Color field, you need to make sure the Gradient fields are set to transparent and that there is no image selected.

Border

You can change any of the following to affect the border on the element:

Border Edge Fields (Top, Right, Bottom, Left) You can add a border line around any of the edges of the element. You can use any of the following. The first three fields are used to control the type and size of the border line. The last three fields are alternative ways to choose a color for the border.

	You can select a type of line for the border (e.g., solid, dashed, dotted).
	Type a number in the field or use the arrows to increase or decrease it.
	Click in this field and select a unit of measurement (e.g., pixels, points, centimeters).
	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Border Radius Fields (Top Left, Top Right, Bottom Right, Bottom Left) If you want the element to have rounded corners, you can enter values in any of these fields. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters). The higher the number, the more of a curve the corner will have.

Box Shadow

You can change any of the following to affect the box shadow on the element:

Horizontal Shadow Length This is the position of the horizontal shadow. Negative values are allowed. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).
Vertical Shadow Length This is the position of the vertical shadow. Negative values are allowed. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).
Shadow Blur Length This is the blur distance. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

Shadow Color This lets you select a color for the shadow. You can use any of the following:

	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color or make the background transparent.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Shadow Inset This changes the shadow from an outer shadow (outset) to an inner shadow. Click in the field and select an option. If you select false the shadow will be outset. If you select true the shadow will be inset.

Event

You can enter a special JavaScript command that is triggered when an end user clicks a button. For example, the following command opens the MadCap Software website when a user clicks the button:

window.open("http://www.madcapsoftware.com");

Font

You can change any of the following to affect the font:

Color This lets you select a color for the font. You can use any of the following:

	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Family You can select or type a specific font family (e.g., Arial, Tahoma, Verdana).
Size You can change the font size. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points).
Weight You can click in this field and make the font normal or bold.
Style You can click in this field and make the font normal or italic.

General

You can change the color for the element.

	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Height

You enter a height for the element. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

Icon

You can click and select a different image for the toolbar button.

You can click the Display drop-down and choose one of the options:

none The element will not be shown.
block The element will be shown and adds a line break after it. For some elements this option might be called flex, which reflects the flexbox technology associated with it.

You can change the height or width of the element. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

Layout

You can click in the Display field and choose one of the options (some of these options might not be available for certain styles):

none The element will not be shown.
block The element will be shown and adds a line break after it. For some elements this option might be called flex, which reflects the flexbox technology associated with it.
inline The element will be shown but does not add a line break after it, allowing it to be positioned next to other elements.
inline-block The element will be shown but does not add a line break after it, allowing it to be positioned next to other elements. This is similar to inline; however, with this option, a width and height can be set on the element, and top/bottom margin and padding settings are respected.

Margin

You can change the margin for any of the sides on the element (Left, Right, Top, Bottom). In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

Padding

You can change the padding for any of the sides on the element (Left, Right, Top, Bottom). In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

Size

text

You can click the Display drop-down and choose one of the options:

none The element will not be shown.

block The element will be shown and adds a line break after it. For some elements this option might be called flex, which reflects the flexbox technology associated with it.

You can change any of the following to affect the font:

Color This lets you select a color for the font. You can use any of the following:

	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Family You can select or type a specific font family (e.g., Arial, Tahoma, Verdana).
Size You can change the font size. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points).
Weight You can click in this field and make the font normal or bold.
Style You can click in this field and make the font normal or italic.

Text Shadow

You can change any of the following to affect the text shadow on the element:

Shadow Visibility You can click in this field and choose to make the shadow either hidden or visible.
Horizontal Shadow Length This is the position of the horizontal shadow. Negative values are allowed. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).
Vertical Shadow Length This is the position of the vertical shadow. Negative values are allowed. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).
Shadow Blur Length This is the blur distance. In the first field type a number or use the arrows. Then click in the second field and select the unit of measurement (e.g., pixels, points, centimeters).

Shadow Color This lets you select a color for the shadow. You can use any of the following:

	You can type a hexadecimal number (e.g., #000000) directly in this field. Alternatively, you can click the down arrow and choose a color or make the background transparent.
	This opens the Color Picker dialog, which lets you choose a color in many ways. Note that you can select a CSS variable. See Color Picker Dialog.
	Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

Click to save your work.