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 .
- 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.
- Use Expression: Select this check box to use an Expression to
conditionally change the color. Then, define the condition, using either:
-
Continue making changes, or click OK to save and close the editor.