Where to add CSS file in Node Red

#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.

0 Likes

#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

0 Likes

#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
},

0 Likes

#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.

0 Likes

#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.

0 Likes

#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.

0 Likes

#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

0 Likes

#8

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

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