Now, the code.
Start style
Name the group
Declare the picture to be shown in the group
End style.
Yeah, I had extra { and } in the posts.
I get these wouldn't be helping.
But I still falter at the widget in group
I know CSS can do more than I know.
But ..... in a prefect world (I know it isn't. I keep breaking it).....
the first two lines are a given if the node is to be used as it is selected: widget in group.
So really shouldn't all I need to put in the text area of the template node be: background-image: url("/Pictures/metal_2.jpg");
if there was more stuff, then the line would end in a , and subsequent lines added.
widget in group inserts HTML content into the group. The HTML can be any valid HTML - it doesn't just insert CSS styles.
If the template contained just the text:
background-image: url("/Pictures/metal_2.jpg");
then you would end up with that text on the dashboard - because it is just that, a piece of text.
If you want the page to know this is intended as a CSS style, then it needs wrapping in a <style> tag and it needs to identify what element on the page the rule is for.
Hence why we have said repeatedly that the template should be:
The <style> tag applies to the whole page. That is just how it works. That is not a Dashboard thing - it is a basic rule of how the style tag works in HTML.
It is perhaps best you had a break from this. I have explained this multiple times. I have run out of ways to try to explain it.
You achieve a single place for all your CSS to live. Easy to find, easy to edit.
And... The head version of the ui_template doesn't add a "group" (doesn't take up a place on your dashboard- ideal for a bunch of styles)
How about this as a golden (best practice) rule...
Put all of your CSS into a single head ui_template & apply styles to the elements you want to affect using id and class selectors
Start there, stick to it.
Once you "get it" it'll be much more manageable and you will be thankful when you don't have to search umpteen nodes to find a bit of styling you need to tweak.
I am putting the code in different nodes for now because I am working on a lot of ..... (what do you call them?) Tabs in node-red.
I hope to get out of this problem soon though.
Left to right:
The first effort for the remote control. Standard button nodes used.
Good points: Icons on some of the buttons.
Bad points: Very square buttons.
The Power and "input select" buttons. If these were on the top of the unit, it would be too tall to fit on the screen.
I also put it there to separate the two remote controls.
Newer Full remote control. These are all made with template nodes.
Good points: very slightly rounded buttons (corners) I think it is 2 now. 8 looks nice too.
Bad points: Can't get icons for buttons working - yet.
No, I haven't added the background yet.
Audio panel.
Mixture of buttons. Holding buttons down keeps increasing/decreasing the volume.
Flashy indication of buttons being held down.
Playback control
Again a mixture of buttons and template nodes.
Navigation.
All done with button nodes.
Where I am at now, is to get the icons (Alas: both FA and MD icons used.) fitting in the buttons so they (the buttons) are the same size/colour as the others.
I meant if I can round the button nodes, I don't need to do all the extra work getting the fa-icons and md-icons on to the template node.
But I want to, though it is going to be painful from what I have seen.
I could cop out and leave things as they are with the fancy buttons with the icons.
Luckily the only two buttons which need the fancy CSS stuff are the Volume up and down buttons.
But the Vol + and Vol - don't look too bad.
The other ones are icons.
For .RCButtons2 will not work because you can't send messages to style declaration.
If you need dynamically change the color, put some default color here, and make it dynamic in the way you did it before, inside that template where button is.