Editor Theme css not working (solved)

General
1

Hello erverybody! I’m trying to add a custom css as described is the docs here:

https://nodered.org/docs/configuration

The favicon and title are working but the css doesnt change antyhing.

editorTheme: {
    page: {
      title: "my-node-red-page",
      favicon: __dirname + "/resources/images/favicon.png",
      css: __dirname + "/resources/styles/test.css",
    },

My css is as follows ( trying to change the color of the deploy button for example):

.deploy-button {
    background-color: #ff9700 !important;
}

I tried selecting by ID, selecting deploy-button-group etc. as well with no success.
My question is what am I doing wrong? ( sorry if its something stupid/ obvious)

kindest regards
Zeus Bower

2

Are you trying to edit the look of the backend or the UI?

Are you refreshing the page and clearing the cache each time you try something?

1 Like
3

Thanks for the reply!

I’m trying to edit the UI of the editor page.

I’m restarting the node-server everytime I change the css.

regards

4

Working for me. Are you sure that the css file existts and NR has permission to access it?
Maybe open NR in FireFox or Chrome and look for some console errors.

1 Like
5

So it’s possible for you to change the button’s color with the provided code?
Hmmm… I’m not getting any console errors. The favicon in the same directory is loading so permission should be fine.
Could the be a problem be caused from me using node-red embedded? ( again the favicon and title are working perfectly)

thanks and regards

6

OK nevermind it’s working now! I had a stupid typo. My aplogies and thanks for the help!!! Your hint that it MUST work and about checking the existence was what made me realize my mistake.

Thank you! :coffee:

Edit: It’s working for the button so let’s see if I manage to change the header color as a next step :sweat_smile:

7

Hello...
Thanks for sharing this it was helpful ..
but could I ask how did you separate your website files to use the above code?
I mean did you embed it in your JS code or new file, I'm new in this so excuse me please

many thanks

1 Like
8

You need to use node-RED in embedded mode: https://nodered.org/docs/embedding

I have the css in a seperate file in the directory I hand over to the embedded node-RED

hope it helps!! :wink:

1 Like
9

Thanks for the clarification!

but I'm still confused, I've read the document you attached " embedding .. ", Is it an independent piece of code which I only add it to my code or it's just a guideline I have to follow?
Unfortunately, It's not mentioned clear how to use that code to embed node-red.

Thank you again!

10

Two separate things here -

  1. you can customise the theme a bit of any instance of Node-RED using the editorTheme section of your settings.js file.
  2. you can embed Node-RD into your own node.js / express application using the embedding docs - in which case you more control over the theme of your application.
1 Like
11

Glad to help!

As dceejay said embedding means adding it to your express server. So its only necessary if you want to add Node-RED to your application instead of using it on it's own.

regards

12

I was trying to do the same for header background color .
Want to change the color of background where Nod-red is written .

Done following changes in setting.js and I am able to change the text like below.
header: {
title: "IoT Flow Editor",

     },

How to change the black color?