Need to change backgound color of some ui-text nodes in my dashboard (not all of nodes of this type).
How can i do this?
Maybe it can be registered like improvement - add additional fields (background-color, label-color, value-color) to ui-text node???
That would then fight against the whole concept of themes
Maybe...
I just want visually "split" dashboard to some areas/blocks vertically. I could use groups but I can, because groups can be arranged only horizontally.
I want to use text node as a title of each block, that's why i want to highlight this titles by changing background color.
I can't use CSS (in tamplate), because it change all text nodes on page...
EXAMPLE:
before:
after:
and then... button node has such properties.
Does this mean that this node is already at war with the theme-conception? 
Yes - there are some hideous looking button colours out there
If it's just for a title then you could indeed use a button as title - you don't have to click on it. But I will have a look to see if there is an easy way to give you more hooks for CSS to grab onto.
As regards layout - the dashboard is meant as a starter for anyone to create a basic dashboard in a simple manner. If you need more complexity and complete control over layout then the node-red-contrib-uibuilder project allows you to build a dashboard using whatever framework you like.
You can make your own tile text elements with ui_template node and colorize them as you like
[{"id":"8c68a6e3.088f18","type":"inject","z":"6d08d5ab.a8aa3c","name":"","topic":"","payload":"THIS IS RED","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":630,"wires":[["600bcfcd.2d43c"]]},{"id":"ef11ea8c.531b78","type":"inject","z":"6d08d5ab.a8aa3c","name":"","topic":"","payload":"THIS IS BLUE","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":580,"wires":[["f2a5f964.0f7a48"]]},{"id":"f2a5f964.0f7a48","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"d6060f19.2b834","name":"Title","order":2,"width":0,"height":0,"format":"\n<div class=\"blocktitle blue\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":590,"wires":[[]]},{"id":"97a44e83.edc12","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"d6060f19.2b834","name":"Title CSS","order":3,"width":0,"height":0,"format":"<style>\n .blocktitle{\n font-weight: bold;\n background-color: inherit;\n padding: 6px;\n text-align: center;\n }\n .blocktitle.blue{\n background-color: blue;\n \n }\n .blocktitle.red{\n background-color: red;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":430,"y":540,"wires":[[]]},{"id":"600bcfcd.2d43c","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"d6060f19.2b834","name":"Title","order":2,"width":0,"height":0,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":630,"wires":[[]]},{"id":"d6060f19.2b834","type":"ui_group","z":"","name":"Default","tab":"93443fe0.36117","disp":true,"width":"6","collapse":false},{"id":"93443fe0.36117","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
3 Likes
Of course i can! but if i'll go this way - the dashboard will not needed at all in the end
from the other side - need more time to make own components (at the first proj. of course) instead of using standard nodes of dashboard...
Well the ui_template node is standard node and ment just for those simple use cases where all other standard (or custom made dashboard nodes) do not reach your expectations.
Creating your own custom dashboard widgets is quite of time consuming process, I can tell. 
And I think same goes to creating whole dashboard from scratch.
It's the target you'll need to settle out. Even you need piece of art or functional thing. Well it may be somewhere in between of course so you may be forced the to do some compromise decisions. That's the way it is.
If I make the CSS more targetable you could do this
by adding a style template like
<style>
.nr-dashboard-widget-Test_text {
background-color:red !important;
}
</style>
(by using the label to help set the class...)
Any good ?
By adding background-color option to node's configuration?
Will be wonderful!
It will very simple and convenient to use!
Apologies for reviving this old thread, but I could not find anything on whether this capability was implemented? What I am trying to do is have specific widgets have a different background color or text color and this seemed like a perfect solution.
Is your Node-red up to date?
You can now set a custom CSS class for widgets.
See the help for dashboard widgets for details.
There are quite a few examples in the Dashboard section of the forum
1 Like
Node-RED version is 1.3.3
Thanks - I think the example given in this thread ui_text change color may work. Is that what you meant?
Yes. I think there are examples of both static and dynamic CSS overrides in that thread.
1 Like
