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

[Trying_to_learn]

Sorry folks, I was given this a long time ago to address a question I had and now I am trying to apply it, it isn't working.

Not blaming the person who gave it to me. It is probably something on my machine.

(But before we go there - a question which this has kind of raised)

There are 3 levels of CSS.... and typically now I am trying to find my notes: I can't.
But basically as I remember it there are: inline - applies to code in that line. page which applies to that page (tab?) and lastly global which is.... global.

And the priority is reversed in application as in global is applied to all.
But then is there is something for that page it overwrites the global settings and lastly if there is something inline it overwrites the other two.

If I am wrong, then that's why it isn't working.

So the code:

[{"id":"d9c05df8e5f12ca0","type":"ui_text","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","order":0,"width":0,"height":0,"name":"group1","label":"Some widgets here","format":"Some widgets here","layout":"col-center","x":980,"y":140,"wires":[]},{"id":"8e80beb59e380f96","type":"ui_text","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","order":0,"width":0,"height":0,"name":"group1","label":"Some widgets here","format":"Some widgets here","layout":"col-center","x":980,"y":100,"wires":[]},{"id":"bf67ca0eb24dac61","type":"ui_template","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","name":"group1","order":7,"width":0,"height":0,"format":"<style>\n    .group1 p.nr-dashboard-cardtitle {\n        color: {{msg.payload}} !important ;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":800,"y":120,"wires":[[]],"info":"<style>\r\n.mplug17 p.nr-dashboard-cardtitle {\r\n        color: green !important;\r\n    }\r\n</style>"},{"id":"58d9e91c3691c384","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":610,"y":100,"wires":[["bf67ca0eb24dac61"]]},{"id":"43040dbea39ee0d9","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lime","payloadType":"str","x":610,"y":140,"wires":[["bf67ca0eb24dac61"]]},{"id":"924a2dc07ecdd1a4","type":"ui_group","name":"group1","tab":"9e1ed5e519ff655f","order":1,"disp":true,"width":"6","collapse":true},{"id":"9e1ed5e519ff655f","type":"ui_tab","name":"TEST","icon":"dashboard","order":39,"disabled":false,"hidden":false}]

machine details:
NR 2.1.4
Dashboard 2.28.1
Ubuntu 21.04
Firefox

Dashboard settings:

Use angular theme in ui_template

The screen font is the default bluish colour.
Pressing either of the inject nodes, no change visible.

Sorry for leaving it this long to respond, but other things have been happening.

Thanks in advance.

[Steve-Mcl]

Use CSS classes...

