ThingWorx 8.4 Style Themes

[#1]

Style theming is a Beta feature that allows you to customize the look of your mashups and widgets.

A style theme is a set of styling properties for elements such as text, colors, and lines that you can apply to a mashup. You can manage styles for multiple mashups more easily by using style themes. Style theme apply on a mashup level, unlike style definitions, which apply on a widget level. When you apply a style theme to a mashup, all embedded widgets and mashups will derive styling properties from the style theme for the top level mashup. You can perform the following tasks:

• Create and modify style themes.

• Apply a style theme to one or more mashups.

• Reuse a style theme by using Import/Export.

• Define custom CSS for a style theme. CSS rules are applied to all mashups that use the style theme.

Style theme support is limited to the following types widgets:

• New widgets — You can only apply a style theme to these widgets.

• Hybrid widgets — You can use style definitions or a style theme to style these widgets.

NOTE: You can enable or disable style themes for hybrid widgets by using the (BETA) UseThemeForHybrids property in the mashup properties panel. However, you cannot use style definitions with web component widgets.

To read more about Base Theme, Creating, and Modifying Style Themes, refer to our ThingWorx Help Center.

[sjoyce]

@posipova wrote:

To read more about Base Theme, Creating, and Modifying Style Themes, refer to our ThingWorx Help Center.

---

Can you take another whack at that help center link?

doesn't seem to be working.

[posipova]

not sure what happened there. Fixed!

[neisenhuth]

Hi Polina,

do you know if there is already some documentation on how to apply the styles from a theme to a custom widget? I used to work on custom charts and they use style definitions a lot. I want to make them also available for future releases but I have no clue what changed in the widget extension development regarding styling.

A copy of the JS & CSS code of a BETA widget would already be very helpful to do reverse engineering.

Best,

Niklas

[posipova]

It's best to open a separate thread or even a support ticket for this question (as other users could see easier than a response to the "iot tips" doc). But while I don't have a good answer you, perhaps grabbing one of the new widgets that come out with 8.5 and inspecting them through eclipse would help with understanding the style application?

This is an example of a typical path where the widgets are stored in Tomcat:

C:\Program Files\Apache Software Foundation\Tomcat 8.5\webapps\Thingworx\Common\thingworx\widgets