Global CSS on apps

[carlarrestad]

Hi, i want to make our font tabular on the whole app. Right now we have added the CSS under into a coded component that is included in all views, however it does not work on our dialogs.
Is there a way to actually add global CSS, maybe with the custom headers or something similar

* {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

[Anders]

Hi, I would try to use the “On App Load” event handler under the settings tab in the top right corner. There you can write in custom code that will always run when the app is loaded.

You could also use the Element ID if you would like something specific for specific elements in the app.

Let me know if you need anything else

[lbj]

Hi @Anders. I like to have box shadow applied to some elements of type section. I can use the element type override to type in section and from what you are suggesting I can then apply the necessary CSS by running some code On App Load. I tested this but couldn’t make it work. Could you give an example for a working code? I assume I need to use the Run Code action?

The css I need is this:

 style.innerHTML = 'section { box-shadow: 0px 24px 24px -4px #919EAB1F; }';

Thanks

[jeremy.jean]

Hi Lars,
i’m using this kind of script in a run code action (on app load) and it’s working fine:

let styles = `
    ::-webkit-scrollbar {
  width: 7px;
}


::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 3px;
}
 

::-webkit-scrollbar-thumb {
  background: #c1c1c1; 
  border-radius: 3px;
}
`

let styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

resolve()

I don’t know if it helps ?

[Anders]

Hi @lbj I just tested this now with a container in my app and was able to produce a box-shadow with this code inside a run-code action node:

const style = document.createElement('style');
style.innerHTML = '#box { box-shadow: 0px 24px 24px -4px #525252; }';
document.head.appendChild(style);
resolve();

The #box in the code-snippet is connected to the container element by writing box in the text input when the container is selected. (I’ll add a screenshot at the bottom of the answear for this so you know where to type box)

The action is then triggered on app load, I changed the color of the shadow a bit just to make it more visible, but you are free to change it back to whatever you want.

Hope this helps, let me know if you need help with anything else

[lbj]

Perfect. Thanks @Anders and @jeremy.jean !