Hi, I just started experimenting with Webflow, and I am now stuck wondering what the best way is for setting global styles - ones that cannot be done directly in the design editor (e.g. using calc(100vh - 100px) for html element heights). I thought about adding a style tag inside the head tag in project settings, but the styles embedded there do not appear in the design editor or in the preview mode, which makes the whole development process a little harder since you cannot see the styles being applied to elements.
What is the best approach in this kind of situation? I would appreciate any advice or suggestions!
Usually you have a symbol on all your pages: the navbar, and/or the footer.
I personaly place a custom code component inside of this symbol, so it’s:
effective on all pages
CSS effects are visible within the Designer, as the code is already in the page and interpreted.
I calculate all my hero sections height like this, with CSS Calc, like 100vh-60px. And I have a series of other things that I want to automate. I also place CSS needed for dark modes or stuff like this. I’ll also put inside of this custom code box SVG <symbol> and <defs> declarations.
I regularly try to bring the topic of having a third custom code area at page level, one that will do just that: being interpreted in the Designer. And a 4th one that will be interpreted in the designer AND applied on all pages.
But the solution used so far is quite cool. I place my Custom code box just below the body, on every site, so it’s like a reflex to find and use it
Hi Vincent.
Could you please clarify how you create this custom code component and how do you assign new CSS style to it. I need to add styles to format table rows, cells, etc. globally. What’s the best way to do that?
