We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Set HTML Props before Init

Home Forums Bug Reports and Feature Requests Set HTML Props before Init

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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?

    #44462

    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

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

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

    #44522

    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

    #44526
    jdhutchinson
    Customer

    No problem, thanks Yuri! :good:

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.