Instant Apps Custom CSS

[Tiff]

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.

[KellyHutchins · Accepted solution]

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

[Tiff]

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-variabl...

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

[KellyHutchins]

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. 

[Tiff]

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?

[KellyHutchins]

@Tiff  this should get you what you need: 

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

[Tiff]

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!  

[KellyHutchins]

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

[Tiff]

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!

[KellyHutchins]

@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.