# Styling the dashboard notification

**URL:** https://discourse.nodered.org/t/styling-the-dashboard-notification/86184
**Category:** Dashboard
**Created:** [6 March 2024 13:15 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184 "2024-03-06T13:15:40Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [6 March 2024 13:15 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/1 "2024-03-06T13:15:40Z")

</div>

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:

```auto
[{"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}]

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 March 2024 13:27 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/2 "2024-03-06T13:27:19Z")

</div>

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](https://dashboard.flowfuse.com/) 2.0)

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

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [6 March 2024 13:41 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/3 "2024-03-06T13:41:39Z")

</div>

I'm using the original dashboard the legacy

I'm not able to add the image here

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 March 2024 13:43 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/4 "2024-03-06T13:43:41Z")

</div>

> [@Erissin\_Industria4.0](#):
>
> I'm not able to add the image here

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

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [6 March 2024 13:53 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/5 "2024-03-06T13:53:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [6 March 2024 14:24 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/6 "2024-03-06T14:24:47Z")

</div>

Try

```auto
[{"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}]

```

```auto
#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](https://discourse.nodered.org/search?q=style%20notification%20button)  
Then first result [Style notification buttons - #4 by Steve-Mcl](https://discourse.nodered.org/t/style-notification-buttons/63218/4)

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [6 March 2024 16:50 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/7 "2024-03-06T16:50:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [26 March 2024 13:00 UTC](https://discourse.nodered.org/t/styling-the-dashboard-notification/86184/8 "2024-03-26T13:00:17Z")

</div>

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