Background-color in HEAD

[watwat]

I am trying to achieve setting a custom background-color in the dashboard for a while now without success. I am using the UI-template with the following code:

<style>
    body.nr-dashboard-theme {
        background-color: green !important;
    }
</style>

Though, this works fine setting the UI-template node to a specific group but not in the HEAD-section.
Having the setting for groups makes it messy when having multiple flows/tabs which make a need of multiple UI-template nodes. For example if you choose to hide the group you lose the background-color for the overall dashboard.

I have tried multiple style elements, including body and * without success.
Appreciate all help!

[achrafb]

You can customize the backgrounds for all your dashboard sections from the Theme section

Achraf B.

[watwat]

Thanks for the reply.
Yes I know that option but in my case I am using a color picker that the dashboard user can use, that sends a color to the UI-template node to change the background and that doesn't work then.

[hotNipi]

Simple dynamic solution may be something like this

[{"id":"8fcc0dce.22a22","type":"ui_colour_picker","z":"407e1abc.6d1cb4","name":"","label":"site background color","group":"cc466763.adda38","format":"hex","outformat":"string","showSwatch":true,"showPicker":false,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"false","order":3,"width":0,"height":0,"passthru":true,"topic":"topic","topicType":"msg","x":320,"y":480,"wires":[["c5a9e624.da9638"]]},{"id":"c5a9e624.da9638","type":"ui_template","z":"407e1abc.6d1cb4","group":"cc466763.adda38","name":"body background color","order":4,"width":0,"height":0,"format":"<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      console.log(msg.payload)\n      $(\"#nr-dashboard\").css(\"background\",\"#\"+msg.payload);\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":540,"y":480,"wires":[[]]},{"id":"cc466763.adda38","type":"ui_group","name":"Default","tab":"826dc63e.367f48","order":1,"disp":true,"width":"6","collapse":false},{"id":"826dc63e.367f48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[watwat]

Yeah that is a alternative solution but already used.
I want it to be used in the head section and not the group section. As if you hide the group or swap to another flow the background-color disappears, something I do not want.

[hotNipi]

Oh I see. That will be challenge cos, you can not have ready made dashboard nodes inside top-bar. So you need to implement your own color picker (if you need it to be like "pick the color") and then use its output to choose the color for background which will be easiest part.

There is many threads about having clock or button or logo on top-bar. Search them to examine the base of that approach

[watwat]

With head section I mean that it applies to all content/tabs and not only the group.

[hotNipi]

There is no problems with running JavaScript in document head.
Just, you have to implement the content in the way it can do the thing.
The script runs before you have the DOM ready so you'll need to check when you can build/reach and manipulate elements.
You don't have scope, you don't have messages, you need to figure out how to store and read the choice (variables, defaults) ....

Handcraft is fun (and can be expensive)