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 on what's going on. My question to you is how can I access the configuration settings under "Dashboard, Theme, Widget background" in order to programmatically change them, or is it even possible? Or how about the rest of the settings? Perhaps in a new release?

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 familiar with CSS and HTML and look at W3 school website for some education.

:+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 is a clear winner when it comes to the programming development of this continuously modified application we have. Once I get past these refinements the major work will be done. This thing will be a snap to maintain for our processes. Thank you IBM Node-Red team.

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: body { background-image: url("/my-image.png"); } That is a CSS stylesheet where you can add more CSS rules, for example: body { background-image: url("/my-image.png"); background-size: cover; }

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 content? Or am I relegated to script every textbox?

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' tags, and ensure the page takes up full screen height. */ html, body {height:100%; margin:0; padding:0;} /* Set the position and dimensions of the background image. */ #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */ #content {position:relative; z-index:1; padding:10px;} html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} Stretch that Background Image! This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser. Go on, try it - resize your browser! in a html file and pointed the browser to it and it works. How do I get Node-Red Dashboard to respond to the CSS code in the template?

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	16	1070	5 May 2023
Nored Dashboard page customized background color Dashboard	1	746	14 February 2020
Node red dashboard documentation Dashboard	6	504	13 November 2021
UI-Template - cant change background color of? Dashboard	5	4904	12 February 2020
Dashboard CSS - custom and blue Dashboard	25	8454	20 April 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