My project uses the notification nodes. I have 3 of them, and I'd like to be able to change the background color, text size, and notification size. How do i do this? Is there a better way to do this than to use the notification node?
When I set the color, why does it only change the left border of the notification?
AI has taken me down this path with the ui-template node. Using Dashboard 2.0 BTW.
[
{
"id": "973707f243168d80",
"type": "tab",
"label": "Flow 4",
"disabled": false,
"info": "",
"env": []
},
{
"id": "4361077ac9a3f807",
"type": "ui-template",
"z": "973707f243168d80",
"group": "",
"page": "",
"ui": "ff48cd83ca1ae463",
"name": "",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": "/* Red / Critical */\n.big-red .v-snackbar__wrapper {\n background-color: #0090f8 !important; /* Full red background */\n min-width: 600px !important;\n min-height: 120px !important;\n}\n\n/* Green / Success */\n.big-green .v-snackbar__wrapper {\n background-color: #0ff71a !important; /* Full green background */\n min-width: 500px !important;\n}\n\n/* ORANGE/ SEMI-Critical */\n.big-red .v-snackbar__wrapper {\n background-color: #f88d00 !important; /* Full red background */\n min-width: 600px !important;\n min-height: 120px !important;\n}\n/* Ensure text is readable on the dark colors */\n.big-red .v-snackbar__content, \n.big-orange .v-snackbar__content, \n.big-green .v-snackbar__content {\n color: white !important;\n font-size: 32px !important;\n font-weight: bold !important;\n}\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "site:style",
"className": "",
"x": 160,
"y": 220,
"wires": [
[]
]
},
{
"id": "70ae0ec4e289204b",
"type": "ui-notification",
"z": "973707f243168d80",
"ui": "ff48cd83ca1ae463",
"position": "top right",
"colorDefault": true,
"color": "#000000",
"displayTime": "",
"showCountdown": false,
"outputs": 1,
"allowDismiss": true,
"dismissText": "Close",
"allowConfirm": false,
"confirmText": "Confirm",
"raw": false,
"className": "",
"name": "red",
"x": 830,
"y": 220,
"wires": [
[]
]
},
{
"id": "44043e43750768b0",
"type": "ui-notification",
"z": "973707f243168d80",
"ui": "ff48cd83ca1ae463",
"position": "top right",
"colorDefault": true,
"color": "#ff8800",
"displayTime": "",
"showCountdown": false,
"outputs": 1,
"allowDismiss": true,
"dismissText": "Close",
"allowConfirm": false,
"confirmText": "Confirm",
"raw": false,
"className": "",
"name": "big-orange",
"x": 850,
"y": 280,
"wires": [
[]
]
},
{
"id": "6fd52d2854faa28f",
"type": "ui-notification",
"z": "973707f243168d80",
"ui": "ff48cd83ca1ae463",
"position": "top right",
"colorDefault": true,
"color": "#04ff00",
"displayTime": "",
"showCountdown": false,
"outputs": 1,
"allowDismiss": true,
"dismissText": "Close",
"allowConfirm": false,
"confirmText": "Confirm",
"raw": false,
"className": "",
"name": "green",
"x": 830,
"y": 340,
"wires": [
[]
]
},
{
"id": "b38c522a61d53a03",
"type": "inject",
"z": "973707f243168d80",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 380,
"y": 280,
"wires": [
[
"165e639299b48414"
]
]
},
{
"id": "742d82204512d5b5",
"type": "inject",
"z": "973707f243168d80",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 380,
"y": 340,
"wires": [
[
"b947a681f831d3fb"
]
]
},
{
"id": "93b0b68e27f57b91",
"type": "change",
"z": "973707f243168d80",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.class",
"pt": "msg",
"to": "big-red",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 610,
"y": 220,
"wires": [
[
"70ae0ec4e289204b",
"48e6725bbb68349b"
]
]
},
{
"id": "165e639299b48414",
"type": "change",
"z": "973707f243168d80",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.class",
"pt": "msg",
"to": "big-orange",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 610,
"y": 280,
"wires": [
[
"44043e43750768b0"
]
]
},
{
"id": "b947a681f831d3fb",
"type": "change",
"z": "973707f243168d80",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.class",
"pt": "msg",
"to": "big-green",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 610,
"y": 340,
"wires": [
[
"6fd52d2854faa28f"
]
]
},
{
"id": "48e6725bbb68349b",
"type": "debug",
"z": "973707f243168d80",
"name": "debug 10",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 820,
"y": 140,
"wires": []
},
{
"id": "da0abcc81dc53166",
"type": "inject",
"z": "973707f243168d80",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 380,
"y": 220,
"wires": [
[
"93b0b68e27f57b91"
]
]
},
{
"id": "ff48cd83ca1ae463",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": false
},
{
"id": "69acb52704590921",
"type": "global-config",
"env": [],
"modules": {
"@flowfuse/node-red-dashboard": "1.29.0"
}
}
]
