Apply a class to a text node

Dashboard
1

Doing my first steps into Dashboard 2.
The dashboard does not any reaction to font-size: --px. What I'm doing wrong?

[
    {
        "id": "8ea5dbdfb7c2ac3f",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "8cf2ee1796caf35f",
        "type": "ui-template",
        "z": "8ea5dbdfb7c2ac3f",
        "group": "",
        "page": "9ea3ac9ca0cf2aae",
        "ui": "",
        "name": "",
        "order": 3,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "\n  .Schrift{\n    font-size: 30px;  \n    color: red;\n    font-weight: 600;\n  }\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 730,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "2ff9a7b24f8598fb",
        "type": "ui-text",
        "z": "8ea5dbdfb7c2ac3f",
        "group": "e6351cb4935bc963",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "Schrift-Test",
        "label": "Schrift-Test",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "style": false,
        "font": "Arial,Arial,Helvetica,sans-serif",
        "fontSize": "24",
        "color": "#267fdf",
        "wrapText": false,
        "className": "Schrift",
        "value": "payload",
        "valueType": "msg",
        "x": 730,
        "y": 400,
        "wires": []
    },
    {
        "id": "fc542f9aeb4bdef2",
        "type": "inject",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "on",
        "payloadType": "str",
        "x": 430,
        "y": 380,
        "wires": [
            [
                "2ff9a7b24f8598fb"
            ]
        ]
    },
    {
        "id": "86820f4aa8c30959",
        "type": "inject",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "off",
        "payloadType": "str",
        "x": 430,
        "y": 420,
        "wires": [
            [
                "2ff9a7b24f8598fb"
            ]
        ]
    },
    {
        "id": "9ea3ac9ca0cf2aae",
        "type": "ui-page",
        "name": "Flow 1",
        "ui": "2bcd223180e211a8",
        "path": "/page2",
        "icon": "home",
        "layout": "grid",
        "theme": "1cbfd3a7a1359037",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "5"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e6351cb4935bc963",
        "type": "ui-group",
        "name": "Test",
        "page": "9ea3ac9ca0cf2aae",
        "width": "3",
        "height": "5",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "2bcd223180e211a8",
        "type": "ui-base",
        "name": "Mein Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "1cbfd3a7a1359037",
        "type": "ui-theme",
        "name": "Standardthema",
        "colors": {
            "surface": "#097479",
            "primary": "#0094ce",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "496dfe812fc215a4",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.0"
        }
    }
]
2

I think your font-size declaration is being overridden by a rule elsewhere. You need to make the selector a bit more specific. Try this

  .Schrift label, .Schrift span{
    font-size: 30px;  
    color: red;
    font-weight: 600;
  }
3

thanks ! :slight_smile: