How do I set up a Class Template for a group of UI Text nodes?

Hi guys1

I have the following template which can set a particular ui-text node's font by using its ID:

[
    {
        "id": "1354ad7a373cff3a",
        "type": "ui_template",
        "z": "68e5c71acc43e814",
        "g": "3965a91f04409ef6",
        "group": "62350f50d4b09ff8",
        "name": "Set NodeId Font->LCD_Text",
        "order": 70,
        "width": 0,
        "height": 0,
        "format": "<style>\n@font-face {\n    font-family: LCDFont;\n    src: url(\"/fonts/7 Segment.ttf\");\n}\n[node-id=\"06402e17db343b1b\"] .value {\n    font-size: 90px; \n    color:green;\n    font-family: LCDFont;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 300,
        "y": 1110,
        "wires": [
            []
        ]
    },
    {
        "id": "62350f50d4b09ff8",
        "type": "ui_group",
        "name": "PCR1000",
        "tab": "554e77d51ad13f2d",
        "order": 1,
        "disp": false,
        "width": 25,
        "collapse": false,
        "className": ""
    },
    {
        "id": "554e77d51ad13f2d",
        "type": "ui_tab",
        "name": "Main",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

It is working fine, but rather than specify a template for each UI-Text, I would like to be able to apply it using:

screenshot-127.0.0.1_1880-2021.11.05-23_16_09

Can you perhaps point me in the right direction?

TIA
Ed

Here's the concept of having class declared at the widget level. Examine all the widgets and see why and how it applies.

[
    {
        "id": "c7a835b9b00660a7",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text node",
        "format": "this is text were class is set red",
        "layout": "row-left",
        "className": "textnode-red-value",
        "x": 770,
        "y": 970,
        "wires": []
    },
    {
        "id": "bdb7438992b91faf",
        "type": "ui_template",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "name": "",
        "order": 6,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .textnode-red-value .value{\n        color:red;\n    }\n    .textnode-green-value .value{\n    color:green;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 770,
        "y": 910,
        "wires": [
            []
        ]
    },
    {
        "id": "d1ca671a31f152a4",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text node",
        "format": "this is text were class is set green",
        "layout": "row-left",
        "className": "textnode-green-value",
        "x": 770,
        "y": 1020,
        "wires": []
    },
    {
        "id": "25d2d74451c85647",
        "type": "ui_text",
        "z": "e490bfdba10fb48a",
        "group": "6ff3bb48.c2b764",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text node",
        "format": "some other thex but green",
        "layout": "row-left",
        "className": "textnode-green-value",
        "x": 770,
        "y": 1060,
        "wires": []
    },
    {
        "id": "6ff3bb48.c2b764",
        "type": "ui_group",
        "name": "Storage",
        "tab": "c209d57.e95de28",
        "order": 1,
        "disp": true,
        "width": "18",
        "collapse": false
    },
    {
        "id": "c209d57.e95de28",
        "type": "ui_tab",
        "name": "Recordings",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

The class is added to the parent element so it takes to have css arranged to apply the rule to the those element child.

Thanks Heaps!!

Got it working with your help!!

[
    {
        "id": "0d8b36259550032b",
        "type": "ui_template",
        "z": "68e5c71acc43e814",
        "g": "3965a91f04409ef6",
        "group": "6ff3bb48.c2b764",
        "name": "textnode-LCD-Font Template",
        "order": 6,
        "width": 0,
        "height": 0,
        "format": "<style>\n    @font-face {\n        font-family: LCDFont;\n        src: url(\"/fonts/7 Segment.ttf\");\n    }\n    .textnode-LCD-Font .value{\n        font-size: 90px; \n        color:green;\n        font-family: LCDFont;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 180,
        "y": 1140,
        "wires": [
            []
        ]
    },
    {
        "id": "6ff3bb48.c2b764",
        "type": "ui_group",
        "name": "Storage",
        "tab": "c209d57.e95de28",
        "order": 1,
        "disp": true,
        "width": "18",
        "collapse": false
    },
    {
        "id": "c209d57.e95de28",
        "type": "ui_tab",
        "name": "Recordings",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Regds
Ed

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