# 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:** 1

<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:** [20 April 2020 08:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/1 "2020-04-20T08:39:11Z")

</div>

With my recent journey into `CSS` I am wanting to ask and get clarification on the hierarchical structure.

When _designing_ a dashboard I create a `tab` then to a `group`.

So, I want to understand the relationship between the `groups` and `tabs`.

If I have a `tab` called (sorry) "Tab1" with 3 `groups` called (again: sorry) "Group1", "Group2", and "Group3".

I set/define some `CSS` stuff on "Tab1" it will cascade down to the 3 tabs.

Then if I define some `CSS` stuff in "Group2", it won't be applicable to the other two groups, or anything in the tab.

Going to the next step, with two `tabs`, they are separate to each other with `CSS` - correct?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [20 April 2020 11:12 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/2 "2020-04-20T11:12:11Z")

</div>

> [@Trying\_to\_learn](#):
>
> I set/define some `CSS` stuff on "Tab1" it will cascade down to the 3 tabs.

Is that what you meant to say?

---

<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:** [20 April 2020 20:32 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/3 "2020-04-20T20:32:56Z")

</div>

Actually: No.

Tabs are on the same level of the tree.

I think what I should have asked is:

If I set/define some `CSS' on "TAB", will it cascade down to the "GROUPS" below it?

As: at the start you create a TAB then put GROUPS under it to add dashboard items.

## While here, I want to check something else out about names:

When you first design a _dashboard_ you add a `tab` then in the `tab` you add `groups`.

So, using the `template` node to set a background image:

 ![Screenshot from 2020-04-21 08-07-48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/caae698afc452958317632067b3fe3b8e552a892.png)

Code:

```auto
<style>
    .nr-dashboard-cardtitle {
        text-align:center;
    }
    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
}
</style>

```

So there is no _group_ name here. That is declared below.

It says `widget in group`  
Then the group is called [IR\_Remote\_Controler] TV(1)

I get this on the GUI side of things:

 ![Screenshot from 2020-04-21 08-07-57](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a81b2370d715e2abeedf22f732e0d1d2683dc1b.png)

That is the background of the `tab`.  
Yes, I know how to get it on the _group_. But there seems to be discontinuity between what the things say and what is done.

![Screenshot from 2020-04-21 08-09-28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3ccd605a234bc15364ca80224761d43d1e635c7.png)

If I add a line:

```auto
#TV(1){
*Picture name here*
}

```

It will put a picture on/in "TV(1)"s background.

I get it.  
But then the node should be saying:  
TAB where it says `Group`

I'm confused more and more as I am learning CSS and how to do things with _groups_ and where the areas of _ownership_ are. (Or hierarchy? / structure?)

Someone - please.

---

<div class="post-metadata">

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

</div>

> `#TV(1)`{}

note that this is not a valid css id name.

If you define css in the template node on a group, it is scoped to the template only (=group), ie: it will not cascade - not applied to other elements that exist outside the group.

Instead, use a template node and set the `template type` to `<add to head section>`, this is where you define the styles. You dont have to connect it to anywhere it is for the styles only (and/or additional javascript).

---

<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 06:34 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/5 "2020-04-21T06:34:11Z")

</div>

Yeah, I found that out the harder way.

That _group_ (tab?) and renamed it `TV-1`

Still, it doesn't help me with my confusion (and question) about what the GUI was showing me and what happens.

**tabs** are the highest level, and **groups** are in/on/under the **tab**.

So in the `template` node why did it put the `metal4.jpg` tiled over the background ( **tab** ) area if the node says: **Widget in group**?

Yes, I know there is another _template type_ which is for the **tab** level.  
So really I was using the node in the wrong way.

Having said that, ..... why did it do what it did?

---

<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 07:10 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/6 "2020-04-21T07:10:12Z")

</div>

It will be easier if you can identify "your stuff" from "default stuff" cos for css there is a lot of "stuff".  
To do so, make your adjustments also easy to find with browser dev tools

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d4bbc966cda9682f1a8dcea3e0ad4b03efe2627.png)

And now you can find it easily.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/48ee6c5e838ef0adc1eac2c4c963e1fca64b3e9a.png)

If you do it always like this, it will be easy to identify if there is any style tags without id. Or with id which does not make sense for you but for example got from some example and forgot to delete or something like that. Or duplicates ??

Just a little trick to keep things more under your control.

