CSS Support For Public Notification Instant App

[AlexManikas]

Hi All, 

I've noticed the custom CSS box in the Public Notification Instant App; however, it does not seem to accept any CSS code I put in there. I've been copying and pasting some of the example code from (Calcite variables | Documentation | ArcGIS Developers). Also, the app is not listed in the table of custom CSS apps; however, it has a custom CSS box. Is this app not available to customize yet? If it is, please send over some type of code that might trigger some sort of response.

Thank you,

Ben

[KellyHutchins]

Can you provide an example of the css you are trying to use with Public Notification? 

[AlexManikas]

Kelly, (Please see below). I'm just looking for some boilerplate CSS, that works to customize the app and so far none of this has elicited a response. It still shows the default dark mode CSS elements. Thank you!

h1.esri-widget__heading {
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
}

.calcite-mode-dark {
--calcite-ui-brand: #d6b9eb;
--calcite-ui-brand-hover: #c59cd6;
--calcite-ui-brand-press: #b399c4;
--calcite-ui-background: #3e3342;
--calcite-ui-foreground-1: #2e2933;
--calcite-ui-foreground-2: #2b262c;
--calcite-ui-foreground-3: #1b181b; 
} 

[KellyHutchins]

For public notification try to scope the css to the public notification element. Here's an example showing how to do that. For the h1 css you have which header are you trying to modify. It looks like the header for a widget maybe?

public-notification{
--calcite-ui-brand: #d6b9eb;
--calcite-ui-brand-hover: #c59cd6;
--calcite-ui-brand-press: #b399c4;
--calcite-ui-background: #3e3342;
--calcite-ui-foreground-1: #2e2933;
--calcite-ui-foreground-2: #2b262c;
--calcite-ui-foreground-3: #1b181b; 
}

[AlexManikas]

Thank you that worked! How would I have known to use the public-notification element? Is there a resource that provides the acceptable elements in the instant app. Or if I want to customize the  .instant-apps-measurement-tool element, how do I know what custom properties can go inside it? I've scoured the GitHub, but it often seems fragmented with information in many places. Thank you, Kelly!

[KellyHutchins · Accepted solution]

Unfortunately I don't have a quick answer for this one. It requires learning about CSS (specificity, CSS variables and more). I think there is some work we could do on the app side for Public Notification that could make it a little easier to figure out. I'll work on that for later this year. But it still can get complex quickly.  I think the MDN doc on CSS is a good place to start.  Its also helpful to become familiar with dev tools to inspect the apps CSS. 

In Public Notification we can also get it to work with the example below. 

.App.calcite-mode-dark{
--calcite-ui-brand: #d6b9eb;
--calcite-ui-brand-hover: #c59cd6;
--calcite-ui-brand-press: #b399c4;
--calcite-ui-background: #3e3342;
--calcite-ui-foreground-1: #2e2933;
--calcite-ui-foreground-2: #2b262c;
--calcite-ui-foreground-3: #1b181b; 
}

What are you trying to change with the measurement widget? It currently has a styling issue in the Public Notification app that will be fixed in the next release. This is how it will look after the next release. 

One final note in regards to the custom CSS option is that we don't want people to have to use it.  We'd like to continue to expose configuration options that will remove the need for people to resort to custom css for styling the app. In some apps we allow additional color customization and we can look at adding these options to Public Notification later this year.