Where to add CSS file in Node Red

General
1

Hello everyone,

I am trying to customize the node red but I am unable to understand how to add CSS and also what changes I have to do in settings.

2

The settings page in the docs lists how to add your own css file
https://nodered.org/docs/configuration

If you search this forum for “node-red theme” you should find a thread where someone has developed a dark theme and their files might be of use

3

Yeah I got it but if I want to change any color or want to add any icon then where can I change it. As you can see below I am confused about the CSS part that do I have to add any css externalyy or everything can be done in settings.js only. Please help.
editorTheme: {
page: {
title: "Node-RED",
favicon: "/absolute/path/to/theme/icon", //can use '__dirname + "\img\favicon.png" (\ on Windows)'
css: "/absolute/path/to/custom/css/file",
scripts: "/absolute/path/to/custom/js/file" // As of 0.17
},
header: {
title: "Node-RED",
image: "/absolute/path/to/header/image", // or null to remove image
url: "http://nodered.org" // optional url to make the header text/image a link to this url
},

4

Hi @gmahule

the editorTheme setting is how you can provide a custom CSS file within the editor.

  1. create a CSS file
  2. add the editorTheme entry to your settings with the page.css value set to the absolute path to that file:
editorTheme: { 
   page: {
      css: "/path/to/your/custom/file.css"
   }
}

You can then add whatever custom CSS rules you want in that file in order to override the default CSS.

As @ukmoose said, there was a very recent thread in this forum where an example dark theme was provided doing just that.

As for changing icons in the editor - they tend to be more hardcoded in the editor and not as easy to change. To do that, you'd need to pull down the node-red source code, edit the source and create a custom build of the editor.

5

Hello @knolleary,

As you can see I have addedd css file according to your suggestion but it didn't work out I saved it and reload the entire node red but I am unable to get the theme.

For changing icons do you know where that source code is which I can hard code.

6 
/.node-red/lib/flows/theme/dark.cs

Is that really the absolute path to the file? You have a .node-red directory at the root of your filesystem?

It will depend on what icon you want to change. The editor source code (for 0.19) is here: https://github.com/node-red/node-red/tree/master/editor/js/ split across many different files.

7

Thaank you @knolleary now I can see the effect of css. But do you know how can I change the logo here http://prntscr.com/m9q516

8

That logo is settable via editorTheme, by adding a login section:

login: {
        image: "/absolute/path/to/login/page/big/image" // a 256x256 image
    }
9

sorry I did not understand but you have to paste it in the settings.js file?

10

@cigno in your settings file you should find you already have a section called editorTheme that looks something like this:

    // Customising the editor
    editorTheme: {
        projects: {
            // To enable the Projects feature, set this value to true
            enabled: false
        }
    }

To add a custom CSS file to the editor, you need to add the following:

    // Customising the editor
    editorTheme: {
        page: {
            css: "/absolute/path/to/custom/css/file",
        },
        projects: {
            // To enable the Projects feature, set this value to true
            enabled: false
        }
    }

And change /absolute/path/to/custom/css/file to be the absolute path of the CSS file you want to add to the editor.

Remember to restart node-red after editing the file.
https://nodered.org/docs/user-guide/runtime/configuration#editor-themes

11

thank you very much

image002.jpg

12

for example, I would like to change the background of a page called page1 with custom css.
but it doesn't work I restarted node red but it doesn't work.

this is the settings.js file:

// Customizing the editor
editorTheme: {

page1: {

         css: "/Users/Alessandro/.node-red/www/css/custom.css",

     },

project: {
// To enable the Projects feature, set this value to true
enabled: false

     }
 }

this is the custom.css file:

body.nr-dashboard-theme {
background-color: rgb (41,95,75);
font-family: Arial Black, Arial Black, Gadget, sans-serif;
}

13

If you mean you want to style a dashboard page generated by Node-RED dashboard then this is not the way to do it. The editorTheme setting is for the editor. Not the dashboard.

To style the dashboard you would put your CSS in a ui_template node. There was a very good thread on how to do this from @hotNipi recently. If you search for posts from him I'm sure you'll find it.

14

now I understand I was making confusion between editor and dashboard. Thanks a lot