I am creating a Node-Red instance (in Windows 10...) to replace old software we use for Quality monitoring on packaging lines. The status of the process has to be seen at a distance and one of the means was to turn the colors of the barcode monitoring text boxes Red or Green, other colors depending …

You cannot dynamically change the whole theme of the dashboard. Some widgets do let you change their appearance - such as the Button node's background - as describe in their sidebar help. The other option is the ui_template node that lets you do anything you want.

Using css in ui_template you should be able to override the main background (and other) colours. Search this forum for some examples of people using css to set a background image which should give you a clue.

:+1: Thanks, I'll search the posts. I kind of figured I'd have to do that I was hoping that someone already made a node that did this... Or, perhaps the guys at IBM would see that they should make the dashboard a bit more flexible... (not to say it isn't great or anything). I'll enjoy getting …

:+1: Ok, I was hoping to get something like a single line reference.... I see I'm going to have to work for it. No problem. Now I'll need to dive into CSS and HTML. At least the Dashboard gets me a working version of my application. That's actually quite a bit. At this point I believe Node-Red…

It shouldn’t be too many lines, maybe start here [image] Getting image in dashboard Dashboard Much earlier in this topic, I shared this snippet: <style> body { background-image: url("/my-image.png"); } </style> That is a CSS stylesheet where you can add …

Ok, A few questions for you. If I implement this template, I am then at a point where anything in this needs also to be programmed from the template? Or can it override the aspects of the main page I want to control? In other words, can I still use dashboard items to do the heavy lifting of my co…

Usual CSS hierarchy rules apply. Try it and see.

OK, I already have some other trial templates in process. I tried to open another tab and put this content in it. I'm having ZERO results... It's as if it just does not work. I then put this Stretched Background Image /* Remove margins from the 'html' and 'body…

Here is a link on the subject stretch and scale an image that may eventually be useful : https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only

Node-RED

Node-RED Forum

Dashboard Colors and control

Dashboard

dceejay 21 July 2018 19:41 6

It shouldn’t be too many lines, maybe start here

Topic		Replies	Views
Dynamic Dashboard Theme Dashboard	17	980	19 May 2023
Nored Dashboard page customized background color Dashboard	2	724	15 March 2020
Node red dashboard documentation Dashboard	7	479	13 December 2021
UI-Template - cant change background color of? Dashboard	5	4848	12 February 2020
Dashboard CSS - custom and blue Dashboard	26	8332	20 May 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Dashboard Colors and control

Related topics