Customise DB2 Widgets

Dashboard
1

Hello All,

I have Node-RED running on an Raspberry Pi and I decided to take the plunge to move dashboard from Ver 1 to Ver 2. Instance has only two flows with a few pages in dashboard which use switches, text, drop-down and slider UIs. Migration script was very helpful but it could not migrate the DB1-UI Template. This template has its source in a post by HotNipi which I adapted to my simple needs. It modifies widget background colours which , at least to my taste, delimits them and makes them more visible. I add examples of the DB1 and DB2 screenshots.

I searched in the forum any posts which might have relevance to this issue in DB2 but I was unsuccessful. I attach the screenshot of displays; original DB1 template and well as the DB2 template which I managed to fill.

Does someone have any pointers as to how to customise the DB2 widgets to get similar results with Vuetify.

Thanks in advance.
Quike :grinning_face:

DB1_widgets
DB1_widgets399×366 26.7 KB

DB2_widgets
DB2_widgets703×492 28.2 KB

[DB1_UI_template.json|attachment](upload://wHUYQ65pinav12Kxmkz7DEJIK6H.json) (3.0 KB)

[DB2_UI_template.json|attachment](upload://rjsrzHcICKNqxz3u7zc2AFKWxQq.json) (1.8 KB)
2

I can't download either of your templates. Maybe I'm doing something wrong.

Can you copy each template's contents and paste them here between two lines of three backticks? The </> button provides the backtick lines.

3

Hi,

Here are the templates

DB1

[
    {
        "id": "9a72559c69dc880d",
        "type": "ui_template",
        "z": "09adb945826045ce",
        "group": "9398192d41ba2400",
        "name": "DB1 UI Template",
        "order": 11,
        "width": 0,
        "height": 0,
        "format": "<style>\n       <style id=\"dashboard-styles-override\">.nr-dashboard-theme md-select-menu md-option {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        color: #eeeeee;\n        height: 29px;\n        /* border-radius: 14px;*/\n        margin-left: 10px;\n        margin-right: 10px;\n        margin-top: 2px;\n        box-shadow: 0 0 6px 6px #24202133;\n        transition: 0.3s;\n    }\n    /*Testing*/\n     .nr-dashboard-theme md-content md-card {\n        background-color: #33333300;\n        color: var(--color-text-primary);\n        text-shadow: 4px 2px 4px #00000044;\n        box-shadow: inset 0px 10px 20px 0px #0000006b;\n        border-radius: 12px;\n        border: 1px solid #565655e6;\n        border-top: 2px solid #4b4b4a;\n    }\n    /*Testing*/\n    .nr-dashboard-theme md-select-menu md-option[selected] {\n        color: var(--nr-dashboard-widgetTextColor) !important;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        opacity: 0.8;\n    }\n    .nr-dashboard-theme md-select-menu md-option:last-child {\n        margin-bottom: 8px;\n    }\n    .nr-dashboard-theme md-select-menu md-option:hover {\n        background-color: var(--nr-dashboard-widgetBackgroundColor) !important;\n        padding-left: 24px;\n    }\n    .nr-dashboard-theme md-select-menu md-option>.md-ripple-container {\n        /* border-radius: 14px;*/\n    }\n    .my_label_red {\n            color: red !important;\n            font-family: ariel;\n            font-size: 125%;\n            font-weight: 600;\n        }\n    \n    .my_label_green {\n            color: green !important;\n            font-family: ariel;\n            font-size: 125%;\n            font-weight: 600;\n        }\n    </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "DDropdown",
        "x": 330,
        "y": 40,
        "wires": [
            []
        ]
    },
    {
        "id": "9398192d41ba2400",
        "type": "ui_group",
        "name": "Alarm",
        "tab": "8f736e3139054443",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "8f736e3139054443",
        "type": "ui_tab",
        "name": "Alarm",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "b73f4e8625f22f1a",
        "type": "global-config",
        "env": [],
        "modules": {
            "node-red-dashboard": "3.6.6"
        }
    }
]

DB2 Template

[
    {
        "id": "8d033a0db73b01f3",
        "type": "ui-template",
        "z": "f219297eecf0f392",
        "group": "",
        "page": "",
        "ui": "b8cf8b150092daca",
        "name": "DB2 UI Template",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "/* define any styles here - supports raw CSS */\n.my_label_red {\n    color: red;\n    font-family: Arial;\n    font-size: 24px;\n    font-weight: 900;\n}\n.my_label_green {\n    color: green;\n    font-family: Arial;\n    font-size: 24px;\n    font-weight: 900;\n}\n.my-text-style {\n    font-size: 24px;\n    color: #FF5733;\n    font-weight: bold;\n}\n.nrdb-ui-page.mytheme,\n.nrdb-ui-page.mytheme div.nrdb-ui-text > label {\n    font-family: 'Tahoma';\n}\n.mytitle div.nrdb-ui-text > label {\n    font-size:30px;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 330,
        "y": 40,
        "wires": [
            []
        ]
    },
    {
        "id": "b8cf8b150092daca",
        "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": "3a70693ddf0f0417",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]