Instant Apps Custom CSS

4869
21
Jump to solution
12-22-2023 09:00 AM
Tiff
by
Frequent Contributor

Hello! I am looking for support on learning custom CSS options for the Nearby Instant App.

These are some customizations we would like to have in our app. Would it be possible to:

1) Change the font size and bold text in some areas i.e., "Clear search location"

2) Change the background (secondary) color behind just the "Filter" button. We want to make this more apparent and easy to see.

3) Change the text in the filter widget to "Close Filter".

Any suggestions or help appreciated. I have only used custom CSS where Esri staff or others on this forum have suggested, so limited knowledge on this.

0 Kudos
21 Replies
Amanda__Huber
MVP Regular Contributor

@KellyHutchins we would like to change the color of this element to white, are you able to send the CSS in order to do so? 

Amanda__Huber_0-1743107549502.png

Thanks!

0 Kudos
KellyHutchins
Esri Frequent Contributor

Looks like sidebar correct? Yes but the image above looks white to me (could be my monitor). I'm trying to determine if its the panel that is a different color or if its background to the content in the panel? Here's a sample app where i've modified the colors for both of those sections using obnoxious colors to make it easy to determine which you want to modify:

https://jsapi.maps.arcgis.com/apps/instant/sidebar/index.html?appid=95f26b9abb834827a168f628c08d9695

Once you determine the color to change you can use the value #fff to set the color to white. 

#details{
background-color:magenta;
}
#details-panel{
--calcite-panel-background-color:yellow;
}

 

0 Kudos