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;

}

[LizaMarkey]

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

[KellyHutchins]

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

[LizaMarkey]

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

[KellyHutchins]

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?

[KellyHutchins]

Also maybe try this: 

.sidebar-splash-panel.calcite-mode-light{

 --calcite-color-brand:green;


}

[LakesGISMaps]

/* 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.