Tabs, groups and help with CSS structure

[knolleary]

If you want to apply a style to the Home group on the TEST tab, then you would use:

<style>
    #TEST_Home{
        background-image: url("/Pictures/metal_2.jpg");
    }
</style>

Just take extra care to make sure the { and } are properly balanced as you have extra brackets in both of the copy/pasted examples you've shared here and that will break things.

[Trying_to_learn]

Just quickly:
Where I am getting all this stuff

Internal styles are defined within the element, inside the section of an HTML page:

Inline styles are defined within the "style" attribute of the relevant element:

I think I got confused between <style> and "style"

That may have been complicating/confusing me.

Possible?

[Steve-Mcl]

@Steve-Mcl

Lastly, I can't stress enough...
use Devtools to find the IDs & selector of stuff. Use the pointer to select the thing on your page you want to style, then look up the tree of elements until you find the highest point of interest.

I'll post a demo of this later to aid your understanding.

Andrew, get used to devtools, it can help you understand what all these groups and tabs are turned into & what ID is applied etc.

What i do

• open devtools on the page of interest
• use the & click something inside the group
• browse up the elements to the top most item
• copy its ID

no way of making a spelling error or capitalisation error.

Here is the demo...

There is soooo much more too

• like testing your proposed CSS changes in the source - too see what affect it has before you add it to your flow
• copying the selector of an item that has no ID
• seeing what value a property has

But for now start small - get used to finding the element of interest and its place in the HTML (its parent elements etc)

[Trying_to_learn]

So this works:

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.

[knolleary]

@Trying_to_learn

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.

No.

If that was the case we would have said so.

[Trying_to_learn]

So sorry, what is achieved with the widget in group over the other one if you have to enter/type the path to the group you want to edit anyway?

[knolleary]

@Trying_to_learn

what is achieved with the widget in group over the other one if you have to enter/type the path to the group you want to edit anyway?

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:

<style>
    #TEST_Home{
        background-image: url("/Pictures/metal_2.jpg");
    }
</style>

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.

[Trying_to_learn]

Thanks.

I was confused. Now it is clearer.

The confusion was my fault, I get it. It is just so sad it took this long for me to get it.

Thanks.

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

That way I understood it.

So thanks for that.

[Steve-Mcl]

@Trying_to_learn

So sorry, what is achieved with the widget in group over the other one if you have to enter/type the path to the group you want to edit anyway

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.

[Trying_to_learn]

I am trying to do just what you said.

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.

Alas there are just a few bumps I am hitting.

[Trying_to_learn]

Just to share the progress.

Here's a screen shot of the work.

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.

That is tomorrow's task.

But just to show what I have done so far.

[hotNipi]

@Trying_to_learn

Bad points: Very square buttons.

Just add to your custom site head css (and choose the value you like)

.md-button{
     border-radius:10px;
 }
.nr-dashboard-template {
     border-radius:10px;
 }

nr-dashboard-template is added to html elements where you create your custom template things (buttons in your case)

[Trying_to_learn]

Oh, yeah, I have done that. I was just playing with the value.
I think you got the comments mixed up.
(Or did I?)

The button buttons are very square.

The template ones aren't as.

I didn't know I could round the corners of button nodes.

That'll throw a whole new scope on how I do things. Though it would be good to get one thing for buttons.

So, sorry: Can I make the button corners round with that code you posted?

[Steve-Mcl]

@Trying_to_learn

The button buttons are very square.

The template ones aren't as

@Trying_to_learn

I didn't know I could round the corners of button nodes

If you understand how CSS works you'll know the answer. (I.e. keep up the online html CSS tutorials you are doing )

How can I put this....

• HTML is styled by CSS
• The dashboard is HTML
• The buttons (dashboard and template type) are all html
• Everything on the dashboard is HTML.

So yes , all buttons can be styled, not just the ones in template.

[Steve-Mcl]

@Trying_to_learn

That'll throw a whole new scope on how I do things. Though it would be good to get one thing for buttons

No it won't.

Just put all your styles in one head template.

[Trying_to_learn]

@Steve-Mcl

So yes , all buttons can be styled, not just the ones in template.

Sorry.... Not the ones in `template`?

I am styling them.

Oh "......not just...." sorry.

[Trying_to_learn]

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.

[Steve-Mcl]

@Trying_to_learn

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

Just remember

• HTML is styled by CSS
• The dashboard is HTML
• The buttons (dashboard and template type) are all html
• Everything on the dashboard is HTML.

