# Dashboard Element Custom css Style

**URL:** <https://discourse.nodered.org/t/dashboard-element-custom-css-style/82200>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [19 October 2023 21:10 UTC](https://discourse.nodered.org/t/dashboard-element-custom-css-style/82200 "2023-10-19T21:10:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![donsay](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@donsay](https://discourse.nodered.org/u/donsay)\
**Post date:** [19 October 2023 21:10 UTC](https://discourse.nodered.org/t/dashboard-element-custom-css-style/82200/1 "2023-10-19T21:10:18Z")

</div>

I'm trying to understand how to attach a custom css style to a dashboard element. I can't seem to find the exact question & answer, so here goes...

In my NR settings file, I have added the css tag

```auto
editorTheme: {
        /** The following property can be used to set a custom theme for the editor.
         * See https://github.com/node-red-contrib-themes/theme-collection for
         * a collection of themes to chose from.
         */
        //theme: "",

        /** To disable the 'Welcome to Node-RED' tour that is displayed the first
         * time you access the editor for each release of Node-RED, set this to false
         */
        //tours: false,

        page: {
            css: "/home/pi/.node-red/customcss.css",
        },

```

And my customcss.css file looks like this (it is in the specified folder)

```auto
.back-trans {
   background-color: transparent;
}

.back-white {
   background-color: #ffffff;
}

.back-red {
   background-color: red;
}

```

It does not seem to be having any effect, so I must be doing something wrong. Assuming my code above is correct, what goes in the '\</\> Class' box on the node configuration dialog?

Thanks.  
Don

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [19 October 2023 23:34 UTC](https://discourse.nodered.org/t/dashboard-element-custom-css-style/82200/2 "2023-10-19T23:34:51Z")

</div>

The snippet of settings.js that you posted _can be used to set a custom theme for the editor._  
While you want to attach a custom css style to a _dashboard element._ Different places!

You need to put your CSS into a ui-template node, set as "Added to site head section"

```auto
<style>
.back-trans {
   background-color: transparent;
}

.back-white {
   background-color: #ffffff;
}

.back-red {
   background-color: red;
}
</style>

```

You might find that the background-color does not get applied unless you add !important..  
If so you need to make the CSS selector more specific

---

<div class="post-metadata">

**Author:** ![donsay](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@donsay](https://discourse.nodered.org/u/donsay)\
**Post date:** [20 October 2023 02:09 UTC](https://discourse.nodered.org/t/dashboard-element-custom-css-style/82200/3 "2023-10-20T02:09:47Z")

</div>

Ah, that makes perfect sense. Thanks!  
The addition to settings.js and separate css file aren't very portable.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [19 November 2023 02:10 UTC](https://discourse.nodered.org/t/dashboard-element-custom-css-style/82200/4 "2023-11-19T02:10:00Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.