Dashboard Element Custom css Style

Dashboard
1

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

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)

.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

2

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"

<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

3

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

4

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