The appearance settings are described below. They allow you to control the way the component looks, from its stroke and fill to the size of its text.
Tip: Commonly-used appearance settings are also available in the Appearance Bar.
Appearance Modes
The buttons at the top allow you to switch between the four Appearance Modes – Normal, Hover, Active and Press. These modes allow you to change a component’s appearance based on a user interaction. For example, a button’s stroke might change from outset to inset when a user presses it.
The Active mode is only supported by some components. It generally applies to links representing the current page or current value of a state. For example, you might use the active mode settings on a navigation component to remove the underline from the link to the current page.
Tip: Appearance settings are “inherited” by the modes. For example, the Hover settings are applied on top of the Normal settings. This means that you need only change the settings that you wish to be different for each mode.
Stroke
Stroke Settings
The stroke settings control the component’s stroke, or border.
Note: Due to the peculiarities of CSS, there are multiple ways to select “no stroke”. By default, most components will not have any stroke, so if you leave all fields blank, that is what you will get. Also, selecting None for the Style, “0” for the Width, None for the Color, “0” for the Opacity, or unchecking the Sides can all cause there to be no (visible) stroke. Keep this in mind when using the stroke settings.
| Name | Description |
| Style | Visual style of the stroke. |
| Width | The width of the stroke line(s). The actual width of the stroke is also affected by the style. For example, since the “double” style draws two lines with a gap between them, the actual width will be 3 times the stroke-width setting. |
| Color | The color. |
| Opacity | The opacity of the stroke, with “0” being transparent and “100” being opaque. |
| Stroke Sides | Controls which sides of the component’s box have a stroke. |
Fill
Fill Settings
The fill settings control the component’s fill, or background.
You can fill the component with a solid color and/or an image.
| Name | Description |
| Color | The (solid) fill color. |
| Opacity | The opacity of the fill color, with “0” being transparent and “100” being opaque. |
| Image | The fill image. |
| Image Placement | Placement of the fill image. You can choose to have the image centered in the component, stretched to fill it, or tiled (repeated). |
Box
Box Settings
The box settings control the overall appearance of the component.
Note: The Opacity, Rotation and Cursor settings will affect the contents of a container as well.
| Name | Description |
| Opacity | Overall opacity of the component, with “0” being transparent and “100” being opaque. Note: This affects the component’s stroke, fill and text independently from their own opacity settings. |
| Rotation | Rotates the component on the page. (The position and operation of the selection handles on the canvas are not affected by this setting.) |
| Cursor | Mouse cursor that will be displayed when hovering over the component.Tip: Choose Automatic to have the cursor determined automatically based on whether the component has any On Click actions defined. |
| Shadow | Drop- or inset-shadow for the component’s box. |
| Rounding | Amount of rounding applied to the component’s corners.Tip: Use Full rounding to make circles and ovals. |
| Rounding Corners | Controls which corners of the component’s box are rounded. |
Text
Text Settings
The text settings control the appearance of text inside the component.
Note: Some components do not contain any text. These settings are disabled for those components.
| Name | Description |
| Color | The text color. |
| Opacity | The opacity of the text, with “0” being transparent and “100” being opaque. |
| Size | Size of the text (in pixels). |
| Font | Font to use for the text.Tip: You can include your own custom fonts using the project style sheet. |
| Weight | The weight of the text. In addition to Normal and Bold, you can select other weights from Ultralight to Semi-Bold, but not all fonts include all of these weights. |
| Style | The style of the text, Normal or Italic (oblique). |
| Decoration | Underline, strike-out, etc. style of the text. |
| Shadow | Drop-shadow for the component’s text. |
Alignment and Padding
Alignment and Padding Settings
The alignment and padding settings control the layout of the component’s content.
| Name | Description |
| Horizontal Align | Horizontal alignment of the component’s content. |
| Vertical Align | Vertical alignment of the component’s content. |
| Line Spacing | Vertical spacing of the text in the component. |
| Padding | Padding for the component’s content, in pixels. |
| Padding Sides | Controls which sides of the content are padded. |