[
    {
        "id": "d9c05df8e5f12ca0",
        "type": "ui_text",
        "z": "7c13b8452619581b",
        "group": "924a2dc07ecdd1a4",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "group1",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "lime-text",
        "x": 1534,
        "y": 304,
        "wires": []
    },
    {
        "id": "8e80beb59e380f96",
        "type": "ui_text",
        "z": "7c13b8452619581b",
        "group": "924a2dc07ecdd1a4",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "group1",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "lime-text",
        "x": 1534,
        "y": 256,
        "wires": []
    },
    {
        "id": "58d9e91c3691c384",
        "type": "inject",
        "z": "7c13b8452619581b",
        "name": "className=lime-text",
        "props": [
            {
                "p": "className",
                "v": "lime-text",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 1354,
        "y": 256,
        "wires": [
            [
                "d9c05df8e5f12ca0",
                "8e80beb59e380f96"
            ]
        ]
    },
    {
        "id": "e079ac245b22b6e2",
        "type": "inject",
        "z": "7c13b8452619581b",
        "name": "className=red-text",
        "props": [
            {
                "p": "className",
                "v": "red-text",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 1354,
        "y": 304,
        "wires": [
            [
                "8e80beb59e380f96",
                "d9c05df8e5f12ca0"
            ]
        ]
    },
    {
        "id": "29b425b84283b9f2",
        "type": "ui_template",
        "z": "7c13b8452619581b",
        "group": "81dd3718.b97888",
        "name": "head styles",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style id=\"text-colours\">\n    .lime-text {\n        color: lime !important;\n    }\n    .red-text {\n        color: red !important;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 1510,
        "y": 208,
        "wires": [
            []
        ]
    },
    {
        "id": "924a2dc07ecdd1a4",
        "type": "ui_group",
        "name": "group1",
        "tab": "9e1ed5e519ff655f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "81dd3718.b97888",
        "type": "ui_group",
        "name": "Active Alarms",
        "tab": "4e11db25.239e94",
        "order": 1,
        "disp": true,
        "width": 13,
        "collapse": true
    },
    {
        "id": "9e1ed5e519ff655f",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 39,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "4e11db25.239e94",
        "type": "ui_tab",
        "name": "Alarms Monitiring",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

[Trying_to_learn]

Thanks @Steve-Mcl, but it would seen the meaning was lost....

I am wanting to change the colour of the title text.

So it is this font colour I want to change....

Being brought about so if the group is collapsed and something happens, the text colour would change.

[Trying_to_learn]

I was shown another way a long time ago, but can't find it that also changed the icon/triangle also.

[Steve-Mcl]

@Trying_to_learn

Thanks @Steve-Mcl, but it would seen the meaning was lost.

Probably the mahoosive description ( couldnt resist )

Ok, this is a bit tougher and I dont have time to knock up a demo - but the jist of a solution would be to use some client side JS..

• in a ui-template node, intercept the msg.payload (e.g. send a msg with the className to add, className to remove & the CSS selector of the group),
• get a jQuery object for the selector and call .addClass and .removeClass as appropriate.

The better (longer term) fix is to raise a FR issue on Dashboard to ask for a simple way to set a "ui-group" nodes className via the ui_control object or via the ui-control node.

[Trying_to_learn]

Thanks.

As I said in my latter post, someone did post an example that even changed the icon as well.

It wasn't massive or complicated (as in it was not squillions of nodes) but it was a LONG time ago and I suffered a massive machine crash since then so don't have the code.

(What's a FR issue?)

[Steve-Mcl]

Sorry. FR = Feature Request. I.e. ask for new feature on dashboard github repo suggesting that we have a means to set a ui-groups class dynamically (possibly using ui_control object or the ui-control node)

It would greatly simplify what you are asking for.

[Trying_to_learn]

Sorright.

But as far as I know it is do-able.

It is just as things have developed having open groups is taking way too much screen space and having the collapsed is problematic as if the group updates, I don't know.

So I want the font colour to change is something gets sent to it.

[Trying_to_learn]

Just looking at the code I posted and the Help screen, things don't add up.

code:

<style>
    .group2 p.nr-dashboard-cardtitle {
        color:{{msg.payload}} !important;
    }
</style>

Ok, but in the help screen it shows this:

<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}">
    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </font>
</div>

But the structure does my head in with what they are doing.

[hotNipi]

Here you are.

This does affect only one card "#TEST_group1_cards" selects card if it is in tab TEST and has group name group1

[{"id":"bf67ca0eb24dac61","type":"ui_template","z":"459b55a5baccf138","group":"924a2dc07ecdd1a4","name":"group1","order":7,"width":0,"height":0,"format":"<script>  \n    (function(scope) {   \n    scope.$watch('msg', function(msg) {\n    if (msg) {\n     \n        $(\"#TEST_group1_cards\").closest(\"ui-card-panel\").find(\".nr-dashboard-cardtitle\").css('color',msg.payload);\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"colorChanger","x":460,"y":2660,"wires":[[]],"info":"<style>\r\n.mplug17 p.nr-dashboard-cardtitle {\r\n        color: green !important;\r\n    }\r\n</style>"},{"id":"58d9e91c3691c384","type":"inject","z":"459b55a5baccf138","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":270,"y":2640,"wires":[["bf67ca0eb24dac61"]]},{"id":"43040dbea39ee0d9","type":"inject","z":"459b55a5baccf138","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lime","payloadType":"str","x":270,"y":2680,"wires":[["bf67ca0eb24dac61"]]},{"id":"924a2dc07ecdd1a4","type":"ui_group","name":"group1","tab":"9e1ed5e519ff655f","order":1,"disp":true,"width":"6","collapse":true},{"id":"9e1ed5e519ff655f","type":"ui_tab","name":"TEST","icon":"dashboard","order":39,"disabled":false,"hidden":false}]

[jbudd]

Andrew, the CSS code you posted first:

    .group1 p.nr-dashboard-cardtitle {
        color: {{msg.payload}} !important ;
    }

is almost correct.
If you look at the Inspector utility in your browser you should see something like this (this is from Firefox, other browsers may look a bit different)

The ui-card-panel has id="TEST_group1" (the tab is TEST and the group is group1)
It's an id not a class so your CSS selector should start with # not .
And you need TEST_group1 rather than just group1.

So

    #TEST_group1 p.nr-dashboard-cardtitle {
        color: {{msg.payload}};
    }

You do not in this case need !important.
Nor do you need the javascript function that @hotNipi suggested. I think the {{ ... }} syntax makes it unnecessary.

[Trying_to_learn]

Thanks both.

What I now realise that I sort of forgot to include in the question.

So the application of it to what I am wanting to do:

These tabs will have (usually or mostly) text lists in them showing things that have happened.

So I can see how to apply half the stuff I want to do.

The group is collapsed. The colour is ... green (green, good).
Something happens and there are things displayed (well poor choice of words, but I hope you understand what I mean).
The title turns red (alert) and I am notified there are things needing to be looked at.

I open the group.
Is there a way to detect this happening? Because then I would like the colour to change back to green.
the only way I can think of getting it done is having a button included in/on the tab to reset the colour.

[Trying_to_learn]

Ok, so I need the full name as in: TEST_group1 because the original one was only group1 and that can't work as it is not known which group1.....

So I changed the node to:

<style>
    #TEST_group1 p.nr-dashboard-cardtitle {
        color: {{msg.payload}};
    }
</style>

But sorry that doesn't work.

[jbudd]

Is your tab still called TEST?
Is your group still called group1?
Is the template which contains the CSS styling assigned to a group on the TEST tab?

[Trying_to_learn]

Well I was talking within the scope of this example.

Just because it would seem that I forgot to make the path complete by the prefix of TEST.
Yes, they are still called those names.

[jbudd]

I will post a working example but I have to mend my computer power supply first.

[Trying_to_learn]

Don't worry too much. Not that I am wanting to start a squabble about Who's code is better.

I only brought it up as I kind of get what you mean....

But from memory there is some trick about classes in CSS where you can start with a . in the name if it is local...

I can't find my notes so I am really taxing the memory.

[jbudd]

The CSS definition starts with a dot if it relates to a class.

<div class="Fred">
<p>Hello world</p>
</div>

It starts with a # if it relates to an id

<div id="Mary">
<p>Hello world</p>
</div>

There can only be one div with id Mary on the page, but there can be many div's with class Fred

[Trying_to_learn]

Yeah, I'm still fumbling on the hierarchy of the names/terms.

[hotNipi]

@jbudd

There can only be one div with id Mary on the page

Even if it is documented in the way
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.

... the HTML does not complain. There will be no errors anywhere if there is multiple elements with same id. And the CSS will select them all and applies. There will be mess if you try to manipulate the content of one of those elements using JavaScript. You just cant do it cos they are not unique.

So it is kind of developer responsibility to make sure the uniqueness of the elements is guaranteed.

The CSS selectors are very well documented and it takes just to read carefully why and how the rules apply. And then just practice.

Like this little example:

Guess (without trying out first) what is the output of this little combination of html and css

<div class="rect outer">
    <div class="rect middle">
        <div class="rect inner"></div>
    </div>
</div>

<style>
.rect{
    background:red;
    width:30px;
    height:30px;
}
.inner{
    background:blue;
}
.middle{
    background:orange;
}
.outer .inner{
    background:initial;
}
.middle .inner{
    background:none;
}
.outer .middle{
    background:inherit;
}
.outer .middle .inner{
    background:unset;
}
.outer.middle.inner{
    background:white !important;
}
</style>