Web page still has a problem with formatting

[Trying_to_learn]

Ok, this is an ongoing problem.

See picture for what it looks like with no picture:

Adding this node:

[{"id":"c233402f.b6f82","type":"ui_template","z":"381d953d.4cf092","group":"145609.3ad979f8","name":"Picture","order":1,"width":0,"height":0,"format":"<style>\n    body {\n        background-image: url(\"/Pictures/Levers_Switches.jpg\");\n        background-size: cover;\n    }\n    #Master_Control_Buttons {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Master_Control_Load {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":530,"y":60,"wires":[[]]},{"id":"145609.3ad979f8","type":"ui_group","z":"","name":"Index","tab":"3776e46e.a7d894","order":1,"disp":false,"width":"3","collapse":false},{"id":"3776e46e.a7d894","type":"ui_tab","z":"","name":"Master Control","icon":"dashboard","order":5}]

The display changes to this:

Any ideas?

[dceejay]

??? So you add a template that adds a background image, and you end up with an image in the background. Why is that a problem ?

[Trying_to_learn]

See pictures - again.

Just look at the extra stuff I now added.

The two possible nodes causing the problem

[{"id":"c233402f.b6f82","type":"ui_template","z":"381d953d.4cf092","group":"145609.3ad979f8","name":"Picture","order":1,"width":0,"height":0,"format":"<style>\n    body {\n        background-image: url(\"/Pictures/Levers_Switches.jpg\");\n        background-size: cover;\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":530,"y":60,"wires":[[]]},{"id":"f63b37c5.0fd758","type":"ui_template","z":"381d953d.4cf092","group":"145609.3ad979f8","name":"Text formatting","order":2,"width":0,"height":0,"format":"    <style>\n    .nr-dashboard-cardtitle {\n        text-align:center;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":710,"y":60,"wires":[[]]},{"id":"145609.3ad979f8","type":"ui_group","z":"","name":"Index","tab":"3776e46e.a7d894","order":1,"disp":false,"width":"3","collapse":false},{"id":"3776e46e.a7d894","type":"ui_tab","z":"","name":"Master Control","icon":"dashboard","order":5}]

[Colin]

Roll back to your previous working version then add the new bits in one at a time till you find the problem. You do save your flows each time you get to a good state don't you?

[dceejay]

How are you creating that status group ?

[Trying_to_learn]

I usually back them up before major changes.

This came on one day for no real reason.

Best of my knowledge I didn't do anything to that page.

I maybe updated the dashboard or some node.

[Trying_to_learn]

@dceejay

How are you creating that status group ?

Best of my knowledge I went to the right side and added a new group to the "Master Control" thingy.

It is actually called index and the title isn't shown.
Each line is a text box.
See attached.

[Trying_to_learn]

(Not wanting to edit the post only to keep linearity)

Those two nodes used to work nicely and the size of that group lined up with the rest of the page.

One day I loaded it and it doesn't any more.

Deleting the node with the picture definition in it, the problem goes away.

[dceejay]

Can you try setting the scope of just that template to be "in head section" and not on page ?

[Trying_to_learn]

Sorry Colin, I don't understand.

[dceejay]

try added to site head section instead ... see if that helps... (it may not... just grasping at straws)

[Trying_to_learn]

Colin:

Appreciated.
You are the man!

Seems to have worked.

[dceejay]

Dceejay not Colin.. but hey.

[Trying_to_learn]

Greatest appologies.

Name overload.