Copying and Renaming Classes


I am having problem with renaming a copy of a class. I just want to rename a class but the result is either lose the setting I created for that class or worst, rename the original class which ruins everything.

Does anyone have way out of this problem? Please?


1 Like

What do you mean? You can’t duplicate a class and it’s settings.

Can you provide a share link and a description of which classes you want to rename them as?

here is the problem. I can duplicate this wrapper but I cant rename it without have troubles.

First, if I delete and type a new name for the class, the settings I made to that class will be removed

Second, if I click the rename button, it will change the name of the original class I copied from.

Another thing, the ID is not working. When I tried to Affect the ID for an interaction, it doesn’t show in the dropdown.


If you want to keep the original style, add a second combo class. Then your changes to the new element won’t affect the original class.

So original will be matthew_model_wrapper
and the new element will be matthew_model_wrapper wrapper-two.

I tried that but when I start working on interactions, I don’t see the wrapper-two. Just the same class name

Few things to remember:

  1. Interactions are only targeting global class (the first one)
  2. Interactions does not target unique ids
  3. When you duplicate the object (wrapper) you duplicate also its class. Renaming the class on the second (new) wrapper is affecting not this specific object, but entire class. Best would be to add a combo class (add another class to the first one) to have the same styling but add some modifications to it
  4. If you want to target that object with interactions there is a nifty little trick you could use:

Dat Trick!

Let’s say you want to target 3 different objects with interactions that has same classes.

  1. Add an empty div block somewhere on the canvas
  2. Give it a global class like wrapper-ix-first
  3. Remove the class and add new one wrapper-ix-second
  4. Remove the class and add new one wrapper-ix-third

That way you are creating 3 global classes. You can now remove the empty div.
Now, go to your wrapper and give it a combo class of wrapper-ix-first and do the same for other wrapper, with adding a proper newly-created classes.

That way you will have actually 2 global classes for the wrappers:

  • .matthew_modal_wrapper .wrapper-ix-first
  • .matthew_modal_wrapper .wrapper-ix-second
  • .matthew_modal_wrapper .wrapper-ix-third

You can now target each wrapper by targeting the wrapper-ix-... global class attached.

Let me know if that works for you :)


HI Bart,

I am starting to get. do you mean I will use these wrapper as my base setting and put them into combo class so it applies the setting without needing to change the class of the actual element?

Please let me know if I am wrong.


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