# Tabs, groups and help with CSS structure

**URL:** <https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178>\
**Category:** Dashboard\
**Created:** [20 April 2020 08:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178 "2020-04-20T08:39:11Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 April 2020 09:20 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/21 "2020-04-21T09:20:30Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 09:22 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/22 "2020-04-21T09:22:13Z")

</div>

Just quickly:  
[Where I am getting all this stuff](https://www.w3schools.com/Css/css_howto.asp)

> 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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 09:22 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/23 "2020-04-21T09:22:36Z")

</div>

> [@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...

 ![ZZYM6dFXkS](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/408594b25025d8de9ddf92133aec0d8fa60ca0cf.gif)

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)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 09:34 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/24 "2020-04-21T09:34:48Z")

</div>

So this works:

 ![Screenshot from 2020-04-21 19-33-45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed39f8af61b13d257bb130ec073a93da701bf6e5.png)

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 April 2020 09:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/25 "2020-04-21T09:39:28Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 09:41 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/26 "2020-04-21T09:41:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 April 2020 09:51 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/27 "2020-04-21T09:51:45Z")

</div>

> [@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:

```auto
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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 10:01 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/28 "2020-04-21T10:01:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 10:02 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/29 "2020-04-21T10:02:27Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 10:04 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/30 "2020-04-21T10:04:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 12:28 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/31 "2020-04-21T12:28:08Z")

</div>

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.

 ![Screenshot from 2020-04-21 22-19-24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c68e727436ba1d685c1f02fc86d20995e1262ed1.png)

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [21 April 2020 12:34 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/32 "2020-04-21T12:34:09Z")

</div>

> [@Trying\_to\_learn](#):
>
> Bad points: Very square buttons.

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

```auto
.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)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 12:38 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/33 "2020-04-21T12:38:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 12:42 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/34 "2020-04-21T12:42:18Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 12:46 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/35 "2020-04-21T12:46:02Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 12:46 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/36 "2020-04-21T12:46:19Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 12:48 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/37 "2020-04-21T12:48:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 12:54 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/38 "2020-04-21T12:54:02Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 12:58 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/39 "2020-04-21T12:58:57Z")

</div>

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:

```auto
<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:

```auto
<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:

 ![Screenshot from 2020-04-21 23-03-27](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/7631d221f430de7888e2cb24d131a293020256f3.png)

(Thought)

This is the code:

```auto
[{"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.....

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [21 April 2020 13:06 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/40 "2020-04-21T13:06:22Z")

</div>

> [@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.

[Previous page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=1)

[Next page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=3)