Tabs, groups and help with CSS structure

image

See 3 style tags without ID?
Open them (click on arrow). If they are long, just open first and show me. We need to know what they are doing here.

Do you perhaps have other CSS styles somewhere in your flows interfering with the styles @hotNipi is asking you to try?

Probably.

Which is why I am not liking CSS at this stage.

Though it is global, when you have a problem, it is a real problem working out what is going on.

I may have to disable all the other tabs ITMT.

(All)

I have disabled all other tabs.

Same.

Shall restart node-red and see what happens.

Na. No change.

:frowning:

These are all your CSS customizing templates you have somewhere to do some styling.
So two ways - even to analyse all of them and search what affects or turn them temporary inactive and leave only what we are currently working on. Any way you'll need to find all 3 of those.

Yes, I $tuffed things up.

As said, I have disabled all other tabs.

I have also:
Restarted Node-red.

No change.

Now opening in a private window to see if that changes anything.

Na. Window still corrupt.

Andrew, this is why I said...

Easy. Step by step.
Now as you have disabled, let see that head part again

Yes, I agree. But I think you are not appreciating how messed up things are with me just now.

I am way over my head with this CSS stuff.

(Fish riding a push bike)

Given its overwhelming coverage it does not allow people like me to try things.

If I do, and move to another task, I have to delete all the other stuff.

That it can't be localised to that sheet (tab / what ever) is really off putting for me because of the afore mentioned problem.

Again though I shall state:

I have disabled all other tabs. Only this tab is active.

I have since restarted node-red.

SAME PROBLEM.

And trying to drive this devtools is again another bike this fish is learning to ride.
I am not familiar with it. It is very much stab in the dark. Though I sort of get it, I am slow at finding the things for which I am asked.

Please. Keep concentrated and do what I asked.
We going to fix that "multiple css adjustments" problem later.

I am having trouble finding that part - again.

Hang on.
(sorry this is a bit of a wasted post)

You realise you can put all your CSS in one head template & still test stuff right?

Just comment parts out

  • highlight the old stuff, press `ctrl+/
  • enter new test stuff

e.g.


<!-- disabled for now - doesnt work well (delete later)
<style id="cssV1">
 .some-class{
    width: 95%
  }
</style>
-->

<!-- new trial CSS -->
<style id="cssV2">
 .some-class{
    width: 100%  
  }
</style>

This?

I'll leave you two guys to it.

Andrew, trust us, stick with this - you'll get it.

2 Likes

Yes but open the head section

Thanks Steve.

I do appreciate it.

I know there is no way on Earth I will understand it without help.

I just hope I can understand what is told/shown to me.

Sorry... See... I am hanging on only just.

This:

Just in case I missed the important part.

I'm guessing this is what you want to see:

Good. Now we know, that everything is under our control.
Let's go deeper.

Right click on one of buttons and select -> inspect element
image

Selected element should be <button class (you know, our button)

image

I need to see what is in styles when the button is selected that way

I hope this is what you want:

This is the red button.