# CSS in dashboard 2.0

**URL:** <https://discourse.nodered.org/t/css-in-dashboard-2-0/94050>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [20 December 2024 14:32 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050 "2024-12-20T14:32:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Placido](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/placido/32/89674_2.png) [@Placido](https://discourse.nodered.org/u/Placido)\
**Post date:** [20 December 2024 14:32 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/1 "2024-12-20T14:32:01Z")

</div>

Hi, I'm trying to customize some CSS attributes in Dashboard 2.0, but some changes aren't taking effect. Here's an example:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d9f873db05b5a30e222ea807617ac9dd8b7acb5.png)

When the opacity change is applied correctly, but the background color modification only affects the background of the entire group, not individual elements within it:

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

Ps: I tested the 2 attributes separately.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 December 2024 15:18 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/2 "2024-12-20T15:18:57Z")

</div>

The class on the widgets gets applied to the parent of the widget.  
It is up to you to target elements within the widget accordingly.

What is this "Vaga 1" - a template? a ui-text? something else?

How are you adding the CSS - in a separate template? in a template with a div containing "Vaga 1"

Details are important.

_PS in future, please paste code as text (saves whoever is helping out from retyping what you already wrote!)_

---

<div class="post-metadata">

**Author:** ![Placido](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/placido/32/89674_2.png) [@Placido](https://discourse.nodered.org/u/Placido)\
**Post date:** [20 December 2024 16:18 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/4 "2024-12-20T16:18:49Z")

</div>

Sorry, I forgot to include the code earlier. Here it is:

```auto
[
    {
        "id": "0a0eceda8b27bc87",
        "type": "tab",
        "label": "Duvidas de Forum",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1e0c41d5ba45d92c",
        "type": "ui-template",
        "z": "0a0eceda8b27bc87",
        "group": "cb0da117407ae8ae",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<style>\n /* define any styles here - supports raw CSS */\n .carro {\n background-color: red;\n }\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 140,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "cb0da117407ae8ae",
        "type": "ui-group",
        "name": "Vaga 1",
        "page": "562207807c69e32e",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "carro",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "562207807c69e32e",
        "type": "ui-page",
        "name": "Estacionamento",
        "ui": "3691f8773d02ba1a",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "a86bbef1ce30531e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "3691f8773d02ba1a",
        "type": "ui-base",
        "name": "Playground",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "a86bbef1ce30531e",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 December 2024 16:30 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/5 "2024-12-20T16:30:34Z")

</div>

You have only exported a single ui-template with the `<style>` inside. Where is the thing that shows "Vaga 1"?

---

<div class="post-metadata">

**Author:** ![Placido](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/placido/32/89674_2.png) [@Placido](https://discourse.nodered.org/u/Placido)\
**Post date:** [20 December 2024 16:43 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/6 "2024-12-20T16:43:55Z")

</div>

![test](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41fac97ef17a8f90b3a9246eab7e5d362793270b.png)  
There was nothing in "VAGA 1", now I added a text input to make it easier to understand.  
Here is the new code:

```auto
[
    {
        "id": "0a0eceda8b27bc87",
        "type": "tab",
        "label": "Duvidas de Forum",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1e0c41d5ba45d92c",
        "type": "ui-template",
        "z": "0a0eceda8b27bc87",
        "group": "cb0da117407ae8ae",
        "page": "",
        "ui": "",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<style>\n /* define any styles here - supports raw CSS */\n .carro {\n background-color: red;\n }\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 140,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "36afbc8e9f09b9e9",
        "type": "ui-text-input",
        "z": "0a0eceda8b27bc87",
        "group": "cb0da117407ae8ae",
        "name": "",
        "label": "Test",
        "order": 1,
        "width": 0,
        "height": 0,
        "topic": "topic",
        "topicType": "msg",
        "mode": "text",
        "tooltip": "",
        "delay": 300,
        "passthru": true,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "clearable": false,
        "sendOnClear": false,
        "icon": "",
        "iconPosition": "left",
        "iconInnerPosition": "inside",
        "x": 130,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "cb0da117407ae8ae",
        "type": "ui-group",
        "name": "Vaga 1",
        "page": "562207807c69e32e",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "carro",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "562207807c69e32e",
        "type": "ui-page",
        "name": "Estacionamento",
        "ui": "3691f8773d02ba1a",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "a86bbef1ce30531e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "3691f8773d02ba1a",
        "type": "ui-base",
        "name": "Playground",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "a86bbef1ce30531e",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 December 2024 19:17 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/7 "2024-12-20T19:17:42Z")

</div>

1st, you should set the template node to CSS (site or page)

![chrome_Ek2qxy4Xsw](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c7cff3f1546287168184c095692454f6a68f6f5.gif)

Then, apply your class to the widget

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d601119df4bc32f1665ccb9a0fbb8ebbfeae7e4d.png)

Result

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d601119df4bc32f1665ccb9a0fbb8ebbfeae7e4d.png)

---

<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 January 2025 18:33 UTC](https://discourse.nodered.org/t/css-in-dashboard-2-0/94050/8 "2025-01-10T18:33:57Z")

</div>

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