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

[FonPunnakanta]

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;

}

[KellyHutchins]

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. 

[FonPunnakanta]

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

[SubaKrishnan]

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

[ChrisCharles]

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

[SubaKrishnan]

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

[bpollvogt_DS]

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)

[KellyHutchins · Accepted solution]

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=a7b33cdbd212498ca19d0c67e9f7ecc...

[bpollvogt_DS]

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

[FonPunnakanta]

Thank you so much for looking into this @SubaKrishnan.