The colour in/on this isn't changing. (CSS)

Dashboard
21

I'll jump in and say they will all be white.

Only becase the !important is set at the end and it over rides the others.
And....

You define the rect outer rect middle and rect inner.
Then you style them with the .rect{ } to set the size.

.inner is told to be blue.

.middle is told to be orange.

.outer is told to be ... well, what ever that gets you.

But the last bit is marked as !important and so over writes the previous values.

Yes?

22

No. Just because of the html structure has no element where all those classes are included.
See the referenced document
.outer.middle.inner
vs
.outer .middle .inner

23

Oh. I really need to find my notes...

I was reading it as the .(name) was kind of inline.

But I'm confused and got the reply wrong. I'd better stop as saying any more will only further confuse me. :wink:

24

No problem. I did point out the source of truth and the way to achieve the goals.

There will be red square rendered by outer div which will be only div where rule is not suppressed.

25

As promised, a working example. I have changed the name of the tab and group to NewTab and NewGroup. So in the CSS the selector has to change to #NewTab_NewGroup p.nr-dashboard-cardtitle

Untitled 2
Untitled 2796Ɨ188 11.8 KB 

[
    {
        "id": "1e42289fcf94667f",
        "type": "tab",
        "label": "NewFlow",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "d2958868e553c501",
        "type": "ui_text",
        "z": "1e42289fcf94667f",
        "group": "3ea1fadd3bc0aaf2",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "Some more text",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "",
        "x": 600,
        "y": 140,
        "wires": []
    },
    {
        "id": "e653c4b8419a952d",
        "type": "ui_text",
        "z": "1e42289fcf94667f",
        "group": "3ea1fadd3bc0aaf2",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "Some text",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 100,
        "wires": []
    },
    {
        "id": "17c75cbb5ea47c46",
        "type": "ui_template",
        "z": "1e42289fcf94667f",
        "group": "3ea1fadd3bc0aaf2",
        "name": "CSS",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #NewTab_NewGroup p.nr-dashboard-cardtitle {\n        color: {{msg.payload}};\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 390,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "7cf179c8871e23dd",
        "type": "inject",
        "z": "1e42289fcf94667f",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "red",
        "payloadType": "str",
        "x": 210,
        "y": 100,
        "wires": [
            [
                "17c75cbb5ea47c46"
            ]
        ]
    },
    {
        "id": "266e1c32d5c1b971",
        "type": "inject",
        "z": "1e42289fcf94667f",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "lime",
        "payloadType": "str",
        "x": 210,
        "y": 140,
        "wires": [
            [
                "17c75cbb5ea47c46"
            ]
        ]
    },
    {
        "id": "3ea1fadd3bc0aaf2",
        "type": "ui_group",
        "name": "NewGroup",
        "tab": "0c98b713961b07d2",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "0c98b713961b07d2",
        "type": "ui_tab",
        "name": "NewTab",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Edit - I just noticed the template node has an info: section copied from the original post and not relevant, so I reposted the code without it

1 Like
26

I am going through a lot of my code and redesigning a lot of it.

As a result I am getting a few more lists of things and they are eating screen space.
Collapsing the groups/lists when not used/needed saves space and is sort of reasonable.

If/when things happen and stuff sent to the list, the main font colour changes indicating to me that I need to open that group.

I am not seeing/learning that I have a lot of work to do as I have time stamps and new day marker messages injected into these lists and so I have to order things so those don't set off the indicator.

Oh, what fun I am having. :wink:

Thanks for the help.

(And to you @jbudd )

27

Believe me @hotNipi there will be a mess if I try and do anything at all with Javascript! That's why I try to do dashboard related stuff entirely in CSS if I can, not because I think it's in any way better than using scripts.

28

Well of course, the CSS is powerful thing but it has limits at some point. This little thing here can be done in both ways. To choose correct path it really depends on too many things so I will not even try to point them out right now. :slight_smile:

29

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