nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Possible to style accordion item in Custom CSS setting for Nearby Instant App?

MatthewKing

I'm using the Nearby Instant App and would like to style (change color) the results list header (not sure what the name is). I've been reading the calcite design system info on the developer website and using the sample tool it looks like I can change the color, but when I copy over to the Custom CSS on the Nearby Instant app it doesn't take. So the question is what's the CSS to change these items? Thanks!

This is from the developer website

Screenshot 2025-07-08 163945.png

And this is what I'm trying to style

Screenshot 2025-07-08 164251.png

Najděte více příspěvků označených jako

Accepted answers

khutchins

You should be able to update the background color for Nearby using the following css.

calcite-accordion{
--calcite-accordion-background-color:yellow;

}

And depending on how the app is configured you may be able to use just this option if all you want is the title area background to be a different color:

.calcite-mode-light, calcite-accordion{
--calcite-block-header-background-color:magenta;
}

All comments

khutchins

You should be able to update the background color for Nearby using the following css.

calcite-accordion{
--calcite-accordion-background-color:yellow;

}

And depending on how the app is configured you may be able to use just this option if all you want is the title area background to be a different color:

.calcite-mode-light, calcite-accordion{
--calcite-block-header-background-color:magenta;
}

MatthewKing

Thanks @KellyHutchins !

That second CSS did the trick. The first one created yellow around the items, but the next one (magenta) was what I was looking for. I thought I had already tried that one, but I guess not.

Another question, what's the CSS for the distance box (that color stayed white) for each of the items?

Screenshot 2025-07-10 121940.png Screenshot 2025-07-10 121901.png

khutchins

You should be able to style that section using the class (dist) that is applied. Here's an example:

.dist{
background:magenta;}
}

MatthewKing

Thanks @KellyHutchins, that worked!

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.