Hi, I've been trying to make a dynamic background color and I can't seem to get it working even after referring to [solved] Change color of template node with variable. I've been wondering on how do you get the name for the id or the tag name for line 184 in the template node because I think that's where I got most of the things wrong.
Thanks in advance.
[{"id":"13c7ca6f102a2f74","type":"tab","label":"Test","disabled":false,"info":""},{"id":"10a8110b172b0b6d","type":"ui_button","z":"13c7ca6f102a2f74","name":"","group":"3b47bcb290ba7812","order":1,"width":5,"height":1,"passthru":false,"label":"{{name}}","tooltip":"","color":"WHITE","bgcolor":"{{background}}","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":180,"wires":[[]]},{"id":"acc89e9248f108b2","type":"ui_gauge","z":"13c7ca6f102a2f74","name":"Overall Equipment Effectiveness","group":"3b47bcb290ba7812","order":2,"width":5,"height":2,"gtype":"gage","title":"","label":"OEE, %","format":"","min":0,"max":"100","colors":["#ca3838","#e6e600","#00b500"],"seg1":"40","seg2":"60","x":210,"y":220,"wires":[]},{"id":"feaa32316aab91a0","type":"ui_chart","z":"13c7ca6f102a2f74","name":"A, P and Q","group":"3b47bcb290ba7812","order":3,"width":5,"height":4,"label":"Machine A","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"100","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#2ca02c","#ff7f0e","#d62728","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":290,"y":260,"wires":[[]]},{"id":"7a120cdd32f37775","type":"ui_template","z":"13c7ca6f102a2f74","group":"","name":"Dashboard stylesheet","order":1,"width":0,"height":0,"format":"<style>\n/*\nIt is reasnoble to declare the colors as CSS variables\nso they can be easily called by name where needed.\n\nYou can see that in many places the variables are not used. Change it!\n*/\n\n/*\n:root {\n --color-green-primary: rgb(51, 204, 51);\n --color-green-secondary: rgb(26, 101, 26);\n --color-red-primary: rgb(255, 0, 0);\n --color-red-secondary: rgba(153,0,0,1);\n --color-gray-primary:rgba(40,40,40,1);\n --color-gray-secondary:rgba(65,65,65,1);\n --color-text-primary: rgb(230, 226, 209);\n --color-widget-border: rgb(84, 78, 78);\n}\n*/\n\n/*\nAll CSS adjustments are commented out.\nTurn rules on one by one and see the changes.\nDon't use too many elements cos it wil be confusing\nStart with simple elements like text, slider or button\n\nMany of elements like buttons have states, \nthose rules must be found and adjusted also.\n*/\n\n/*\n.masonry-container {\n position: relative;\n width: 100%;\n height:100%;\n margin: 0 auto;\n background: rgb(255,0,0);\n background: linear-gradient(to bottom, grey, white);\n}\n*/\n\n/*\n.nr-dashboard-cardcontainer {\n position: relative;\n box-shadow: inset 0px 1px 4px 0px #000000bb;\n border-radius: 15px;\n}\n*/\n\n/*\n.nr-dashboard-theme ui-card-panel {\n background-color: #33333300;\n color: black;\n font-size: 12px;\n border-radius: 15px;\n box-shadow: 0 0 8px 0px #00000080;\n}\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: grey;\n color: var(--color-text-primary);\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n*/\n\n/*\ndiv#Dashboard1_Dashboard1_cards.nr-dashboard-cardcontainer {\n background-color: red;\n}\n*/\n\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: transparent;\n color: black;\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n\n\n/*\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: var(--color-text-primary);\n}\n*/\n\n/*\n.md-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n min-height: 36px;\n min-width: 88px;\n line-height: 36px;\n vertical-align: middle;\n align-items: center;\n text-align: center;\n border-radius: 12px;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n outline: none;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n color:var(--color-text-primary);\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n font-style: inherit;\n font-variant: inherit;\n font-family: inherit;\n text-decoration: none;\n overflow: hidden;\n transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n*/\n\n/*\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #88888800;\n color:black;\n}\n*/\n\n/*\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #88888855;\n}\n*/\n\n/*\nmd-slider .md-thumb {\n z-index: 1;\n position: absolute;\n left: -10px;\n top: 14px;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n -webkit-transform: scale(.7);\n transform: scale(.7);\n transition: all .4s cubic-bezier(.25,.8,.25,1);\n box-shadow: 0 0 6px #00000070;\n}\n*/\n\n/*\nAdvanced stuff - dynamic change of card CSS\n\nClasses here can be used to make colored stripe at the top of card\nUsage is not in here, but they are added to md-card when needed within another template\n\n.carderr {\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);\n}\n.cardok {\n background: rgb(39,255,0);\n background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);\n}\n*/\n\n</style>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n //assumng that msg.payload carry some color\n console.log(msg)\n \n if(msg.payload){\n $(\"#Test_Default md-card\").css(\"background-color\",msg.payload)\n }\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":420,"y":360,"wires":[[]]},{"id":"5c0f22d1e992df42","type":"inject","z":"13c7ca6f102a2f74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgba(60,158,63,1.1)","payloadType":"str","x":210,"y":340,"wires":[["7a120cdd32f37775"]]},{"id":"205fdb16fd88b22c","type":"inject","z":"13c7ca6f102a2f74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgba(208,22,22.1)","payloadType":"str","x":210,"y":380,"wires":[["7a120cdd32f37775"]]},{"id":"3b47bcb290ba7812","type":"ui_group","name":"Default","tab":"681dd137c2c59e18","order":1,"disp":false,"width":"5","collapse":false},{"id":"681dd137c2c59e18","type":"ui_tab","name":"Test","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
