Community forum for knowledge and support

Updated 4 weeks ago

Pasting buttons from relume to webflow

Hey guys, I did a quick search, but didn't find a solution to this... When I paste from Relume to Webflow, inside webflow, the buttons aren't coming across correctly. For example, see screenshot. I don't mind applying different classes/editing, but I hoped to avoid doing this with the templates.

Any suggestions?

Attachment
image.png
M
M
23 comments

Perhaps it's related... but I also see this error message in multiple places (directly after pasting it in), not just about color.

Attachment
image.png

Finally, I also notice that interactions don't seem to copy either.

@Matthew Hardesty Would you mind sending a read-only link?

@Matt Sure, you mean like a preview link to the page? Or something with read-only access inside webflow?

I just copied another section at the end of the page. You can see the button with the right chevron is not styled correctly

@Matthew Hardesty yeah several issues going on here actually. I'll try to get you up to speed on the specific issues, but you'll likely want to spend some time with our getting started videos and browsing some of our other resources.

So first thing's first, looks like this is an existing webflow project that you are trying to bring Relume components into because it does not have the style guide in it. You'll want to clone this style guide, and then open it up and grab the style guide page, and paste that into your project.

You can follow that process as well as several other tips you'll need to follow in order to be successful with using Relume components in an existing Webflow project.
https://www.relume.io/resources/docs/updating-existing-projects

Secondly, it appears you may not have our chrome extension installed which prevents duplicate classes. You'll want to follow this guide on how to fix those duplicate classes you have, as well as how to prevent them in the future.
https://www.relume.io/resources/docs/how-to-fix-and-prevent-class-duplication-in-webflow

And lastly, here is the link to the getting started videos mentioned above:
https://www.relume.io/resources/series-videos/introduction-getting-started

Hope that helps - happy to answer any other questions you might have along the way here.

Pretty sure I have the style guide (I have the untitled ui library on relume that I've been copying in with no problem β€” the issue is with the non-untitled-ui components). Do those use a separate style guide?

yeah I just found that, and yeah thats not the same

I do have the chrome extension installed, but it hasn't worked to date to avoid class collisions

ah actually it should be fine, so its likely the duplicate classes but also you'll still need to follow the first guide I sent

okay good to know

all helpful information, i should have asked more questions

How can I make sure importing this new style guide won't create conflicts with

  • Updates I made to the style guide I already copied in (tweaks to brand colors, hover states, etc...)
  • Copying items from the untitled UI (in relume library)

Hmm yeah, I guess I can do a quick test. Biggest issue I see is that the untitled UI has completely different button classes, which wouldn't be a problem if the classes were syncing properly. So if we fixed that first, then see what happens, then we might not need to bring in that style guide.

I have not seen or heard of any issues with class sync in several months now and I know we haven't made any changes to it in as long or longer.

Can you try the troubleshooting tips at the bottom of that second guide I sent?
https://www.relume.io/resources/docs/how-to-fix-and-prevent-class-duplication-in-webflow#troubleshooting-tips

but also the components we created versus what untitled UI has created are structured completely differently - so when you paste in one of our components with a button, it'll have extra classes that technically would be unnecessary to have with this untitled UI library since by default all buttons in this library have icons.

also in order for class sync to ever work again, regardless of anything, you'll have to clean up the existing duplicate classes, 100%.
https://www.relume.io/resources/docs/how-to-fix-and-prevent-class-duplication-in-webflow#how-to-manually-fix-duplicated-classes

This will take hours to days to do. I guess it has to be done

I'm not seeing anything that would take hours or days to do unless I'm missing something - the quick search I did, I only saw a handful of duplicate classes. if you follow the guide I sent, I show you a quick way to resolve duplicate classes.

Add a reply
Sign up and join the conversation on Slack