Hi,
I have set the site option to 'Use Angular theme in ui_template' because I don't want the Node-RED theme generally in most ui_templates nodes.
Is it possible to use (or re-enable) the Node-RED theme only for some specific ui_template nodes?
There isn't any options at the node's level for such treatment. I think it will be easier to use node-red theme everywhere and then override CSS where it will be needed.
Yes, I had thought the other way around, maybe I just had to add a class to the outermost div in the template or something like that?! But I haven't found one...
My next try is to remove the 'nr-dashboard-disabled' attribute with javascript, but I think there is maybe an much simpler solution?
Here is the basics how to reach elements only in one card to modify the CSS.
[{"id":"2db46e63.6938a2","type":"ui_text","z":"e8af3254.77f7e","group":"f4fa889e.bb1b78","order":0,"width":0,"height":0,"name":"","label":"TEXT NODE","format":"{{msg.payload}}","layout":"row-spread","x":390,"y":260,"wires":[]},{"id":"dc93a1bc.2787b","type":"ui_template","z":"e8af3254.77f7e","group":"f4fa889e.bb1b78","name":"","order":1,"width":0,"height":0,"format":"<div id=\"div_in_template\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":400,"y":320,"wires":[[]]},{"id":"299f66a1.806e4a","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"TEXT FOR TEMPLATE","payloadType":"str","x":210,"y":320,"wires":[["dc93a1bc.2787b"]]},{"id":"a93e3929.bd1098","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"SOMETHING","payloadType":"str","x":200,"y":260,"wires":[["2db46e63.6938a2"]]},{"id":"ef360779.612e58","type":"ui_text","z":"e8af3254.77f7e","group":"d22df206.7e25d","order":0,"width":0,"height":0,"name":"","label":"TEXT NODE","format":"{{msg.payload}}","layout":"row-spread","x":430,"y":380,"wires":[]},{"id":"ecbdc37c.df0b3","type":"ui_template","z":"e8af3254.77f7e","group":"d22df206.7e25d","name":"","order":1,"width":0,"height":0,"format":"<div id=\"div_in_template\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":440,"y":440,"wires":[[]]},{"id":"848f150e.8512c8","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"TEXT FOR TEMPLATE","payloadType":"str","x":250,"y":440,"wires":[["ecbdc37c.df0b3"]]},{"id":"98ae6c4.667e29","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"SOMETHING","payloadType":"str","x":240,"y":380,"wires":[["ef360779.612e58"]]},{"id":"e99ccfe5.5a8f","type":"ui_template","z":"e8af3254.77f7e","group":"f4fa889e.bb1b78","name":"CSS","order":2,"width":0,"height":0,"format":"<style id=\"dashboard_style_override\">\n \n #Home_Other_cards > md-card.nr-dashboard-template.visible{\n background:red;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":370,"y":180,"wires":[[]]},{"id":"f4fa889e.bb1b78","type":"ui_group","name":"Default","tab":"2055516c.c5c88e","order":1,"disp":true,"width":"6","collapse":false},{"id":"d22df206.7e25d","type":"ui_group","name":"Other","tab":"2055516c.c5c88e","order":2,"disp":true,"width":"6","collapse":false},{"id":"2055516c.c5c88e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
It all depends what you are trying to do, there is a lot of selector tricks for CSS so you can reach needed elements and do what ever needed.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
