Skin form — Styles tab

Components — Buttons

Styles set here apply to buttons. For the following formats, you can specify the height of the button and the style of the text, border and background:

Standard — Default format applied to buttons
Simple
Strong

You can also create custom button formats.

Button Styles

To preview changes, save the rule and click Run ( Run ). In the Skin Preview, select the Controls tab.

Text

Style Preset

Displays the currently selected Style Preset.

Click the magnifying glass () to select a different Style Preset from the Style Preset list.

Use Custom Text

Select this checkbox to define a custom text format:

Font— Select the font family and size in pixels (px), points (pts), em (the current font size), or percentage (%). The font family defaults to (use overall), which is the font you specified in the Overall Font field in the Style Presets.
Color — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.
Bold — Select or clear the checkbox to determine the font-weight.

Border

Style Preset

Displays the currently selected Style Preset.

Click the magnifying glass () to select a different Style Preset from the Style Preset list.

Use Custom Border

Select this checkbox to define a custom border:

same for all sides — clear this checkbox if you want to specify a different border style for Top, Left, Right, and Bottom.
Select a border type and specify the pixel width and color of the border:
none, solid, dashed, or dotted.

Background

Style Preset

Displays the currently selected Style Preset.

Click the magnifying glass () to select a different Style Preset from the Style Preset list.

Use Custom Background

Select this checkbox to define a custom background:

solid — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color. Click No Fill if you want a transparent background.
gradient (IE only) — Select the Direction in which you want to blend the colors, horizontal or vertical. Specify the Start and End colors of the gradient, as well as a Backup color for non-IE browsers.
image — Specify the Left, Middle, Right background images:
- Color — Select a background color (fill). Enter the CSS hexadecimal value or click the box next to the field to Choose a Color. Click No Fill if you want a transparent background.
- Image — Enter the location of the file, including the relative path. For example, images/AlphaCorpLogo.png.
  To search for an image, click () to open the Image Catalog tool. Enter any portion of a file name (relative path, file name, or extension) in the Search box, and click Find. If you can’t find the image, make sure it is in the webwb directory.
- Width — Enter the width of the image in pixels.
- Tile — For the Middle image, select None if you do not want tiling, or select Horizontal if you want a row of images in the background.
- Position — For the Middle image, specify the placement of the starting tiled image, for example, bottom left.

Height

Height

Specify the height of the button by entering a value in pixels.

Creating Custom Button Formats

Creating a custom button format

Click .
Type the name of the custom format using only alpha-numeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The name that you enter is converted into the name of the CSS class/classes.
Specify the values.
Save the skin.

Using a custom button format

In the cell containing the pxButton control, click the magnifying glass icon () to open the Cell properties panel.
In the Cell properties panel, click the magnifying glass icon () to configure the control.
In the control Parameters dialog, select Other in the Format drop-down. Type the custom link format name in the blank field that appears, for example, rounded_image. See Completing the Control tab.

See Harness, Section, and Flow Action forms — Adding a Button control.

You can delete styles that you create; click Delete Link . You cannot delete standard (out-of-the-box) styles.

Harness, Section, and Flow Action forms — Adding a Button control

Skin rules — Completing the Styles tab
About Skin rules