Conversion between the old and new design panel

[Webjack357]

Hi,

I just noticed some kind bugs about the new design panel after installing 1.8.2 update:

It look like all the design settings of my web pages (borders, text colors, spacing etc.) are not recognized anymore in the design panel…

For example, I have some background images on a page but the link to image is not showing anymore in the design panel, and if I try to change the image from there (background image folder icon) it have effect, the actual image still there.

Same thing for elements that have borders or color setting: Not showing in design panel and if trying to modify from there it does not work, it keep the actual border settings.

I have Windows 10 in my PC.

[Teodor]

Hello @Webjack357,
I have a question about what is not recognized. Are you referring to styles, previously applied to the elements using the Design Panel?

[Webjack357]

Exactly Teodor, all css styles previously applied to all elements using the Design Panel are not recognized. And I can’t apply new styles to any element as is have no effect.
But The styled element do show ok in preview.

For example here is a element with dashed red color border but it doesn’t reflect in design panel:

An other one: This container have a background image but not linked anymore in design panel:

And if I try to change that image it does nor work either.

On the other hand I created a new page and everything work fine with styling in the design panel.

[Teodor]

Yes that’s because the Design Panel used inline styling until now (as it is work in progress/experimental feature). Now that’s changed to styles placed in styles tags in the page head.
We are going to add a feature that converts the inline styles to the new styles in the head tags of your page in the next update, so all the current styles will be recognized.

[nshkrsh]

If you can join in on the discussion here, it would be helpful.

1.8.2 Design Panel - working strategy

Hi, Continuing the discussion from Wappler 1.8.2 Released: Properties set by design panel are now added as a style tag in HEAD section. Hence, the existing styles are not showing up in the Design panel, as @Webjack357 has reported. Is this a good code design in terms of page load times/speed? Also, this is creating overlapping CSS - one in in-line style via Styles Panel and one in page-level style via Design Panel. Here’s what I suggest: Instead of making style tag in HEAD, user could be pr…

[Webjack357]

Ok I get it, while not sure I understand why inline css are managed that way now, but I am not the expert…

Thank very much for your for your reply Teodor.

[Teodor]

Please read my last post:

We are going to add a feature that converts the inline styles to the new styles in the head tags of your page in the next update, so all the current styles will be recognized.

[Webjack357]

Ok so this will apply to the previously styled element? That’s cool then