How To: Edit the Title, Text, and Chevron Colors of the Accordion Menus in ArcGIS Hub

Summary

After the introduction of the Calcite Design System in ArcGIS Hub, the HTML formatting for layout elements has changed. This article describes the workflow to edit the title, text, and chevron colors of the accordion menus independent of the default theme colors in ArcGIS Hub.

The image below shows the default theme of the accordion menu in ArcGIS Hub.

The image of the default theme of the accordion menu in ArcGIS Hub.

Procedure

Open the ArcGIS Hub site in the edit mode.
Ensure the accordion menu is added to the site. Refer to ArcGIS Hub: Create an accordion menu for instructions.
Click </> Edit in HTML to configure the accordion menu.

Note:
The following method changes the title, text, and chevron colors of the accordion menus on the site collectively.

In the HTML window, copy the following code and paste it at the top of the existing HTML code. Replace HEX with the desired Hex color codes. Click Apply > Save.

Note:
The first ui-text tag modifies the hover effect and activated state. The second ui-text tag modifies the default text color and the third ui-text tag modifies the chevron color.

<head>
  <style>
    body * {
      --calcite-ui-text-1: #<HEX>;
      --calcite-ui-text-2: #<HEX>;
      --calcite-ui-text-3: #<HEX>;
    }
  </style>
</head>

The image of the HTML code to be pasted at the top of the existing HTML code.

Note:
Alternatively, in Step 4, copy the following code and paste it in the <div class> section of the existing HTML code to edit the accordion menus individually. Repeat this step for the other accordion menus.

style="--calcite-ui-text-1: #HEX; --calcite-ui-text-2: #HEX; --calcite-ui-text-3: #HEX;"