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?
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.
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.
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.
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?
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;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>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.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
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?
