Wherever the style property and the Stylesicon appear in the Property Editor, you can click on the icon to display the style editor.
The following menus are available in the style editor:
- Margin and Padding
You can quickly make adjustments to the styles by clicking on them in the Applied Styles panel.
When you hover over a style listed in the panel, a Deleteicon is displayed. Click on it to delete the style.
If you made new edits to an existing style attribute, you can hover over the style and an Undoicon is displayed. Click on it to revert to the previously saved setting.
You can minimize the Applied Styles panel by clicking on the Arrowicon to the left of the name. Click the arrow again to reopen the panel.
Expanding a category enables you to set the properties associated with it. Here is an example of the Style Editor with the Text menu expanded and a few options selected:
Applying individual style elements to a component will overwrite the settings for the same style elements being applied from a Style Class. Some components can have multiple individual Style elements, with each one focusing on a different part of the component. When these styles have a conflict, the more specific style wins out, and sets the style for that particular property.
Applying individual style elements to a component will overwrite the settings for the same style elements being applied from a Style Class.
Some components can have multiple individual Style elements, with each one focusing on a different part of the component. When these styles have a conflict, the more specific style wins out, and sets the style for that particular property.
Styles, by default, make use of pixels (px) when it comes to length. However all CSS lengths are available and can be used by specifying the unit. For example, a font can be specified in points by appending the unit "pt". For example:
Creating a Style
- In a coordinate view, drag a Gauge component and a Label component.
- Select the Gauge component and click the Styles
The style editor is displayed. Each of the pull down menus has options. These options are described in the Style Reference. icon in the properties for the component.
- Click on the Text menu then set the following style options:
Font Family: Verdana
As you select Style elements, they appear in Applied Styles column on the left.
- Next select the Label component and click the Styles icon.
- Expand the Text menu and set the following style options:
Font family: Verdana
- Expand the Background menu and set the following style option:
Background Color: #FFFFCC
Expand the Padding menu and set the padding to 8 for all four sides.
- Click OK to save the changes. You will notice those properties now appear in the components Style, letting you know that those particular elements have a style applied to them.