Specifying Style Settings for Toolbar Items—WebHelp Mobile

Control type To change the control type for the item (i.e., you can select any type of button that can be added to the toolbar):

• Expand the Type property group on the right and select an item in the ControlType field.

Font background color To change the color of the area behind the font:

• Expand the Font property group on the right and change the value in the BackgroundColor field. Click the down arrow to open a color palette window. You can click a color shown, or you can click More colors and select a different color or create a custom color.

Font background gradient To change the background color of the item:

• Expand the Font property group on the right and change the value in the BackgroundGradient field to apply a color progression effect. The background changes from one color to another. Click the down arrow to open a small window. In this window, click the down arrow next to the Start field and select a color to use at the beginning of the gradient. Then click the down arrow next to the End field and select the color to use at the end of the gradient. Finally, click the down arrow next to the Style field and select a direction for the gradient effect or choose "solid." Click OK to accept the settings. When you click off the properties field, a small icon is displayed in the field, showing how the effect will look.

Font color To change the color of the font:

• Expand the Font property group on the right and change the value in the Color field. Click the down arrow to open a color palette window. You can click a color shown, or you can click More colors and select a different color or create a custom color.

Font family To select a specific font family (e.g., Arial, Tahoma, Verdana):

• Expand the Font property group on the right and change the value in the FontFamily field. After you click in the field, the Font Family Picker dialog opens. Use this dialog to select the font family and click OK.

Font size To change the size of the font:

• Expand the Font property group on the right and change the value in the FontSize field. Click the down arrow to open a small window. In this window, you can enter the size of the font in the lower-left field (either type a number or use the up and down arrows). You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-right drop-down arrow. See About Units of Measurement. You can return to the default setting by using the upper-right drop-down arrow.

Font style To change the style of the font (e.g., make it italic):

• Expand the Font property group on the right and change the value in the FontStyle field. Click the down arrow and select either italic or normal.

Font weight To change the weight of the font (e.g., make it bold):

• Expand the Font property group on the right and change the value in the FontWeight field. Click the down arrow and select either bold or normal.

Icon To select a different icon image:

• Expand the General property group on the right side of the editor and select an image from the Icon field. Click the down arrow in this field and then select Browse for Image to find and select an image file.

Label To change the text that appears on the item:

• Expand the General property group on the right side of the editor and enter new text in the Label field.

On clickTo provide a command for the item when it is clicked by the user:

• Expand the Type or General property group on the right and enter a command in the OnClick field.

example

Let's say you want to provide a command for an item (e.g., so that clicking the button opens a website). The following command opens the MadCap Software website when a user clicks the button:

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

Padding To add or change padding (space around) the item:

• Expand the Font property group on the right and change the value in any of the "Padding" fields (e.g., PaddingLeft, PaddingRight). Click the down arrow to open a small window. In this window, you can enter the amount of padding in the lower-left field (either type a number or use the up and down arrows). You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-right drop-down arrow. See About Units of Measurement. You can return to the default setting by using the upper-right drop-down arrow.

Separator alternate text To change the alternate text for the separator (for Section 508 compliance):

• Expand the General property group on the right side of the editor and enter new text in the SeparatorAlternateText field.

TextImageRelation To select the location of a label in relation to the image used for the item:

• Expand the General property group on the right side of the editor and select an option from the TextImageRelation field. You can select any of the following:
  • ImageAboveText This displays the button image on top of the label text.
  • ImageBeforeText This displays the button image to the left of the label text.
  • Overlay This displays the label text and the button image in the same space.
  • TextAboveImage This displays the label text on top of the button image.
  • TextBeforeImage This displays the label text to the left of the button image.