CSM 10.4 Documentation

Home

Select a Background, Foreground, and Border Color for a Widget

Use the Dashboard Editor to select a background, foreground and border color for the widgets on a dashboard.

Note: This topic describes defining and formatting widget colors on a form with a universal theme. If you are editing a dashboard with a classic theme, use this link to open the previous version of Select a Background, Foreground, and Border Color for a Widget.

By default, defined theme colors are applied to a widget when the widget is added to a dashboard. You can manually apply different colors, if needed; however, if you apply non-theme colors, widgets will not change to another theme color when you apply a different theme.

Good to know:

  • Dashboard theme colors are defined as part of a theme's definition. Use the Theme Manager to create a theme.
  • Each theme property is named and intended for a specific element on a dashboard, form, portal, or action catalog. When the element is added, the item's defined colors, styles, and fonts are applied by default. You can manually apply a different color or style to most widgets, if needed. For example, it is possible to use Dashboard Background color for text, but note that this may make the text invisible against the widget background. The key is to use theme colors, and to apply colors and styles consistently. If a non-theme color is applied, the element does not change to another theme color when applying a different theme.
  • Chart, Gauge, and Matrix widgets can have their own colors and styles and can be defined to override theme colors.
  • Image, Filter, and Search widgets do not support backgrounds; therefore, no background color or style can be applied.
  • Image widgets do not support text, background, foreground, or border colors; therefore no colors, styles, or fonts can be applied.
  • By default, some widgets have a transparent background (example: Text widget). To manually add a background, right-click the widget, select Background Color, and then select a background color.
  • Background, foreground, and border color options are available on the Dashboard Editor toolbar and from the context (right-click) menu.
  • Colors can be solid or transparent only, gradients can not be applied.
  • See Dashboard Editor Behaviors for tips on working with widgets on dashboards.

To Select a Background, Foreground, or Border Color for a Widget

  1. Open a dashboard in the Dashboard Editor.
  2. Select one or more widgets .
  3. On the Dashboard Editor toolbar, select the Background Color button Widget Background Color, the Foreground Color button Foreground Color Button, or the Border color button Border Color Button.

    You can also use the context (right-click) menu to select the above and additional functions.

    To access the background color selector for a button widget, right-click on the button and select Widget Properties > Button color.

    The Color Selector dialog opens. For more information, see Color Selector.

  4. Select a color, either:
    • Select a theme color: Select a pre-defined theme association color property from the Theme Association drop-down list (example: Widget Background).
    • Select or define a custom color: Select Custom from the Theme Association drop down list, and then either:
      • Select the Web tab, and then select a color from the list.
      • Select the Custom tab, and then define a color using the Color Selector controls.
  5. Continue making changes, or select OK to save and close the editor.


Was this article useful?