Button Appearance

Fig 34Use an Image as a Button Fill

At the top of the Appearance Panel is a box which represents the button in the coding form which is highlighted if that button has an image in it. Any image can be used to fill any button in the Code Window. To place an image into a button, (or replace the image in a button,) just select the image and drag it to the box in the Appearance Panel and drop it. By default the image will be resized to fit the size and shape of the box and therefore the button. You may reset the image dimensions to the original image size and shape by clicking the button below the box, this will resize the button in the Code Window to fit the original image size. Or, use COMMAND + CNTRL + SHIFT + 3 to copy an image to the clipboard and then COMMAND + V to paste the image directly into the target button in the Code Window. In this case, by default the image will assume the size of the original image. If an image is copied directly into a Code Window it will by default create a Code button.

Fig 34

 

Change A Button Color

Click on the “Background color” pane and drag your cursor to the color chip in the color palette to select a color. Code rows can be sorted by color.

Set or change the Color of a Button Border

You may set or change a colored border around a button. Click on this pane and drag your cursor to the color chip in the color palette.

Border Width

The width of the border around a button can be increased or decreased by clicking the up or down arrows. The border is contained within the existing size boundaries of the button.

Lock a Button Position

Check the Lock position check box to lock the button in place in the Code Window. This will also prevent the button from being deleted accidentally.

Show Identifiers

This box is ticked by default. It displays the button identifier symbol. Uncheck this box if you do not want the symbol displayed.

WrapText

If this box is ticked, text will be wrapped within the horizontal confines of the button. If the box is not ticked, text will display on one line and extend beyond the horizontal borders of the button.

Display Button Name, Hotkey or Statistical Output

Tick the check boxes adjacent to the identifier to display the button name, Hotkey or cell information from a statistical window. If the box is not ticked, these properties will not be displayed.

Edit a Button Font

The Font properties of the Button Name, Hotkey and Statistical Output which may be displayed (font family, typeface, size, color etc) can be edited by clicking the “Edit Form” button adjacent to the checkbox and identifier for each of these. This can also be accessed by highlighting the button in the Code Window and selecting the Font icon from the Toolbar. Make your selection from the drop down panel. You may choose to edit any number of these from the Edit Font panel, by specifying your selection(s) from the boxes at the base of the panel

Change the Position of a Button Name, Hotkey and Statistical Output

  1. Click on the points of the text positioning tool.
  2. Click in the center box to reset the position to the center of the button.

Default Output Text

If the “Show Output” box is ticked to display the output of a statistical script to the button, by default a ? will be displayed. You may display any other character or set of characters as the default by specifying this here. The default will be overridden by any statistical output.

Button Opacity

You may set or alter the opacity (transparency) of a button in the Code Window by dragging the slider – left for more transparent (less visible) and right for less transparent (more visible.)

Button Geometry

The Button Geometry panel provides the facility to precisely position your button within the Code window and to precisely Fig 34adetermine the size of a button. Each display has an up and down arrow to increase or decrease the value in the display.

The X displays the position of the button from the left side of the Code window. Increasing the value will move the entire button to the right, decreasing the value will move the button to the left. The Y displays the position of the button from the top of the Code window. Increasing the value will move the entire button Down in the window, decreasing the value will move the button Up.

The Width displays the size of the button from left to right. Increasing the value will move the right side of the button to the right, decreasing the value will move the right side of the button to the left. The Height displays the of the button from top to bottom. Increasing the value will move the bottom of the button Down , decreasing the value will move the bottom of the button Up.

Note: If you enter anything other than a number in the Geometery fields an error message will display.

Fig 121 Fig 121

 


Fatal error: Call to undefined function get_top_parent_page_id() in /home/sporthelp/public_html/wp-content/themes/tropixel/footer-nav.php on line 27