Styling the dashboard notification

Dashboard
1

Hello, I'm trying to style my "notification" node with the template node but I don't know why it's not changing the color and border

Follow my flow below:

[{"id":"e178618d12a06b0e","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"8d12b7c1d045061c","type":"inject","z":"e178618d12a06b0e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":330,"y":260,"wires":[["d81e5c011568d706"]]},{"id":"4d89ea8d163d9ae3","type":"inject","z":"e178618d12a06b0e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":330,"y":360,"wires":[["d81e5c011568d706"]]},{"id":"d81e5c011568d706","type":"rbe","z":"e178618d12a06b0e","name":"","func":"rbei","gap":"","start":"","inout":"out","septopics":true,"property":"payload","topi":"topic","x":610,"y":280,"wires":[["29c0b8921a82592c"]]},{"id":"29c0b8921a82592c","type":"function","z":"e178618d12a06b0e","name":"function 84","func":"if(msg.payload == true){\n    msg.payload = \"Realizar troca do equipamento imediatamente.\"\n    msg.topic = \"Atuador 1 necessita de manutenção!\"\n}\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":770,"y":280,"wires":[["1a10779adaecfe2a"]]},{"id":"1a10779adaecfe2a","type":"switch","z":"e178618d12a06b0e","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Realizar troca do equipamento imediatamente.","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":910,"y":280,"wires":[["6d9a99f773591ec9"]]},{"id":"6d9a99f773591ec9","type":"ui_toast","z":"e178618d12a06b0e","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"vor2","topic":"","name":"","x":990,"y":380,"wires":[[]]},{"id":"d52013405d3454db","type":"ui_template","z":"e178618d12a06b0e","group":"a3fa2dec44535f8f","name":"","order":69,"width":0,"height":0,"format":"<style>\n    \n    .vor2>.md-button {\n        background-color: rgb(0, 250, 0) !important;\n        /* add your custom css here */\n        border-radius: 15px\n    }\n\n    </style","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1020,"y":520,"wires":[[]]},{"id":"a3fa2dec44535f8f","type":"ui_group","name":"Monitoramento de vida Ăștil","tab":"e92507140fa94b1e","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"e92507140fa94b1e","type":"ui_tab","name":"EEEEEEEE","icon":"dashboard","disabled":false,"hidden":false}]
2

For folk to help you, please let us know which dashboard you are using (original/legacy node-red-dashboard or the newer @flowfuse/node-red-dashboard 2.0)

A screenshot showing what you are doing and what you are getting would also help.

3

I'm using the original dashboard the legacy

I'm not able to add the image here

4

Yes you can. Simply copy it to your clipboard then paste inside the text editor.

5

It's giving me an error when I paste the image here

6

Try

[{"id":"d52013405d3454db","type":"ui_template","z":"e178618d12a06b0e","group":"a3fa2dec44535f8f","name":"","order":69,"width":0,"height":0,"format":"<style>\n \n     #nr-dashboard > div.md-dialog-container > md-dialog > md-dialog-actions > button {\n        background-color: rgb(0, 250, 0) !important;\n        /* add your custom css here */\n        border-radius: 15px\n    }\n\n    </style","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"global","className":"","x":760,"y":380,"wires":[[]]},{"id":"a3fa2dec44535f8f","type":"ui_group","name":"Monitoramento de vida Ăștil","tab":"e92507140fa94b1e","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"e92507140fa94b1e","type":"ui_tab","name":"EEEEEEEE","icon":"dashboard","disabled":false,"hidden":false}]

#nr-dashboard > div.md-dialog-container > md-dialog > md-dialog-actions > button {
    background-color: rgb(0, 250, 0) !important;
    border-radius: 15px
}

Add to site head, not widget in group

A forum search would have given Search results for 'style notification button' - Node-RED Forum
Then first result Style notification buttons - #4 by Steve-Mcl

1 Like
7

Could you explain this code to me please, and is it possible to change the border color of this box

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.