Custom CSS not showing in editor

Community resources Bugs
1

Hey, I’ve added some custom CSS to my project’s custom code panel, to add a clip-path and some other properties on an account-wide header div. I then added the class to a div in the editor, but the CSS doesn’t seem to take effect at all, though it shows correctly on the published website. Not being able to see the custom look of the div makes it nigh impossible to use the editor to create the rest of the things.

I’ve also tried adding the CSS to the page’s custom code area, but similarly this does not show up in the editor, while being correctly inserted into the built, preview website.

2

There are three areas where you can add custom code, and specifically custom CSS code. The one you’re after is the one you haven’t tried yet.

  • The Custom Code fields in the Embed tab of the site’s settings: code is live when the site is published.
  • The Custom Code fields in the Page Settings panel: code is live when the site is published.
    - Inside of a Embed Component, anywhere inside a page: CSS cod added here will be live immediately, results will be seen in the Designer.

Tip: want a CSS code to be active on every page of the site? Place an Embed component inside of the symbol of the navbar and place your code inside. As the navbar symbol most likely resides on all page, so does your code.

Tip2: various experiments with clipping, masking ans shaping http://clipping-masking.webflow.io/

Results of Javascript code can’t be seen in the designer unless you’re injecting it during load.

Oh and welcome to the forum Steph!

3 Likes
3

Thanks, adding the CSS to an embed component is indeed reflected in the editor. It does still seem a bit strange to me that code added to, say, the Page doesn’t, though.

4

Yes and no. As Webflow is a WYSIWYG editor, everything isn’t so simple. The page you build is built inside of an iframe, but the code you add inside of panels is not. I don’t know how it’s possible to live refresh each time that kind of code is changed. On the other end, the Embed code sits within the page itself.

Anyway, I think it’s cool that we have the two possibility: live CSS code or CSS code that’s only fired when the page is published. It gives interesting possibilities.

For example for complex CMS sites I have maintenance and notes texts inside of the pages. It helps me keep track fo what page does what and with what CMS component. Ultimately this code is either removed or hidden. But during dev, I have CSS code to mask it once the site is published on staging. So, here, I’m happy to have delayed CSS code. I’m also using live CSS code a lot: all of my sites have that Embed component in the Navbar symbol.

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.