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

By default, defined Theme colors are applied to a Control when the Control is added to a Form. You can manually apply different colors, if needed. We recommend always using Theme colors (named colors on Theme tab in the Color Selector). If you apply non-Theme colors, Controls will not change to another Theme color when you apply a different Theme.

Use the Form Editor (accessed from within a Blueprint in CSM Administrator) to manually select background, foreground, and border colors for a Control. 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:

• Form 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 (ex: 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 (ex: System, Web, or RGB) is applied, the element does not change to another Theme color when applying a different Theme.
• Background, Foreground, and Border color options are available on the Form Editor toolbar and context (right-click) menu.
• 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 Control to red to indicate a high priority (ex: Priority 1).
• See Form Editor Behaviors for tips on working with Controls and the Form Editor.

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

1. Open a Form in the Form Editor.
2. Click one or more Controls.
3. On the Form Editor toolbar, click the drop-down arrow on the Background Color button , the Foreground Color button , or the Border color button .
   Note: Click the button itself to use the most recently used color (assuming you have set a color).
4. Select a color pattern, either:
   • 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.
5. Select a color, either:
   • Use Expression: Select this check box to use an Expression to conditionally change the color, and 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.
   • 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.

6. Publish the Blueprint (File>Publish Blueprint) to commit the changes, or save the Blueprint (File>Save Blueprint) to continue making other changes.