# The colour in/on this isn't changing. (CSS)
**URL:** https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639
**Category:** Dashboard
**Created:** [10 March 2022 08:11 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639 "2022-03-10T08:11:09Z")
**Posts on this page:** 9
**Page:** 2
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [10 March 2022 21:54 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/21 "2022-03-10T21:54:50Z")
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?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [10 March 2022 21:59 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/22 "2022-03-10T21:59:01Z")
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`
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [10 March 2022 22:01 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/23 "2022-03-10T22:01:40Z")
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. 😉
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [10 March 2022 22:08 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/24 "2022-03-10T22:08:29Z")
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.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [10 March 2022 22:09 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/25 "2022-03-10T22:09:20Z")
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
```auto
[
{
"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": "",
"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
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [10 March 2022 22:13 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/26 "2022-03-10T22:13:58Z")
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. 😉
Thanks for the help.
(And to you @jbudd )
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [10 March 2022 22:22 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/27 "2022-03-10T22:22:17Z")
> [@hotNipi](#):
>
> There will be mess if you try to manipulate the content of one of those elements using JavaScript.
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.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [10 March 2022 22:29 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/28 "2022-03-10T22:29:45Z")
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. 🙂
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [24 March 2022 22:30 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/29 "2022-03-24T22:30:14Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
[Previous page](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639.md?page=1)