Customizing Styles for Visuals

When applying custom styles, there are several approaches: setting site-wide custom styles, setting custom styles at the application level, setting styles for an application filter, or setting styles for a visual, described here.

Availability Note. By default, the Custom Styling option is turned off. It can be turned on by a user with administrative privileges; see Enabling Custom Styling.

To create custom styles in a visual,

  1. Click Settings on the right side of the Visuals menu.

    selecting visual settings menu

    The Settings modal window appears.

  2. In the Settings modal window, click Custom Styling.
  3. In the Custom Styling window,

    1. [Optional] In the CSS class for Visual field, enter the name of the class.
    2. [Optional] Under Included Styles, click Add Style.

      In the Pick Custom CSS modal window, select an existing style, and click Add.

    3. [Optional] Under Enter in-line CSS rules, enter the following code to set the font color of the table headings:

      th{
        color:#336699;
      }
  4. Note that you can review the style applied by clicking its ID, potentially configure the style by clicking the (gear) icon, or remove it by clicking the (x) icon.

    Click Apply.

  5. Click Apply.

  6. Click Refresh Visual.

Note the resulting style changes to the table visual.