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
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
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
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
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
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: :coffee:](https://emoji.discourse-cdn.com/twitter/coffee.png?v=5)
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: :sweat_smile:](https://emoji.discourse-cdn.com/twitter/sweat_smile.png?v=5)
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
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: :wink:](https://emoji.discourse-cdn.com/twitter/wink.png?v=5)
1 Like
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!
Two separate things here -
- you can customise the theme a bit of any instance of Node-RED using the editorTheme section of your settings.js file.
- 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
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
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?