Custom CSS or Calcite button inside Instant Aps Introduction Window

443
5
Jump to solution
02-12-2024 02:00 PM
Labels (1)
BriantFabela
New Contributor II

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.

Button Capture.PNG

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

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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

View solution in original post

5 Replies
ChimeicheaAmadi
New Contributor II

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

0 Kudos
BriantFabela
New Contributor II

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

0 Kudos
ChimeicheaAmadi
New Contributor II

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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;
}
BriantFabela
New Contributor II

Thank you so much Kelly, this did the trick!

0 Kudos