Mashup Builder > Theming > Styling a Container
Styling a Container
Advanced responsive mashups include containers that you can apply a style theme to. You can apply styling through the mashup style theme, or directly on the Style Properties panel. 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 flexcontainer element.
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.
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.
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?