topic Re: Instant Apps Custom CSS in ArcGIS Instant Apps Questions

Instant Apps Custom CSS

Tiff — Fri, 22 Dec 2023 17:00:04 GMT

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.

Re: Instant Apps Custom CSS

KellyHutchins — Fri, 22 Dec 2023 17:41:23 GMT

Changing the button text is tricker and not sure we can do it with CSS in this particular scenario but if I think of a way to do it I'll post back here. The rest you can accomplish - here's an example:

// This controls the font weight (bold) and size of the clear search .clear-btn.esri-component{ --calcite-font-weight-normal:800; --calcite-font-size--1:20px; } // This changes the background color and text color of the filter button #filterButton{ background-color:#163c5e; --calcite-ui-text-3:#fff; } // If you change the filter button background you might also want to change // the text color when the button is hovered. #filterButton:hover{ --calcite-ui-text-1:#fff; }

Re: Instant Apps Custom CSS

Tiff — Fri, 22 Dec 2023 19:39:39 GMT

This is incredibly helpful, thank you @KellyHutchins! These changes worked in my map. Please let me know if you are able to do the "Close Filter" text change.

In terms of learning more about CSS, much of it is probably learning the syntax but also understanding each of the components and elements, for example #filterButton and .clear-btn.esri-component{

Is this the best documentation location to find out more about customizations? Are there any other resources you'd recommend? https://developers.arcgis.com/documentation/app-builders/no-code/arcgis-instant-apps-calcite-variables/

edit - however, it looks like this provides the calcite variables but not things like #filterButton:hover - is there documentation with these detailed?

Re: Instant Apps Custom CSS

Tiff — Fri, 22 Dec 2023 19:38:34 GMT

Hi @KellyHutchins, related question - it looks like in the code above I can set filter background color, funnel color, and funnel color when hovered over which I have done as blue, white, and yellow respectively. Once clicked and mouse is moved away, the funnel color is black. If you click elsewhere, it is white (funnel color) again. It looks like the black funnel color is only temporary, however, I think we need to fix this due to accessibility/contrast problems. Is there a way to make sure the funnel color is either white or yellow?

Re: Instant Apps Custom CSS

KellyHutchins — Fri, 22 Dec 2023 20:21:23 GMT

@Tiff this should get you what you need:

#filterButton:hover, #filterButton:active, #filterButton:focus{ --calcite-ui-text-1:#fff; }

Re: Instant Apps Custom CSS

KellyHutchins — Fri, 22 Dec 2023 19:48:27 GMT

That article is a good starting point. It can get confusing about what can be changed and what can't due to how some of the components of the app are created.

Re: Instant Apps Custom CSS

Tiff — Wed, 27 Dec 2023 16:20:11 GMT

Amazing, thank you! Another question that came up about customization - can the zoom to button for each feature be altered?

For example, can we make it bigger/more apparent and also make it clear that that is a "Zoom To" button by adding text near it? We could put this in the introduction panel but think that adding more info in the results panel itself will be more helpful for our users. Really appreciate your help on this as all of these asks are for accessibility reasons!

Re: Instant Apps Custom CSS

KellyHutchins — Wed, 27 Dec 2023 18:35:43 GMT

You can do something like this... the horrible colors are just an example and this would definitely need some additional work to make it look good. But also wanted to mention that the app as-is should pass WCAG 2.0 AA accessibility standards. Did you have violations of these accessibility standards reported? If so please pass them along so we can address the issues in the next release.

.action-bar calcite-action{ --calcite-ui-foreground-1: yellow; border: solid 1px green; width:121px; --calcite-ui-icon-color: green; } calcite-action.directions-button.left.calcite-mode-light.zoom-action:after { color: green; content: "Zoom To Feature"; background: yellow; height: 100%; width: 80px; text-align: center; }

Re: Instant Apps Custom CSS

Tiff — Mon, 08 Jan 2024 16:19:44 GMT

Hello @KellyHutchins - thank you very much for this - it worked very well. I am ecstatic that all of these customizations are possible. That being said, using CSS is there any way to update buttons of "Reset Filter" and "Close" that exist at the bottom of the filter widget, and move them up to the top?

Thanks also for the information on accessibility. unfortunately we have not been able to do any formal testing on Instant Apps but may do so in the future. It's great to hear they meet 2.0 AA accessibility standards; our organization is moving towards the 2.1 requirements as that will be in place after the DOJ rule. Please let me know if there is any other information you think is useful for us to know!