PS.  
Don't use wording `my_`. but put something really yours in 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 07:33 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/7 "2020-04-21T07:33:55Z")

</div>

I either didn't think of using the `<style id="my_name">` as you said.

I think (agian: Ill advised for me) we are at different pages of the same story.

I'll start again because I think things got messy too quickly and my mistakes with names didn't help.

This is the _start_:

 ![Screenshot from 2020-04-21 17-16-13](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d8ddb7de3f171c8e89cfd5563e6651335a480104.png)

I am in **tab** TEST, and there are 3 **groups**  
1 - HOME  
2 - Group2  
3 - Group3

I add a `template` node.

 ![Screenshot from 2020-04-21 17-24-12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/564d41a7cfdacfd83e410ae35f5877c714b9c115.png)

Code:

```auto
<style>
    .nr-dashboard-cardtitle {
        text-align:center;
    }
    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
}
</style>

```

This is what I see:

 ![Screenshot from 2020-04-21 17-25-13](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1aac684a9333116a55029b532358779fc23e9699.png)

This is what is getting me:  
1 - It says **Widget in group**  
2 - Just below that it asks me the **Group** name. Home.

Yet, it is applied to the entire section.  
I think that is the **other** option in the drop down menu.

Changing the `template` node _mode_ to the other one, (and changing the picture name for clarity) I get this:

 ![Screenshot from 2020-04-21 17-31-05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/53af72149b6352ecb3645d3efdd5d32a6184f523.png)

Which I get because it says:

 ![Screenshot from 2020-04-21 17-32-09](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a29eb8a971961f1c320f3cc35903c4bfac74261b.png)

Though I am (now) confused because it doesn't have the name of the **tab**.  
But I am going to stop here.

---

<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 07:59 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/8 "2020-04-21T07:59:18Z")

</div>

With CSS, it doesn't matter where on the page you add the `<style>` tag. The styles you define apply to the entire page.

You are defining a style for the `body` html tag. So that applies to the `<body>` tag.

If you want to define the style of a group, then the CSS selector you use needs to identify the group you want the style to apply to. Each group gets its own HTML id property you can use to identify it in the CSS.

Looking at your page, I _think_ the id of the group you want to target is `TEST_Home`. So your CSS would be:

```auto
#TEST_Home {
   background-image: ....
}

```

(using the `#` prefix because we are using the HTML id to identify the target of the CSS style)

---

<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 08:16 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/9 "2020-04-21T08:16:51Z")

</div>

Sorry, but....

