Widget Styling and Customization
Widget styling consists of five aspects.
Style Themes
You can customize the look of the mashup with style themes. You can create, modify, import and export style themes more easily to containers and supported mashups. When you apply a style theme to a top-level mashup, it is also applied to all the in use widgets and mashups. To learn more about style themes and how to apply them, see Style Themes, and Applying a Style Theme to a Mashup.
State Definitions and State Formatting
You can highlight trends and patterns in a visualization using state definitions, which enable you to apply different style definitions to a widget based on its data value. For more information, see Applying State Formatting to Widgets.
A state definition is a collection of style definitions accompanied by rules on when to apply each style definition. State definitions allow you to control, customize, and render the look of widgets. Colors, text, and line formats are managed and rendered in the mashup using style definitions. For more information, see Creating State Definitions.
State Formatting can be added to a widget by creating state definition entities with conditions for the formatting. Once created, you can edit and apply state formatting to a widget by clicking the Renderer and State or State Formatting button on the Properties panel.
For more information, see Applying a Style Theme to a Mashup.
Style Properties
By default, all widgets that support theming in a mashup derive their styling properties from the applied style theme. Style themes are applied to all mashups and themeable widgets. You can use the Style Properties panel to modify the style of individual widgets in a mashup. All themed widgets have their own set of style properties. You can modify style properties to override the style theme and create a different look for each widget.
For more information, see Using the Style Properties Panel.
Style Definitions
Style definitions are a select list of properties that can be defined when creating a style. Creating style definitions allow you to display a consistent look and feel for your mashup.
 |
Style definitions are applied to non-themable widgets.
|
Style definitions support a wide range of style aspects, such as Display String, Font Bold, Line Color, and many more.
Many style definitions come pre-installed. For more information about style definitions and how to use them, see Creating State Definitions .
Custom CSS
Custom CSS allows you to customize the appearance of your theme based on defined specific values. Applying custom CSS styles to a widget is not recommended. Custom CSS components may stop working if a component is changed in future versions of ThingWorx. For more information about Custom CSS, see the following: