# Global CSS on apps

**URL:** <https://community.appfarm.io/t/global-css-on-apps/1091>\
**Category:** Ask the community\
**Created:** [March 5, 2024, 10:40am UTC](https://community.appfarm.io/t/global-css-on-apps/1091 "2024-03-05T10:40:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![carlarrestad](https://avatars.discourse-cdn.com/v4/letter/c/5fc32e/32.png) [@carlarrestad](https://community.appfarm.io/u/carlarrestad)\
**Post date:** [March 5, 2024, 10:40am UTC](https://community.appfarm.io/t/global-css-on-apps/1091/1 "2024-03-05T10:40:58Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Anders](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/anders/32/265_2.png) [@Anders](https://community.appfarm.io/u/Anders)\
**Post date:** [March 6, 2024, 2:40pm UTC](https://community.appfarm.io/t/global-css-on-apps/1091/2 "2024-03-06T14:40:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [August 20, 2024, 9:21am UTC](https://community.appfarm.io/t/global-css-on-apps/1091/3 "2024-08-20T09:21:43Z")

</div>

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:

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

```

Thanks

---

<div class="post-metadata">

**Author:** ![jeremy.jean](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/jeremy.jean/32/123_2.png) [@jeremy.jean](https://community.appfarm.io/u/jeremy.jean)\
**Post date:** [August 21, 2024, 8:08am UTC](https://community.appfarm.io/t/global-css-on-apps/1091/4 "2024-08-21T08:08:14Z")

</div>

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

```auto
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 ?

---

<div class="post-metadata">

**Author:** ![Anders](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/anders/32/265_2.png) [@Anders](https://community.appfarm.io/u/Anders)\
**Post date:** [August 21, 2024, 8:39am UTC](https://community.appfarm.io/t/global-css-on-apps/1091/5 "2024-08-21T08:39:21Z")

</div>

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:

```auto
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 🙂

 ![Skjermbilde 2024-08-21 kl. 10.37.36](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/8/8342c1723ac42bfd753236b23162eab72982969a.png)

---

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [August 22, 2024, 12:54pm UTC](https://community.appfarm.io/t/global-css-on-apps/1091/6 "2024-08-22T12:54:51Z")

</div>

Perfect. Thanks @Anders and @jeremy.jean !