Skip To Content

Style Indoors for your organization

ArcGIS Indoors Web is designed to allow the customization of the logos and color scheme of the web app elements for an organization. For example, a university can make changes to match the school colors. This is done by editing values in the theme.css file, in <Portal installation location>\portal\apps\indoors\app\style\css, that controls the styling of elements in the app.

The following sections describe the options in this file and the appearance they control. In the following screenshots, customized components appear in red.

Brand logo

You can replace the default Esri logo with a custom one of your choice. The icon must be available via URL and be in an appropriate format, for example, PNG. Once added, it's possible to make subtle changes to the size of the image.

/* Logo name (mobile form factors) */
--i-logo-name: ArcGIS Indoors;

/* Logo displayed in app and print output */
--i-logo-url: "./assets/arcgis_indoors_android_144.png";

/* Logo width (max width 3rem) */
--i-logo-width: 2.5rem;

/* Logo height (max height 3rem) */
--i-logo-height: 2.5rem;

/* Logo width for print output */
--i-logo-print-width: 40px;

/* Logo height for print output */
--i-logo-print-height: 40px;

Primary, secondary, tertiary, and brand text colors

Changing these color values changes the colors for the backgrounds of the main menu buttons and the info panel header.

/* Color of primary text and some icons (ex. text in panels, map tool icons) */
--i-color-text-primary: #4c4c4c;

/* Color of secondary text and some icons (ex. subtitles in left and panels, some icons in the left panels) */
--i-color-text-secondary: #9e9e9e;

/* Color of tertiary text. Used for some text messages. */
--i-color-text-tertiary: #cccccc;

/* Brand primary text color. Color for text that sits on top of the brand color. (ex. text in info panel header) */
--i-color-brand-text-primary: #ffffff;

--i-color-text-primary:

--i-color-text-primary example

--i-color-text-secondary:

--i-color-text-secondary example

--i-color-brand-text-primary:

--i-color-brand-text-primary example

Brand primary color

Changing these color values changes the colors for the backgrounds of the main menu buttons and the info panel header.

/* Brand primary color (ex. color of navigation menu, header for info panel) */
--i-color-brand-primary: #005e95;

Color changed to red on the info panel header
Color changed to red on the navigation menu

Brand secondary color

Changing this color value changes the colors for action buttons in the info panel and the action links in the Directions panel.

/* Brand secondary color */
--i-color-brand-secondary: #94221E;

Action buttons and links in the info panel
Action buttons and links in the Directions panel

Menu colors

Changing these color values changes the color of elements of the navigation menu.

/* Background color of menu icons (web) */
--i-color-brand-menu-icon-background: #5494b7;

/* Color of highlighted button in navigation menu (web) */
--i-color-brand-menu-icon-highlight: #003E62;

/* Color of text for buttons in navigation menu (web) */
--i-color-brand-menu-icon-text: #BED5E0;

/* Color of buttons in navigation menu (kiosk) */
--i-color-brand-menu-background-kiosk: rgba(0, 94, 149, 0.95);

/* Color of highlighted button in navigation menu (kiosk) */
--i-color-brand-menu-highlight-kiosk: rgba(0, 62, 98, 0.95);

--i-color-brand-menu-icon-background:

--i-color-brand-menu-icon-background example

--i-color-brand-menu-icon-highlight:

--i-color-brand-menu-icon-highlight example

--i-color-brand-menu-icon-text:

--i-color-brand-menu-icon-text example

--i-color-brand-menu-background-kiosk:

--i-color-brand-menu-background-kiosk example

--i-color-brand-menu-highlight-kiosk:

--i-color-brand-menu-highlight-kiosk example

Background colors

Changing these color values change the background colors used in the app.

/* Background color for panels and map tool buttons. */
--i-color-background: #ffffff;

/* Color of background while hovering in panels and drop-down menus. */
--i-color-background-highlight: #efefef;

/* Color of modal background */
--i-color-modal-background: rgba(0,0,0,0.4);

--i-color-background:

--i-color-background example

--i-color-background-highlight:

--i-color-background-highlight example

--i-color-modal-background:

--i-color-modal-background example

Border and Shadow colors

Changing these color values change the background and border colors used for the toast notification.

/* Color of borders */
--i-color-border: #dfdfdf;

/* Color used for box shadowing. Shadow for application panels. */
--i-color-panel-shadow: rgba(0,0,0,0.74);

/* A lighter version of the panel shadowing. */
--i-color-box-shadow-light: rgba(0,0,0,0.3);

--i-color-border:

--i-color-border example

--i-color-panel-shadow:

--i-color-panel-shadow example

--i-color-box-shadow-light:

--i-color-box-shadow-light example

Toast colors

Changing these color values change the background and border colors used for the toast notification.

/* Color of toast notification background */
--i-color-toast-background: #efe397;

/* Color of toast notification border */
--i-color-toast-border: #d9bf2b;

/* Color of toast notification background (danger) */
--i-color-toast-background-danger: #e4a793;

/* Color of toast notification border (danger) */
--i-color-toast-border-danger: #ab3c16;

--i-color-toast-background:

--i-color-toast-background example

--i-color-toast-border:

--i-color-toast-border

  1. To style Indoors Web, browse to the <Portal installation location>\portal\apps\indoors\app\style\css folder and open the theme.css file in an editor of your choice.
    Tip:

    It is helpful, but not necessary, to have access to a web development environment and be familiar with CSS. Having an editor like Notepad can be enough.

  2. Modify the color or size for all the components you want to customize.
  3. Save the file.