CSS Bug after Rename

Hi,

I did the following.

After renaming a class within the selector from “X” to “Z” and publishing the changes. The published site html still includes the old class and thus the layout is broken.

I tried to unpublish and republish the site - without any effect.

Is that a bug?

Cheers, Michael

… the preview within Webflow works perfect. The problem only occur on the published site!

Hey,

after testing I recognized the following (what I think is a) bug:

  • I rename a class on “Page 1” from “X” to “Z”. This class is used on multiple pages (e.g. for background image in hero section).
  • I watch the preview within Webflow and everything looks perfect. The renaming of the class not only worked on the page where I did the “renaming” but - as supposed - all instances of the class had also been renamed.
  • I published the site.
  • When watching the published site the following happens:
    – The “Page 1” (on which I did the renaming) looks perfect and the code contains the correct new css class name (“Z”).
    – BUT: All other pages that include the css class still show the old css class name and thus the layout on all other pages incluing the respective class is broken.

In a nutshell, when I rename a css class and publish the whole project afterwards, the preview within webflow looks perfect but the published site is broken. On the published site only the one page on which I originally did the renaming includes the new class name and on all other sites - that include the respective class - the old class name is still active.

Anyone else faces the same problem?

Cheers,
Michael

Attached pls find the screenshots:

Old class / new class (after rename):

mt_detail_img / hero_test
kontinent / hero_small

In webflow:

Comment: That is not the page on which I renamed the class, but a different page that includes the class as well.

Published page / developer tools:

Page in which i renamed the class (it works!):

Other page that includes the class as well (doesn’t work)

I also have this issue every time I change a class name.

Afeter changing a class name, everything inside the editor looks good. But the element with the changes CSS name is messed up. What I discovered:

For example I have a div block called “Team wrapper”, and I to change it to “Project wrapper”, I get the problems. Now I discovered that you need to “wake up” the object with the new name, and I do that by giving it a padding of 1 pixel for example and republish the site. That way the published CSS recognizes something new and then it’s all good. After publishing I delete the 1 pixel padding and it’s all good.

It’s a strange bug which happens a lot. But never mentioned it here!

1 Like

Hi @rowan,

thanks for your support. Unfortunately it does not work for me.

When I add some padding to the class on a certain page, the solution works for the published version of that exact page, but not for all other instances.

When I have 80 instances of a css class on different pages, it seems that I would have to make the change on every single page to “wake it up again”.

there is a bug with Selector Rename.

Do not rename your class via the selector.

Instead… rename it via the Style Manager.

2 Likes

That’s what I always do. Actually I never noticed the Selector rename function before ha ha!

Renaming via Style Manager does not work as well.

Any ideas how to solve to problem?

Did you exit the project - then reload it ?
or did you make the change - then immediately export the site without a reload.

For me… exiting the class seems to fix the issue.

I’ve seen this similar error happen with class names, page names, and interactions.

If it’s same problem I’ve encountered… I reported this bug several times and created a couple posts about it.

See if they sound familiar or provide any help

pretty much… you rename something… webflow makes the change on that page - but doesn’t do a gobal update - so the change doesn’t exist on the areas of the designer - but the old reference still does. When you export the code… it exports the old reference - not the new reference - and of course - blows up onExec.

or search for class rename

I tried both, but even closing and reopening the project before publishing does not work.

Btw. I published the site on the webflow server (and did not export the code).

check your project css file to see if the class reference even exists.

I’ll bet it doesn’t.

not sure if there would be difference (I would assume not)…
between publishing and exporting other than file location references.

for me… exiting and reloading before export works for me.

Perhaps… it’s time to call additional help @PixelGeek, @callmevlad, @sabanna, @vincent, @bart, @bartekkustra

It exists ;)!

I did the renaming within the selector field on a certain page and on this (and only this one) page the new class is used correctly.

Webflow team, hope you can help! We are going to launch a press release soon and I have to deploy the updated version of our site. Currently the layout is totally broken … :frowning:

that sucks. If it’s there… then potentially - you may have found a different bug :frowning:

@Revolution, @rowan thanks a lot for your support.

It really looks like I found different bug :wink:

What helps to me is unpublishing site and publish it again. Then export code. Did you try that?

Yes, I tried to close and open the project as well as unpublish it and publish it again.

Did not solve the problem … :frowning:

Hey guys, I may not be doing this correctly, but I tried to create a class and then rename it from the selector field but it appears to be working as expected.

Does anyone know what steps I’m missing to reproduce?

Hi @thewonglv,

not it is not exactly the same process, as the page on which I rename the css class works perfectly after publishing. The problem occurs on all other pages that include this css class.

I have sent you a personal msg with the preview link.

Thanks a lot for your support!

Michael