Customize with CSS

ArcGIS Instant Apps supports Cascading Style Sheets (CSS) customization, which allows you to make tailored changes to your web app’s appearance that may not be available in existing configuration settings. You can modify various aspects of the web app's appearance, such as the text size and focus indicator color.

Caution:

Though CSS customization is available, it is recommended that you use all the provided configurations available in Instant Apps to customize your web app’s appearance. Not all CSS classes will work to change existing elements.

ArcGIS Instant Apps templates are built using the Calcite Design System, which provides a set of design guidelines and reusable components to create intuitive and consistent interfaces. You can customize the style of your app by overriding the Calcite variables to change the appearance of the app.

Use the CSS customization option

After you finish configuring your web app, you can start customizing it using CSS.

Note:

Some templates do not support custom CSS. Refer to the app tools matrix (PDF) to see which templates support custom CSS.

To use the CSS customization option, complete the following steps:

1. In the side panel, disable Express mode, and when the confirmation prompt appears, click Continue.
2. Click Search settings and search for Custom CSS.

   The Theme & Layout settings appear.

3. Click Edit in the Custom CSS section.

   The Custom CSS window appears.

4. Provide a CSS class to override the different elements of your app.
5. Click Close to apply the custom CSS.

   Your changes are now displayed.

6. Click Publish once you are satisfied with your customization to deploy your customized app.

Caution:

Instant Apps updates for the source template may impact an app's custom CSS, so test the app after each product release.

CSS classes

The sections below outline examples of CSS classes that can be used to apply unique styling and formatting to an app.

Customize the font size

You can write a CSS class that changes the font size of the text.

In the following CSS override rule, you can customize the font size of a Sidebar header in a Sidebar Instant Apps template:

h3.esri-widget__heading {
  font-size: var(--calcite-font-size-0);
}

The header text is now displayed in a 0 font size, which is 1 rem or 16 pixels in size.

Customize the focus indicator color

You can write a CSS class that changes the focus indicator color for interactive elements in your app. This appears as an outline surrounding a selected element.

To change the focus indicator color, you can use the following CSS class:

.calcite-mode-dark{
--calcite-color-focus:#FFFF00;
}

This class changes the focus color of interactive elements to the hexadecimal value of #FFFF00 when selected, which appears as yellow.

Customizing the focus indicator color can create more contrast with your web app’s theme colors, increasing accessibility for users with visual impairments.