topic Re: Possible to style accordion item in Custom CSS setting for Nearby Instant App? in Calcite Design System Questions

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

MatthewKing — Tue, 08 Jul 2025 20:46:37 GMT

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

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

KellyHutchins — Wed, 09 Jul 2025 17:29:31 GMT

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; }

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

MatthewKing — Thu, 10 Jul 2025 16:25:03 GMT

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.pngScreenshot 2025-07-10 121901.png

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

KellyHutchins — Thu, 10 Jul 2025 22:46:03 GMT

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

.dist{ background:magenta;} }

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

MatthewKing — Thu, 17 Jul 2025 17:59:34 GMT

Thanks @KellyHutchins, that worked!