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.

Use the Dashboard Editor to manually select background, foreground, and border colors for a Widget. Colors can come from:

CSM Theme (Recommended): All colors defined for the selected CSM Theme.
System: Set of colors provided by your Operating System. System colors can greatly vary depending on the Operating System and browser used to view the color.
Web: Set of named Web-safe colors.
Custom RGB colors: Customized Red, Green, Blue (RGB) colors.

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, or Portal. When the element is added, the item's defined colors, styles, and fonts are applied by default (example: Form Control colors, border style, and fonts are automatically applied to a Control when the Control is added to a Form). Manually apply a different color or style to most elements, if needed. For example, it is possible to use Form Background Color 1 for text. The key is to use Theme colors, and to apply colors and styles consistently. If a non-Theme color (example: System, Web, or RGB) 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, Text Gauge Widgets have a transparent background. To manually add a background, right-click the Widget, select a background style, and then select a background color and border color.
Background, Foreground, and Border color options are available on the Dashboard Editor toolbar and from the context (right-click) menu.
Access the background color picker for Button Widget by right-clicking the button and choosing Widget Properties > Button color.
Colors can be solid or can contain gradients.
Colors can be transparent.
Colors can be conditional (Expression-driven): For example, define an Expression to conditionally change the background color of a Widget to red to indicate a surpassed threshold (ex: Open Incidents surpassed 100 count threshold).
See Dashboard Editor Behaviors for tips on working with Widgets on Dashboards.

To select a background, foreground, or border color for a Widget:

Open a Dashboard in the Dashboard Editor
Click one or more Widgets.
On the Dashboard Editor toolbar, click the drop-down arrow on the Background Color button , the Foreground Color button , or the Border color button .
Tip: Click the button itself to use the most recently used color (assuming you have set a color).
Select a color pattern:
- Solid color: Uses one color (First Color) for the background. Click a color in the list.
- Gradient (left-to-right or top-to-bottom): Uses a gradient between two colors (First Color and Second Color). Click two colors in the list, and then click Select.
Select a color, either:
- Use Expression: Select this check box to use an Expression to conditionally change the color. Then, define the condition, using either:
  - Custom Expression: Click the Custom Expression button to open the Custom Expression Builder, and then create a custom Expression specifically for this scenario.
  - Stored Expression: Click the Ellipses button to open the Expression Manager, and then select an existing stored Expression or create a new stored Expression. Stored Expressions can be reused in numerous places in CSM.
- Select a color category:
  - Theme (Recommended): All colors defined for the selected CSM Theme.
  - System: Set of colors provided by your Operating System. System colors can greatly vary depending on the Operating System and browser used to view the color.
  - Web: Set of named Web-safe colors.
  - Custom: Customized Red, Green, Blue (RGB) colors.
Continue making changes, or select OK to save and close the editor.