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

**URL:** <https://discourse.nodered.org/t/how-do-i-set-up-a-class-template-for-a-group-of-ui-text-nodes/53274>\
**Category:** Dashboard\
**Created:** [5 November 2021 21:17 UTC](https://discourse.nodered.org/t/how-do-i-set-up-a-class-template-for-a-group-of-ui-text-nodes/53274 "2021-11-05T21:17:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [5 November 2021 21:17 UTC](https://discourse.nodered.org/t/how-do-i-set-up-a-class-template-for-a-group-of-ui-text-nodes/53274/1 "2021-11-05T21:17:15Z")

</div>

Hi guys1

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

```auto
[
    {
        "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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9beefd49cc2e990ef9e0a87c401b69aa17ad04e4.png)

Can you perhaps point me in the right direction?

TIA  
Ed

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 November 2021 21:37 UTC](https://discourse.nodered.org/t/how-do-i-set-up-a-class-template-for-a-group-of-ui-text-nodes/53274/2 "2021-11-05T21:37:01Z")

</div>

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

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/4740c8302a1d59839d0c4a3650ae4a5256eb959e.png)

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [5 November 2021 21:50 UTC](https://discourse.nodered.org/t/how-do-i-set-up-a-class-template-for-a-group-of-ui-text-nodes/53274/3 "2021-11-05T21:50:13Z")

</div>

Thanks Heaps!!

Got it working with your help!!

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

---

<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:** [19 November 2021 21:51 UTC](https://discourse.nodered.org/t/how-do-i-set-up-a-class-template-for-a-group-of-ui-text-nodes/53274/4 "2021-11-19T21:51:01Z")

</div>

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