Tabs, groups and help with CSS structure

[Trying_to_learn]

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?

[Colin]

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

[Trying_to_learn]

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:

Code:

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

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.

If I add a line:

#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.

[bakman2]

#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).

[Trying_to_learn]

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?

[hotNipi]

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

And now you can find it easily.

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.

[Trying_to_learn]

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:

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

I add a template node.

Code:

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

This is what I see:

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:

Which I get because it says:

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

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

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:

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

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

[Trying_to_learn]

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:

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.

[knolleary]

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

[Steve-Mcl]

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

[Trying_to_learn]

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

[knolleary]

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

[Trying_to_learn]

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

<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'.

[knolleary]

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

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

Almost - the first line should be:

<style id="example">

[Steve-Mcl]

@Trying_to_learn

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

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

[Trying_to_learn]

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

[Trying_to_learn]

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

[knolleary]

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

[Trying_to_learn]

@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)

Code:

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

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