Set HTML Props before Init

This topic has 5 replies, 2 voices, and was last updated 3 years, 3 months ago by jdhutchinson.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2021-09-09 at 2:07 pm #44460

jdhutchinson
Customer

Hi,

I wonder if this might be possible with custom code. With webflow, once you have quite a few elements, it can become a little cumbersome I feel to hide and show things, such as pop up modals, preloaders, and similar, while developing. It can be many button presses, and then by accident you leave a certain element turned off so you could see behind it, then when you export, it’s wrong. You go back and repeat. I think it’s a big drain on time and slows things down.

Whilst I can set the HTML display props via puzzles, or manually, for some simple ones, I’d really like to be able to set some initial display: props which I know won’t be changing, and I don’t have to worry before I export code from webflow that I don’t have the right combination for startup. Currently, there is a ‘flash’ of original content if you use puzzles to change the display prop in the init tab. So, could it do some of this stuff just before the app starts running?

2021-09-09 at 2:26 pm #44462

Yuri Kovelenov
Staff

jdhutchinson wrote:

So, could it do some of this stuff just before the app starts running?

Yes, in fact you can use CSS to hide an HTML element before JavaScript kicks in.

It looks like Weblow allows adding custom CSS
https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags

You might use the CSS property visibility which you should set to hidden.

Chief 3D Verger | LinkedIn | Twitter

2021-09-09 at 2:56 pm #44466

jdhutchinson
Customer

Hi Yuri, thank you, that sounds like good thinking. It sounds like you’ve understood what I mean. If I have a help modal tucked away in webflow, I have to display none my preloader, display flex my modal, change the text, then the same again in reverse.

You see what I mean regarding the puzzles method kicking in just slightly too late, meaning that you’ll see what’s behind the curtain for a moment.

2021-09-10 at 10:38 am #44506

jdhutchinson
Customer

Hmm. Sadly I didn’t get it to work with a HTML embed on the top of the webflow stack. Maybe that CSS needs to go in the header code part instead? I think that might also have the benefit of the settings not being shown until export of the zip too, which is desirable.

Tried the style tag with overrides I wanted in the header, still kicks in too late sadly. essentially this is an exercise in trying to create an override, because as mentioned above it can become really tedious to edit the webflow layout and all the content underneath/above and the preloader and export the correct display ‘state’ for export.

And puzzles ideally needs just the single html document to refer to… so it’s not like I can just create some extra webflow pages. Or can I?

Would love some recommendations.

2021-09-11 at 4:31 am #44522

Yuri Kovelenov
Staff

A possible reason for your custom CSS not applying is that it gets overridden by Weblow’s CSS. I guess that custom CSS should go afterwards.

Puzzles cannot help here unfortunately, because it is basically JavaScript which is loaded and executed after the HTML page is shown.

Chief 3D Verger | LinkedIn | Twitter

2021-09-11 at 10:47 am #44526

jdhutchinson
Customer

No problem, thanks Yuri!

I’m defining custom CSS in webflow in the HTML embed. I’ll add some screenshots to try and explain. It just means that the development becomes a bit clunky!
Author

Posts