CSS in dashboard 2.0

General
1

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
image499×208 3.07 KB

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
image1280×243 19.2 KB

Ps: I tested the 2 attributes separately.

2

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!)

4

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

[
    {
        "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"
        }
    }
]
5

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

6

test
test1657×691 33.1 KB

There was nothing in "VAGA 1", now I added a text input to make it easier to understand.
Here is the new code:

[
    {
        "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"
        }
    }
]
7

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

chrome_Ek2qxy4Xsw

Then, apply your class to the widget

image
image518×545 14.2 KB

Result

image
image518×545 14.2 KB