# How to use class functionality for widgets in Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 September 2024 17:19 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211 "2024-09-23T17:19:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![saraltech](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@saraltech](https://discourse.nodered.org/u/saraltech)\
**Post date:** [23 September 2024 17:19 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/1 "2024-09-23T17:19:59Z")

</div>

I am struggling to use CSS Class functiionality for widgets in dashboard 2.0.  
Kindly suggest some examples where this functionality is explained. for exmple in the below code, I am not able to increase the font size of the button label.

```auto
[
    {
        "id": "99f0d6c8876920a5",
        "type": "ui-button",
        "z": "8b4bd0230d9a8a72",
        "group": "7a71cb83c1ec7d1b",
        "name": "",
        "label": "",
        "order": 1,
        "width": "3",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 570,
        "y": 2200,
        "wires": [
            []
        ]
    },
    {
        "id": "268faf7ea8fc6aa1",
        "type": "inject",
        "z": "8b4bd0230d9a8a72",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 200,
        "y": 2180,
        "wires": [
            [
                "8d4c4fec3ee8346d"
            ]
        ]
    },
    {
        "id": "8d4c4fec3ee8346d",
        "type": "function",
        "z": "8b4bd0230d9a8a72",
        "name": "function 21",
        "func": "msg.payload = \"CFF LINE\"\nmsg.ui_update={\n \"buttonColor\" : \"green\",\n \"label\": \"CFF Line\",\n \"class\": \"red\"\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 2220,
        "wires": [
            [
                "99f0d6c8876920a5"
            ]
        ]
    },
    {
        "id": "8b243794fdc08d49",
        "type": "ui-template",
        "z": "8b4bd0230d9a8a72",
        "group": "",
        "page": "bb3d409a9702f9f3",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".red{\nfont-size: 50px;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:page",
        "className": "",
        "x": 520,
        "y": 2120,
        "wires": [
            []
        ]
    },
    {
        "id": "7a71cb83c1ec7d1b",
        "type": "ui-group",
        "name": "Oven Status",
        "page": "bb3d409a9702f9f3",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "bb3d409a9702f9f3",
        "type": "ui-page",
        "name": "Epack Oven",
        "ui": "8af0eba80b85dcfe",
        "path": "/epackoven",
        "icon": "home",
        "layout": "grid",
        "theme": "623ff1c5e1dc9bab",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8af0eba80b85dcfe",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "623ff1c5e1dc9bab",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeded",
            "groupBg": "#ffffff",
            "groupOutline": "#f3f1f1"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

please suggest.

---

<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:** [23 September 2024 17:36 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/2 "2024-09-23T17:36:11Z")

</div>

Just couple of changes needed

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e37bd6bc42a43469127f2b6624d9b0d226fe0ad.png)

---

<div class="post-metadata">

**Author:** ![saraltech](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@saraltech](https://discourse.nodered.org/u/saraltech)\
**Post date:** [24 September 2024 17:43 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/3 "2024-09-24T17:43:19Z")

</div>

Thanks for quick reply. Unfortunately, it does not work. I tried both cases:  
msg.ui\_update={"class":"red"}, as well as msg.class = "red". both does not work. Other elemenys of ui\_update like background color is working. Am i doing something wrong in the below code:

```auto
[
    {
        "id": "99f0d6c8876920a5",
        "type": "ui-button",
        "z": "8b4bd0230d9a8a72",
        "group": "7a71cb83c1ec7d1b",
        "name": "",
        "label": "",
        "order": 1,
        "width": "3",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 570,
        "y": 2220,
        "wires": [
            []
        ]
    },
    {
        "id": "268faf7ea8fc6aa1",
        "type": "inject",
        "z": "8b4bd0230d9a8a72",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 200,
        "y": 2220,
        "wires": [
            [
                "8d4c4fec3ee8346d"
            ]
        ]
    },
    {
        "id": "8d4c4fec3ee8346d",
        "type": "function",
        "z": "8b4bd0230d9a8a72",
        "name": "function 21",
        "func": "//msg.payload = \"CFF LINE\"\nmsg.ui_update={\n \"buttonColor\" : \"green\",\n \"label\": \"CFF Line\",\n \"class\": \"red\"\n}\n//msg.class = \"red\"\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 2220,
        "wires": [
            [
                "99f0d6c8876920a5"
            ]
        ]
    },
    {
        "id": "8b243794fdc08d49",
        "type": "ui-template",
        "z": "8b4bd0230d9a8a72",
        "group": "",
        "page": "",
        "ui": "8af0eba80b85dcfe",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "\n.red .v-btn_content{\nfont-size: 50px;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 560,
        "y": 2140,
        "wires": [
            []
        ]
    },
    {
        "id": "7a71cb83c1ec7d1b",
        "type": "ui-group",
        "name": "Oven Status",
        "page": "bb3d409a9702f9f3",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8af0eba80b85dcfe",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "bb3d409a9702f9f3",
        "type": "ui-page",
        "name": "Epack Oven",
        "ui": "8af0eba80b85dcfe",
        "path": "/epackoven",
        "icon": "home",
        "layout": "grid",
        "theme": "623ff1c5e1dc9bab",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "623ff1c5e1dc9bab",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeded",
            "groupBg": "#ffffff",
            "groupOutline": "#f3f1f1"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 September 2024 18:05 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/4 "2024-09-24T18:05:13Z")

</div>

> [@saraltech](#):
>
> I am struggling to use CSS Class functiionality for widgets in dashboard 2.0.  
> Kindly suggest some examples where this functionality is explained

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b5762c83050445bf32210eeeea5864bca87cc39.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e8e78946cb9863b6c89d18a4f111bb8d581dcec7.png)

```auto
[{"id":"2fe9ed0065bafadd","type":"ui-template","z":"3e2dbdb52b566414","group":"67172933099081b6","ui":"d45641ed6d39fea1","name":"","order":0,"width":0,"height":0,"head":"","format":".nrdb-ui-widget.nrdb-ui-button.big span {\n font-size: 2em;\n}\n.nrdb-ui-widget.nrdb-ui-button.little span {\n font-size: 1em;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":720,"y":140,"wires":[[]]},{"id":"13422c692db9f8b9","type":"ui-button","z":"3e2dbdb52b566414","group":"67172933099081b6","name":"","label":"button","order":0,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":710,"y":200,"wires":[[]]},{"id":"02f9bbb5882983a4","type":"ui-button","z":"3e2dbdb52b566414","group":"67172933099081b6","name":"","label":"Big","order":0,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":390,"y":180,"wires":[["3963ceaf34c6641c"]]},{"id":"c6e98463e9f888d6","type":"ui-button","z":"3e2dbdb52b566414","group":"67172933099081b6","name":"","label":"Little","order":0,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":390,"y":220,"wires":[["80e33e1da3cd3403"]]},{"id":"3963ceaf34c6641c","type":"change","z":"3e2dbdb52b566414","name":"","rules":[{"t":"set","p":"class","pt":"msg","to":"big","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":180,"wires":[["13422c692db9f8b9"]]},{"id":"80e33e1da3cd3403","type":"change","z":"3e2dbdb52b566414","name":"","rules":[{"t":"set","p":"class","pt":"msg","to":"little","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":220,"wires":[["13422c692db9f8b9"]]},{"id":"67172933099081b6","type":"ui-group","name":"Demo","page":"e3a1a003d3c5fd05","width":"6","height":"8","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"e3a1a003d3c5fd05","type":"ui-page","name":"Demo","ui":"d45641ed6d39fea1","path":"/demo","icon":"home","layout":"grid","theme":"e4e51d0dcd1c0e6d","order":3,"className":"","visible":"true","disabled":"false"},{"id":"e4e51d0dcd1c0e6d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![saraltech](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@saraltech](https://discourse.nodered.org/u/saraltech)\
**Post date:** [25 September 2024 14:22 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/5 "2024-09-25T14:22:56Z")

</div>

Thanks a lot jbudd.. Where can we find any documentation on this so that other use cases can also be studied?  
Thanks It is of great help. I really appreciate.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 September 2024 15:17 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/6 "2024-09-25T15:17:07Z")

</div>

> [@saraltech](#):
>
> Where can we find any documentation on this so that other use cases can also be studied?

There doesn't seem to be much available, which is why I have posted my experiments in the "Share your projects" section of the forum. I am far from expert though so following my examples might lead you into trouble.

There is a flowfuse blog which might have something, also a flowfuse channel on Youtube.

---

<div class="post-metadata">

**Author:** ![saraltech](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@saraltech](https://discourse.nodered.org/u/saraltech)\
**Post date:** [26 September 2024 03:31 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/7 "2024-09-26T03:31:28Z")

</div>

Oh, I did not know the "Share your project" section. I looked at it and I must say you have really put a lot of efforts in styling topic. thanks for your hardwork which help lot of people like me.

---

<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:** [10 October 2024 03:31 UTC](https://discourse.nodered.org/t/how-to-use-class-functionality-for-widgets-in-dashboard-2-0/91211/8 "2024-10-10T03:31:51Z")

</div>

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