topic Re: Custom CSS or Calcite button inside Instant Aps Introduction Window in ArcGIS Instant Apps Questions

Custom CSS or Calcite button inside Instant Aps Introduction Window

BriantFabela — Mon, 12 Feb 2024 22:00:08 GMT

Hello,

I am currently working inside the Elections Outreach solution's "Locate My Polling Place" app, and I am trying to implement a button inside the Introduction (info-content) window. I was able to create one with basic HTML, however, I would like to customize it further to replicate the hover and style behavior of a button and maybe add an icon.

The purpose of the button is to make Spanish language availability more intuitive for members of the public that visit the app.

However, I don't seem to be able to use custom CSS on the HTML inside the introduction window, or use calcite components. Is any of this possible?

Any suggestions would be immensely appreciated. Thank you.

https://www.arcgis.com/apps/instant/lookup/index.html?appid=0a1329c63d524841b1defe4429e92b50

Re: Custom CSS or Calcite button inside Instant Aps Introduction Window

ChimeicheaAmadi — Mon, 12 Feb 2024 22:31:00 GMT

for the style (hover), what kind of hover do you intend to implement?

Re: Custom CSS or Calcite button inside Instant Aps Introduction Window

BriantFabela — Mon, 12 Feb 2024 22:44:38 GMT

I would like to thicken the border of the button on hover, just like the calcite buttons.

Re: Custom CSS or Calcite button inside Instant Aps Introduction Window

ChimeicheaAmadi — Tue, 13 Feb 2024 08:43:39 GMT

if you can send the style for the button border or the button itself, generating the hover can be done much quicker.

Re: Custom CSS or Calcite button inside Instant Aps Introduction Window

KellyHutchins — Tue, 13 Feb 2024 17:44:33 GMT

Here's a really ugly example of how you could style the link when users hover over it. You'd paste this css in the Custom Css section of the config panel

.details-content p a:hover { background-color: orange !important; color: blue !important; border: none!important; border-bottom: solid 4px crimson !important; }

Re: Custom CSS or Calcite button inside Instant Aps Introduction Window

BriantFabela — Tue, 13 Feb 2024 19:12:25 GMT

Thank you so much Kelly, this did the trick!