Where do I include this code? in what node?
Your main CSS override. It is recommended to keep all the custom CSS in one place. Easier to maintain.
in a template node?
I have added it between script but it does not work
I dont know what you mean with css override sadly, could you explain that in detail?
You should have one ui_template node which is targeted to the site head and which then contain all CSS rules ( <style> ... all your rules ... </style> tag) to override default styles of the dashboard.
Okay thank you! I think the issue is that it is overwritten by the statement that i dont want to have a cardcontainer background .
nr-dashboard-cardcontainer{
background:var(--nr-dashboard-groupBackgroundColor) !important;
}
How can i color the background of only one text node in the color of msg.color?
It is not that easy to say anything at this point cos as you have already many overrides, I cant figure out what may affect and where. You'll need to do small example with your CSS overrides included and then point out the issue you are struggling.
flows (20).json (4.0 KB)
That is my flow with what i already have in the template node and now I only want one text node to have a red background as well as the group header
[
{
"id": "cae798a90f809ae1",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": "",
"env": []
},
{
"id": "f15148ee24afb09b",
"type": "ui_template",
"z": "cae798a90f809ae1",
"group": "3e2c11c9a647e6ee",
"name": "",
"order": 0,
"width": 0,
"height": 0,
"format": "\n<script>\n(function(scope) \n{\n scope.$watch('msg', function(msg) \n {\n $(\".Test1\").css(\"background\", msg.color); // Select color of group background \n $(\".nr-dashboard-cardcontainer\").css(\"background\", '#333333'); // Select color of group content background\n $(\".nr-dashboard-cardtitle\").css(\"color\",'black') // Select colour of group heading\n });\n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 860,
"y": 460,
"wires": [
[]
]
},
{
"id": "7c041dba6651676b",
"type": "inject",
"z": "cae798a90f809ae1",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "color",
"v": "red",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "str",
"x": 590,
"y": 460,
"wires": [
[
"f15148ee24afb09b"
]
]
},
{
"id": "2fbd32cf1a0e2e4b",
"type": "inject",
"z": "cae798a90f809ae1",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Not red background",
"payloadType": "str",
"x": 630,
"y": 580,
"wires": [
[
"1989453bd94e092b"
]
]
},
{
"id": "1989453bd94e092b",
"type": "ui_text",
"z": "cae798a90f809ae1",
"group": "3e2c11c9a647e6ee",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "text:",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 870,
"y": 580,
"wires": []
},
{
"id": "c2f5f52ac90d0e24",
"type": "inject",
"z": "cae798a90f809ae1",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Red background",
"payloadType": "str",
"x": 620,
"y": 520,
"wires": [
[
"7ffa91228068d7a1"
]
]
},
{
"id": "7ffa91228068d7a1",
"type": "ui_text",
"z": "cae798a90f809ae1",
"group": "3e2c11c9a647e6ee",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "text:",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 870,
"y": 520,
"wires": []
},
{
"id": "3e2c11c9a647e6ee",
"type": "ui_group",
"name": "Test1",
"tab": "9a5408f1ef3d4783",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": "Test1"
},
{
"id": "9a5408f1ef3d4783",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Maybe this way then..
[{"id":"f15148ee24afb09b","type":"ui_template","z":"cae798a90f809ae1","group":"3e2c11c9a647e6ee","name":"","order":0,"width":0,"height":0,"format":"\n<script>\n(function(scope) \n{\n scope.$watch('msg', function(msg) \n {\n $(\".Test1\").css(\"background\", msg.color); // Select color of group background \n $(\".nr-dashboard-cardcontainer\").css(\"background\", '#333333'); // Select color of group content background\n $(\".nr-dashboard-cardtitle\").css(\"color\",'black') // Select colour of group heading\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":860,"y":460,"wires":[[]]},{"id":"7c041dba6651676b","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":590,"y":460,"wires":[["f15148ee24afb09b"]]},{"id":"2fbd32cf1a0e2e4b","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Not red background","payloadType":"str","x":630,"y":640,"wires":[["1989453bd94e092b"]]},{"id":"1989453bd94e092b","type":"ui_text","z":"cae798a90f809ae1","group":"3e2c11c9a647e6ee","order":1,"width":0,"height":0,"name":"","label":"text:","format":"{{msg.payload}}","layout":"row-spread","className":"","x":870,"y":640,"wires":[]},{"id":"c2f5f52ac90d0e24","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"red-back","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Red background","payloadType":"str","x":620,"y":520,"wires":[["7ffa91228068d7a1"]]},{"id":"7ffa91228068d7a1","type":"ui_text","z":"cae798a90f809ae1","group":"3e2c11c9a647e6ee","order":1,"width":0,"height":0,"name":"","label":"text:","format":"{{msg.payload}}","layout":"row-spread","className":"","x":870,"y":520,"wires":[]},{"id":"ca53f2408c66f304","type":"ui_template","z":"cae798a90f809ae1","group":"55888982bdd0637f","name":"CSS","order":6,"width":0,"height":0,"format":"<style>\n .red-background{\n background:red !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":850,"y":360,"wires":[[]]},{"id":"8895d692ec685906","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Remove Red background","payloadType":"str","x":650,"y":560,"wires":[["7ffa91228068d7a1"]]},{"id":"3e2c11c9a647e6ee","type":"ui_group","name":"Test1","tab":"9a5408f1ef3d4783","order":1,"disp":true,"width":"6","collapse":false,"className":"Test1"},{"id":"55888982bdd0637f","type":"ui_group","name":"Swatches","tab":"62083694d0eab7ca","order":1,"disp":true,"width":9,"collapse":false,"className":""},{"id":"9a5408f1ef3d4783","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Colors","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Thank you very much!!! Just one last question, do you know how to place the group header in the middle?
If for all group headers, then for CSS
.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
text-align: center;
}
1 Like
Thank you so much!!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
