UI-Template - cant change background color of?

Dashboard
1

I am trying to do something very simple but I am hitting the limits of my current ability being only 1 week into Linux, Node-Red, Raspberry Pi's and CSS.

In Node-Red I want to print a number I am reading from a sensor onto an image back ground in the dashboard. Simple right?

I have got the following working

Reading serial sensor data
Extracting the data from the string I need
Performing a calculation
Placing a .jpeg image in the background as a wallpaper
Inserting a dummy group Dummy1 with 0 opacity to space out the second group so the number is centered in my page. To do the last point I wrote in a custom UI_template

#Home_Dummy1 { opacity : 0; }

Which worked ok. Now to my problem.

I have setup a second group called Group1 where I want to display the number in large text of any color of my choosing. I want the text to "float" over the background image, I dont want to see any boxes around or between the number and the background, so I need to make the background color of the Group & the Widget transparent.

I have tried so many different ways to do this - I dont know if it is worth me posting as its obviously wrong.

I have read all the threads I can find on here and on the web, including this one Change background color of group - #10 by hotNipi which is basically my problem but no one actually posted the final solution to the question.

If anyone is able to provide some advice - or even post some sample code - of how to force Node-Red to display some text over a transparent background color from the Dashboard UI_template in the group and widgets that would be great.

Thanks!

2

There is no way to provide fully working solution for customize the dashboard because every dashboard the user can create ends up to be unique. Customizing is something you must do by yourself. The help you can get is for some exact problem you are in, but for now you aren't pointed out any of such.

You are looking for transparency. There is many elements in dashboard hierarchy where background forces some coloring and many of such where background is inherited but overall the style cascades and you will need to follow it step by step, element by element.
This is manual work and if you need to do it differently for every "card" on dashboard, it takes a lot of effort.

So - point out exact problem and share example flow (as small as possible to describe the problem) and let's then try to figure it out.

3

Thanks for your reply, appreciate it alot. I understand that all flows are different.

I am not sure how you would make my flow work on your system without having the sensors connected though, with the http static folder set the same with same image file et etc? Wont it give you a bunch of issues? Im just at work now so can post later if you think that would help, no problem.

I was more thinking if its possible to make an example flow to demonstrate the core concepts, maybe by injecting some random text into a custom UI_template and set color of text to a color different to the template and the backgrounds of widget and group to transparent. Then I can see the code structure & commands and apply to my dash board.

4

You need to play with various css elements eg a ui_template added to the head section like this

<style>
    body.nr-dashboard-theme md-content md-card {
    background-color: rgba(0,0,255,0.1) !important;
}
</style>
5

dceejay, perfect, that worked. Thanks both for your help. Cheers

6

Hello Dceejay, May I know where I can found all content of Dashboard CSS file so I can edit like what you did here? Thank you in advance!