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

khutchins

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.