So yes is the answer to pretty much every question.

Its just a case of getting the right selector. To do that effectively, correctly and easily, use Devtools.

Wherever you can, use a .class selector for styling multiple items at once.

Where you need individual styling, use #ID selector.

[Trying_to_learn]

Well, while I have you, and not to be dismissive of what you just said.

I haven't done all the buttons. But I think I have the structure with CSS correct.

So this is my settings node code:

<style>
/*  Best so far to fit 1x1 area  */
.md-button{
     border-radius:10px;
 }
.nr-dashboard-template {
     border-radius:10px;
 }
.RCButtons1 {
  border: none;
  border-radius: 10px;
  text-align: center;
  background-color: black;               /*  Backfound colour */
/*  color: {{msg.colour}};  */              /*  "Font" (forground) colour */
  color: white;
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px;
  cursor: pointer;
}
.RCButtons2 {
  border: none;
  border-radius: 2px;
  text-align: center;
  background-color: black;              /*  Backfound colour */
  color: {{msg.colour}};                /*  "Font" (forground) colour */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px;
  cursor: pointer;
}
</style>

(Sorry, pressed save too quickly)

So, you can see that in one of the two declarations color was set to {{msg.colour}} and in the other it is set to white.

Probably not the best way to do it, but that's what I was shown.

The one which allows colour change is/are the volume button/s. They blink/flash when held down.

Anyway, just to help me find the buttons I haven't completed, I thought I would do this:

<style>
/*  Best so far to fit 1x1 area  */
.md-button{
     border-radius:10px;
 }
.nr-dashboard-template {
     border-radius:10px;
 }
.RCButtons1 {
  border: none;
  border-radius: 10px;
  text-align: center;
  background-color: {{msg.background}};
/*  background-color: black;  */            /*  Backfound colour */
/*  color: {{msg.colour}};  */              /*  "Font" (forground) colour */
  color: white;
(stuff deleted)
}
(stuff deleted)
</style>

So I can inject a different colour to highlight the ones I have done.

But it doesn't work.

When I apply that and inject a payload with msg.background set to a colour name, it all does wonky.
Buttons stop working.
Wrong format.

Like this:

(Thought)

This is the code:

[{"id":"21191afd.99f226","type":"inject","z":"1781e581.31721a","name":"Black","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":1220,"wires":[["5c513db0.78a6fc"]]},{"id":"5c513db0.78a6fc","type":"change","z":"1781e581.31721a","name":"black","rules":[{"t":"set","p":"background","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1220,"wires":[["b11b2dfa.681818"]]},{"id":"b11b2dfa.681818","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"","order":32,"width":0,"height":0,"format":"<style>\n/*  Best so far to fit 1x1 area  */\n.md-button{\n     border-radius:10px;\n }\n.nr-dashboard-template {\n     border-radius:10px;\n }\n.RCButtons1 {\n  border: none;\n  border-radius: 10px;\n  text-align: center;\n  background-color: {{msg.background}};\n/*  background-color: black;  */            /*  Backfound colour */\n/*  color: {{msg.colour}};  */              /*  \"Font\" (forground) colour */\n  color: white;\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 14px;\n  margin: 0px 0px;\n  cursor: pointer;\n}\n.RCButtons2 {\n  border: none;\n  border-radius: 2px;\n  text-align: center;\n  background-color: black;              /*  Backfound colour */\n  color: {{msg.colour}};                /*  \"Font\" (forground) colour */\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 14px;\n  margin: 0px 0px;\n  cursor: pointer;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":1330,"wires":[[]]},{"id":"27cb89b3.b6c186","type":"change","z":"1781e581.31721a","name":"blue","rules":[{"t":"set","p":"background","pt":"msg","to":"blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1260,"wires":[["b11b2dfa.681818"]]},{"id":"38b6a619.3c422a","type":"inject","z":"1781e581.31721a","name":"Blue","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":1260,"wires":[["27cb89b3.b6c186"]]},{"id":"eabe7d43.b23f48","type":"ui_group","z":"","name":"Full_Remote2","tab":"b128eb09.9f681","order":3,"disp":false,"width":"3","collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"HDMI_TV_control","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

I am hoping I didn't fall for a silly mistake. But I have to ask.

I'll check myself too, but.....

[hotNipi]

@Trying_to_learn

color: {{msg.colour}};

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.