Configure contextual colors and icons

Use the Contextual colors and icons form to configure color, text, and icons to have different default or custom contexts, identified by a context ID.

Before you begin

Role required: admin

About this task

You can customize the colors or icons of elements in the Contextual colors and icons form to affect the displayed colors or icons of severities in related Event Management screens, either when accessibility mode is off or on. For more information about accessibility, see Accessibility features .
In each color selection field, you have the option of entering the value of the color as any of the following Cascading Style Sheet (CSS) formats that determine how HTML elements should be displayed:
  • Name: predefined color names, such as red, green, olive, blue, darkblue, lightblue
  • RGB decimal: RGB(102, 153, 204)
  • RGB hex: #223344
See the following websites for information about CSS color declarations (including hex or RGB notation):
The context IDs that are provided with the base instance are:
  • information_severity
  • warning_severity
  • minor_severity
  • major_severity
  • critical_severity
  • topology_connection

Procedure

  1. Navigate to Event Management > Settings > Contextual colors and icons.
  2. Click New or modify an existing configuration.
  3. Configure the following fields.
    Item Description
    Context details
    Context ID Enter a unique ID for the context, for example, clear_severity.
    Context Name Readable name for the context. This text is available to be read out by screen readers.
    Batch The batch that this context is a member of.
    Description Description of uses for the context.
    Colors
    Note: For each entry in the color fields, after you enter a color code, a block appears to the right of the field showing the specified color. Use of invalid color codes triggers an appropriate error notification.
    CSS Color The corresponding CSS color code for the context color name.
    CSS Color on Interaction CSS color code that appears on hover or focus.
    Accessible CSS Color Accessible CSS color code that appears when accessibility mode is enabled.
    Accessible CSS Color on Interaction Accessible CSS color code that appears on hover or focus.
    Icons
    Icon Icon that is displayed when the context includes an icon.
    Accessible Icon Icon that is displayed when the context includes an icon and when accessibility mode is enabled. To add your own icon, or to see a list of available icons, see Upload one or more images .
  4. Click Submit.