Mashup Builder > Style Themes (Beta)
Style Themes (Beta)
ThingWorx features new (Beta) style theme functionality, which you can use now. Style themes will be a standard feature in future releases of ThingWorx. New widgets for this release and future releases will only work with style themes. We plan to deprecate style definitions in a future release, and to replace them with the new, more powerful style theme features.
A style theme is a set of properties you apply to elements in a mashup such as text, colors, and lines. You can manage styles for multiple mashups more easily with style themes. Style themes apply on a mashup level. When you apply a style theme to a top-level mashup, it is also applied to all embedded widgets and mashups. You can perform the following tasks:
Create and modify style themes.
Apply a style theme to one or more mashups.
Reuse a style theme using Import/Export.
Preview a style theme by clicking the Preview icon.
Define custom Cascade Style Sheets (CSS) rules for a style theme. CSS apply to all mashups that use the style theme.
For more information about applying CSS rules to style themes, refer to the SDK documentation. The SDK is available on under Download Software > Order or Download Software Updates > ThingWorx Platform > Release 8.4.
You can apply a style theme to the following types of widgets:
New Beta widgets — You can only apply a style theme to these widgets.
Hybrid widgets — You can apply a style theme or style definitions to these widgets.
In the mashup properties panel, enable or disable style themes for hybrid widgets with the (BETA) UseThemeForHybrids property. However, you cannot use style definitions with the new Beta widgets.
For more information about hybrid widgets, see Hybrid Widgets (Beta).
Base Theme
The Base Theme is a system entity, and it includes predefined styling settings that cannot be modified. The Base Theme is applied to mashups by default, unless you create and apply a different style theme. When a mashup style theme is deleted or is inaccessible, the Base Theme is applied to the mashup.
To display the Base Theme, do the following:
1. From Composer, click Browse > Style Themes (BETA). A list of style themes appears.
2. On the search toolbar, click the Filter icon, and then select the Show System Objects check box.
Show System Objects
3. Click Apply.
Modifying Style Theme Settings
You can modify the following style theme settings:
Global — General mashup style settings that affect all widgets.
Element — Specific elements used by some widgets.
For more information, see Modifying a Style Theme (Beta).
Using Style Themes with an Existing Mashup
Before you apply a style theme to an existing mashup, manually create style definitions and CSS rules in the style theme.
Your existing mashup may contain hybrid, standard, and legacy widgets.
If your existing mashup contains widgets that are replaced by new Beta widgets, we recommend upgrading your mashup by using the new Beta widgets with style themes.
1. Enable style themes for hybrid widgets. In the Mashup properties panel, enable the (BETA) UseThemeForHybrids property.
2. Use a style theme with your existing hybrid widgets by enabling the (BETA) UseThemeForHybrids property.
3. Review the style definitions for hybrid widgets.
4. Create a style theme that matches these style definitions.
Using a Style Theme with a New Mashup
1. Create a new mashup by using a responsive layout.
2. Use new Beta widgets instead of old widgets.
3. Create your own style theme, and then apply it to the mashup. Alternatively, use the default Base Theme.