topic Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button in ArcGIS Instant Apps Questions

Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

FonPunnakanta — Fri, 30 Aug 2024 15:21:59 GMT

Is it possible to Change background color for the button and Hide the Header in Reporter Instant App using Custom CSS?

I tried this script it doesn't seem to work for button background color. I haven't got too far to try anything with the Header yet.

Custom CSS:

calcite-button{

background-color: red;

}

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

KellyHutchins — Fri, 30 Aug 2024 16:20:20 GMT

You can hide the header by turning off the header in the app configuration. To find the header setting use the search box to search for "Header" and disable that option. I'll check with the Reporter team about the button color.

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

FonPunnakanta — Fri, 30 Aug 2024 16:50:52 GMT

Thank you very much for your reply! Header is now gone! Looking forward to hear more on the button color!

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

SubaKrishnan — Wed, 04 Sep 2024 02:00:36 GMT

@FonPunnakanta Custom CSS is not being honored by the app and it looks like a bug. We've added an issue for it. Thank you for catching it.

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

ChrisCharles — Wed, 04 Sep 2024 04:12:08 GMT

We are working with the template as well. Could you please inform when the Custom CSS will be functional for the Reporter Template?

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

SubaKrishnan — Wed, 04 Sep 2024 13:59:16 GMT

Hi, @ChrisCharles It will be fixed in the upcoming Oct release.

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

FonPunnakanta — Wed, 04 Sep 2024 14:01:39 GMT

Thank you so much for looking into this @SubaKrishnan.

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

bpollvogt_DS — Wed, 15 Jan 2025 21:39:50 GMT

Was this bug actually fixed in the Oct 2024 release? I have been trying to change the color of the button and it isn't changing anything (even when I submit CSS that worked for others in the Community forum)

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

KellyHutchins — Wed, 15 Jan 2025 22:08:20 GMT

Yes it was fixed. What are you trying to change? It can be tricky and require CSS knowledge to know how to modify something. Here's an example where I added this css to make the "Report an Incident" button to turn it orange.

calcite-button{ --calcite-color-brand:orange; }

https://jsapi.maps.arcgis.com/apps/instant/reporter/index.html?appid=a7b33cdbd212498ca19d0c67e9f7ecc1

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

bpollvogt_DS — Thu, 16 Jan 2025 18:08:07 GMT

My syntax must have been just slightly off because that worked! Thank you so much!

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

LizaMarkey — Thu, 23 Jan 2025 17:40:12 GMT

@KellyHutchins Can this be incorporated for a sidebar instant app, using custom CSS to change color of splash screen button? I copied your syntax and doesn't seem to work but seems like it should.

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

KellyHutchins — Thu, 23 Jan 2025 22:58:49 GMT

@LizaMarkey which instant app are you using and I can take a look. You also can try this:

instant-apps-splash{
--calcite-color-brand:orange;}

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

LizaMarkey — Mon, 27 Jan 2025 19:25:51 GMT

We are using Sidebar - I inserted the above and it still didn't take. Thanks!

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

KellyHutchins — Mon, 27 Jan 2025 19:28:55 GMT

Enterprise? If so which version? Or ArcGIS Online. If your app is public can you send me the url so I can take a look?

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

KellyHutchins — Mon, 27 Jan 2025 19:36:50 GMT

Also maybe try this:

.sidebar-splash-panel.calcite-mode-light{ --calcite-color-brand:green; }

Re: Custom CSS in Instant Apps Reporter - Hide the Header, Change Background color on the Button

LakesGISMaps — Fri, 03 Oct 2025 00:24:54 GMT

/* Define the animation sequence for a pulsing button with a glow */ @keyframes pulse-scale-glow { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9); /* Opaque red */ } 50% { transform: scale(1.05); /* Scales the button slightly larger */ box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); /* Fading red */ } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } } /* Apply the styles and animation only to the "Submit a Request" button */ calcite-button[slot="footer"] { --calcite-color-brand: red; --calcite-font-weight-normal: bold; animation: pulse-scale-glow 2s infinite; } /* Pause the animation when the button is hovered over */ calcite-button[slot="footer"]:hover { animation-play-state: paused; }

I have found out that you can change the button color as well as have an animation around a button to grab the attention of the user, to click it. I used this for the footer button in the Reporter app, where someone clicks to create a report.