> [@knolleary](#):
>
> With CSS, it doesn't matter where on the page you add the `<style>` tag. The styles you define apply to the entire page.

Page.....  
In Node-Red when _designing_ the dashboard the starting point is by creating a **tab**  
When a tab is created, then a **group** must be made before anything can be added to the dashboard.

So where does **page** fit into this structure?  
I'm asking not to be cheeky. I don't know the relationship of the terms.

~~On a side question: If I have two \*\*tabs\*\*, .....~~

> [@knolleary](#):
>
> You are defining a style for the `body` html tag. So that applies to the `<body>` tag.

Again: Sorry, but where is **body** in relationship to **tab** and **group**? (And **page**?)  
EDITED: Ok, so `<body>` is talking in `CSS` terms.  
`<body> blah blah blah </body>` Ok. I **think** I get it.

> [@knolleary](#):
>
> If you want to define the style of a group, then the CSS selector you use needs to identify the group you want the style to apply to.

I kind of get that.

And I thought I asked that.

In the `template` node I have selected it with `widget in group`.  
I name the group and deploy.

The style isn't applied to that group. It is applied to the rest of the screen.  
That is not congruent to what I am reading. Or what I am seeing.

Let's maybe take baby steps.

> [@knolleary](#):
>
> Looking at your page, I _think_ the id of the group you want to target is `TEST_Home`

Yes, but look at what the node settings are:

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/564d41a7cfdacfd83e410ae35f5877c714b9c115.png) ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/564d41a7cfdacfd83e410ae35f5877c714b9c115.png)

The HOME group is named.

But it (the pattern/picture) is applied to the higher level name.....

`TEST` if I am not mistaken.

Can you help me to this point then I can ask the next part.  
Again, not to be a pain. I want to learn. But it just doesn't seem to hold any standard of what is written/said and what I am seeing happen.

---

<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 08:40 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/10 "2020-04-21T08:40:14Z")

</div>

> [@Trying\_to\_learn](#):
>
> Yes, but look at what the node settings are:

I have looked at the settings.

The group is called `Home` (not `HOME` as you have written).  
The tab is called `TEST`.

That means the dashboard will assign the HTML element that represents that group an id of `Home_TEST`. That is a fact. There is no _but_.

The 'template type' setting is a complete distraction from what you are trying to do. It determines where in the page the content of the template is put. As I said in my reply, **it doesn't matter where the `<style>` block is put - its content always applies to the entire HTML document**.

---

<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 08:42 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/11 "2020-04-21T08:42:58Z")

</div>

> [@Trying\_to\_learn](#):
>
> The HOME group is named.
> 
> But it (the pattern/picture) is applied to the higher level name.....
> 
> `TEST` if I am not mistaken.
> 
> Can you help me to this point then I can ask the next part.  
> Again, not to be a pain. I want to learn. But it just doesn't seem to hold any standard of what is written/said and what I am seeing happen.

Andrew. The you will get there once you understand the rules.

See if this helps....

1. CSS `<style>...<\style>` wherever it is placed, will affect the whole page - (forget about groups and tabs, these are just made up sections of the page to simplify dashboard creation for users.)
2. There is only 1 `body` section in s web page.
3. Setting any style to `body{...}` applies to the whole document
4. If you create a `<style>...<\style>` in each template, each setting the same selector & style(e.g body background) only one of them will apply. To make things more manageable, put all CSS styles in a single head template (and give it an ID)
5. Make use of classes as much as possible. Use online styles as little as possible.

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.

---

<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 08:44 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/12 "2020-04-21T08:44:48Z")

</div>

> [@knolleary](#):
>
> As I said in my reply, **it doesn't matter where the `<style>` block is put - its content always applies to the entire HTML document**.

So what is the purpose of having the two _modes_ in the `template` node **if** I select the group but it isn't applied to the group, but requires the name to be typed?

Ok, I mucked up the typing of the name HOME vs Home. Yes, I get that things are case sensitive.

But I am showing you screen shots of the names offered to me and I use/select/choose them yet they aren't _used_.

---

<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 08:56 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/13 "2020-04-21T08:56:19Z")

</div>

> [@Trying\_to\_learn](#):
>
> So what is the purpose of having the two _modes_ in the `template` node **if** I select the group but it isn't applied to the group, but requires the name to be typed?

There are two different scenarios:

1. You want to use the `ui_template` node to add a custom content into a group. In this case, you'd want the content of the template to be added to the group so you can see it. This is the `widget in group` option.

2. In some cases, you may want to insert some HTML into the `<head>` of the page and _not_ have it add any visible content to a group on the page. This is where you would pick the `Added to site <head> section option`. This can be used, for example, to add a `<style>` block.

---

<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 08:57 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/14 "2020-04-21T08:57:39Z")

</div>

> [@Steve-Mcl](#):
>
> See if this helps....
> 
> 1. CSS `<style>...<\style>` wherever it is placed, will affect the whole page - (forget about groups and tabs, these are just made up sections of the page to simplify dashboard creation for users.)
> 2. There is only 1 `body` section in s web page.
> 3. Setting any style to `body{...}` applies to the whole document
> 4. If you create a `<style>...<\style>` in each template, each setting the same selector (e.g body) only one of them will apply. To make things more manageable, put all CSS styles in a single head template (and give it an ID)

Thanks @Steve-Mcl.

I am more confused. Sorry.

I can have many "pages" (screens on the display) and they all have different backgrounds.  
So somewhere there is a _split_ between the pages.  
Unless ...... Na, I don't think I am smart enough to really understand that.

What I know about CSS is little/nothing. I get that.  
But I am guessing that in Node-Red for what I am doing `CSS` is either `internal` or `inline`.

> [@Steve-Mcl](#):
>
> (forget about groups and tabs, these are just made up sections of the page to simplify dashboard creation for users.)

I strongly suggest their names are changed to better reflect what they are then.

I'm stretching the imagination here, but:

Paragraph (`CSS` lingo/talk) equates to a `group` in Node-red.  
Page (`CSS` lingo/talk) equates to a `tab` in Node-red.

I'm not sure.

But introducing new terms for things isn't helping. To me calling something by two different names depending on which _language_ you are talking isn't helping.

If there is a good reason, I'm open to hear it. But please understand/remember how dumb I am.

Because I don't understand the relationship between these things isn't helping me.

> [@Steve-Mcl](#):
>
> Setting any style to `body{...}` applies to the whole document

So, if I want to set the property of a paragraph, I need to enter:

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

```

and no `body{ ....}` at all.

Ok.

I think I had better stop as I see I have more to read from Nic'.

---

<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:01 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/15 "2020-04-21T09:01:54Z")

</div>

> [@Trying\_to\_learn](#):
>
> I strongly suggest their names are changed to better reflect what they are then.
> 
> I'm stretching the imagination here, but:
> 
> Paragraph ( `CSS` lingo/talk) equates to a `group` in Node-red.  
> Page ( `CSS` lingo/talk) equates to a `tab` in Node-red.

If you introduce new terms for things you are only going to get yourself more confused because no-one else here uses those terms.

> [@Trying\_to\_learn](#):
>
> So, if I want to set the property of a paragraph, I need to enter:
> 
> ```auto
> <style> id=example
> #TEST_Home{
> background-image: url("/Pictures/metal_2.jpg");
> }
> </style>
> 
> ```

Almost - the first line should be:

```auto
<style id="example">

```

---

<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:02 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/16 "2020-04-21T09:02:46Z")

</div>

> [@Trying\_to\_learn](#):
>
> So, if I want to set the property of a paragraph, I need to enter:
> 
> ```auto
> <style> id=example
> #TEST_Home{
> background-image: url("/Pictures/metal_2.jpg");
> }
> </style>
> 
> ```
> 
> and no `body{ ....}` at all.

Correct. (However paragraph is incorrect terminology - but I'll let that slide) and the ID is incorrectly placed.

---

<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:04 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/17 "2020-04-21T09:04:12Z")

</div>

> [@knolleary](#):
>
> - You want to use the `ui_template` node to add a custom content into a group. In this case, you'd want the content of the template to be added to the group so you can see it. This is the `widget in group` option.
> - In some cases, you may want to insert some HTML into the `<head>` of the page and _not_ have it add any visible content to a group on the page. This is where you would pick the `Added to site <head> section option` . This can be used, for example, to add a `<style>` block.

I agree. Fully. Now.

But I think there is still a disconnect with what the node does in the mode where it is `widget in group`.

It isn't.

You (the programmer) has to define the name in the code.  
Even though you select the group.  
So that isn't doing what is says.  
Option 1 in your example.

I get the other one where it is used at the _top level_  
Option 2 in your example.

---

<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:07 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/18 "2020-04-21T09:07:53Z")

</div>

> [@Steve-Mcl](#):
>
> (However paragraph is incorrect terminology

Yes, I accept that.

I am using the terms from where I am in learning CSS. They use a `page`, `header` and `paragraph` as the different sections of a ....... what ever you want to call it.

> [@Steve-Mcl](#):
>
> and the ID is incorrectly placed.

Yeah, Nick picked me up on that.

---

<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:09 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/19 "2020-04-21T09:09:26Z")

</div>

> [@Trying\_to\_learn](#):
>
> You (the programmer) has to define the name in the code.  
> Even though you select the group.  
> So that isn't doing what is says.  
> Option 1 in your example.

No.

`widget in group` is the right name because it is physically inserting its content into a group on the tab.

The fact you have a `<style>` block in your template just means it will place that HTML into that group. But it doesn't change the fundamental rules of CSS.

---

<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:15 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/20 "2020-04-21T09:15:48Z")

</div>

> [@knolleary](#):
>
> `widget in group` is the right name because it is physically inserting its content into a group on the tab.
> 
> The fact you have a `<style>` block in your template just means it will place that HTML into that group. But it doesn't change the fundamental rules of CSS.

So, (back to picture)

 ![Screenshot from 2020-04-21 19-10-22](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5624bfdb274cc11301de69aac6ef61a0fe7f1d9.png)

Code:

```auto
<style>
    .nr-dashboard-cardtitle {
        text-align:center;
    }
    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
    #TEST_Home{
        background-image: url("/Pictures/metal_2.jpg");
    }
}
</style>

```

The `<style>` needs to be removed and it will work with:

```auto
    .nr-dashboard-cardtitle {
        text-align:center;
    }
        background-image: url("/Pictures/metal_2.jpg");
    }
}

```

(I'll try anyway)  
(I can't break it any more than it is)

Ok, it didn't work.

Is what I just did helping to explain where I am confused?

I'll dig out my notes about the types of CSS again.

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