Re: Instant Apps Custom CSS

KellyHutchins — Tue, 09 Jan 2024 17:46:19 GMT

@Tiff it might be possible but I think you'd run into potential issues at each release updating to handle any possible css changes. Unless there is a compelling reason to move the buttons to the top I wouldn't recommend it.

Re: Instant Apps Custom CSS

Tiff — Tue, 16 Jan 2024 16:59:27 GMT

Thank you again @KellyHutchins, I understand that. On that same topic, would you be able to share the code with me to change the text/wording of those buttons?

Re: Instant Apps Custom CSS

KellyHutchins — Tue, 16 Jan 2024 16:50:02 GMT

It's not a simple task using css only due to the fact that the filter is a component. It might be possible but it would be hacky and I haven't had time to dig into it yet.

Re: Instant Apps Custom CSS

Tiff — Mon, 08 Jul 2024 15:47:04 GMT

Hello @KellyHutchins ! Thanks again for your help on these custom CSS in my nearby app.

I have a question about the "Zoom" text. I changed the visual text to "Zoom" instead of "Zoom to Feature" due to accessibility recommendations. Can I have the text be vertically aligned in the middle? I tried adding vertical-align: middle to the next line, but that did not work.

Re: Instant Apps Custom CSS

KellyHutchins — Tue, 09 Jul 2024 18:39:46 GMT

You should be able to align the button using this css

calcite-action.directions-button.left.calcite-mode-light.zoom-action:after { color:#007ac2; content: "Zoom"; background: #fff; width: 80px; line-height:48px; }

Re: Instant Apps Custom CSS

Tiff — Wed, 10 Jul 2024 11:31:59 GMT

Thanks so much! I used a combination of this and the previous CSS code and was able to achieve what I needed, plus making the font weight bold should help as well.

Re: Instant Apps Custom CSS

Tiff — Wed, 10 Jul 2024 18:53:17 GMT

Hi again @KellyHutchins, thanks so much for all your help. We received some accessibility testing for this same app and I have a few more questions that I wonder if are related to CSS or anything else we can do?

Keyboard shortcuts allow you to navigate the map, as well as put in a search address. But you cannot manually place a pin on the map - is this possible using the keyboard only and not a mouse?
For the distance slider, the only text that is displayed visually is the distance #. It was flagged that the slider is announced by its value, not by a title (when it comes to screen readers). Is it possible for us to give a title to the slider, such as "Search Distance"?
Do you know anything about how screen readers interact with the app and if app creators may be able to fix it? For example, the x button on top right of the search instructions are announced as "Close" in the screen reader, but a recommendation was to have something like "Close instructions" instead.

Thank you very much. Any input or insight is appreciated!

Re: Instant Apps Custom CSS

KellyHutchins — Thu, 11 Jul 2024 18:08:38 GMT

You can use the keyboard only to search for an location by an address. However if you want to manually place a pin on the map then you need to use a mouse. We are exploring options for positioning map locations on the map without the use of a mouse.
The last two issues are things we'll need to address in the app itself. We will look at this updates for the fall release of ArcGIS Online.

Re: Instant Apps Custom CSS

KellyHutchins — Tue, 16 Jul 2024 16:16:03 GMT

@Tiff we did some testing on the issue with your second bullet and we are not able to repro the accessibility violation with the slider. We tested with a screen reader and it reads out the "Search Distance Slider". I also took a look at the slider using the Accessibility developer tools in Chrome and the slider does have text associated along with the number. I've attached screenshots showing the output of Voice Over screen reader and the accessibility tools.

Re: Instant Apps Custom CSS

BenWilkersonJC — Tue, 28 Jan 2025 19:44:04 GMT

@KellyHutchins I'm trying to add custom colored headers to the results panel for each of the layers in my Nearby app.

The color needs to be #002856, the font white, and the text bold. How do I do that?

Re: Instant Apps Custom CSS

KellyHutchins — Tue, 28 Jan 2025 23:31:01 GMT

This should do what you need.

calcite-accordion{ --calcite-accordion-item-header-background-color:#002856; --calcite-accordion-item-heading-text-color:#fff; --calcite-accordion-item-expand-icon-color: #fff; --calcite-font-weight-medium:600; }

Just wanted to add that for all CSS changes the tooltip in the config panel says the following - so releases of online could make tweaks to this css necessary.

Customize the appearance using Cascading Style Sheets (CSS). Warning: Release updates for the source template may impact your app's custom CSS