nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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;

}

Encuentra más publicaciones etiquetadas con

Accepted answers

khutchins

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

All comments

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.

khutchins

Also maybe try this:

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

 --calcite-color-brand:green;


}

khutchins

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?

LizaMarkey

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

khutchins

@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

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

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)

FonPunnakanta

Thank you so much for looking into this @SubaKrishnan.

SubaKrishnan

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

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

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

FonPunnakanta

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

khutchins

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.