Mashup Builder > Theming > Styling a Container
Styling a Container
You can apply styling to a container through the mashup style theme, or directly on the Style Properties panel. Using style properties overrides the global theme styling for a specific widget. By default, containers are styled using the mashup style theme, but you can also use style definitions. The UseTheme property on the Properties panel controls theming mode for the container.
To display style theme properties for a container, do the following:
1. Select a container from the Explorer panel.
Alternatively, click an empty area inside a container.
2. Click the Style Properties panel.
3. Expand the Base state. The style properties are listed under the Container section.
You can switch from style theme styling to style definitions. To use style definitions, do the following:
1. Select a container.
2. On the Properties panel, clear the UseTheme check box.
3. Click the Style Properties panel.
Style definitions for the container are now displayed instead of style properties.
Custom CSS
You can apply different combinations of styles to containers, such as custom CSS, style themes, and style properties. The following is a list of styling rule priority, from highest to lowest:
Priority
Styling Method
Description
Highest
Style Property
Styles that are applied to a container using the Style Properties panel. You can use style properties to override the default styles that are applied from the style theme.
Mashup custom CSS
CSS rules that are applied on the Custom CSS tab of a mashup entity. A mashup CSS rule override style theme CSS rule when both rules have the same specificity.
Style Theme custom CSS
CSS rules that are applied on the Custom CSS tab of a style theme entity.
Lowest
Style Theme
Styles that are inherited from the style theme that is applied to the mashup. You can use themes to apply consistent default styles to all containers in a mashup.
In general, mashup-level CSS has higher priority than the style theme CSS. However, the priority may change depending on the specificity of the CSS rules. For example, you can increase the specificity of a custom CSS rules by adding the !important rule to a property as follows:
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
* 
We strongly recommend that you use styles themes and style properties instead of writing custom CSS rules.
Style Properties
You can specify the following style properties.
Property
Description
background
The background color of the container.
border-color
The color of the border lines.
border-radius
The radius of border corners. The property applies to all four corners of the container.
border-style
The style of border lines. You can set it to Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit, or None.
border-width
The width of the border lines.
You can use style properties to configure padding for the container in ThingWorx 9.3.3 or later using the following properties:
padding-bottom
padding-left
padding-right
padding-top
Customizing Container Style Properties
The following table lists the style property values for the flexcontainer element, compared to custom values for a styled container.
Style/Property
Default
Styled
Properties
background#ffffff
border-colorinherit
border-radiusNone
border-styleNone
border-widthNone
background#cccccc
border-color#AAE09F
border-radius4px
border-styleSolid
border-width4px
Preview
Default Container
Styled Container
* 
The default style property values are derived from the mashup style theme.
Was this helpful?