NO BUG: Can't remove theme styles embedded in pasted HTML

Browser: Chrome 110
OS: macOS

I’m using the new paste HTML feature in Bricks 2.3.5.

When I paste certain content, it seems to include theme styles. Specifically, I am getting styles like this one with brxe-text-link that is messing with some of my buttons. w-button was a class on the original HTML I copied.

.w-button.brxe-text-link {
  display: inline-block;
  padding-top: 9px;
  padding-right: 15px;
  padding-bottom: 9px;
  padding-left: 15px;
  background-color: #3898ec;
  color: white;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
}

Here are some interesting parts about the situation:

  • When I research brxe-text-link, I see many people talking about theme styles. As shown in the screenshot, I do not seem to have any theme styles active.

  • These styles seem to be attached to the inserted/pasted elements. The issue only affects a template if I paste HTML in it. Other templates, even though they have elements with .w-button.brxe-text-link classes. It is like these pasted elements cause new classes to be added to bricks-frontend-inline-inline-css for that template.

  • If I copy one of the pasted elements with the embedded styles and paste it into a different template where things are working fine, then the embedded styles come with it and other elements on the page are suddenly broken.

Thanks in advance for your help. The feature is working great apart from this little snag.

Hi,
Thanks so much for your report!

I think the following is happening:

You’re inserting HTML that contains a link with the class .w-button. When imported, this link is interpreted as a text-link element. Additionally, you have class chaining enabled in the Bricks settings, which causes the original element class .brxe-text-link to be appended to your custom class, so that it gets a higher level of specificity than a single class.

However, you can disable this so that only your custom class remains in the styles:

Bricks » Settings » Performance

Let me know if that solves your issue. If not, please provide us with the HTML you’re pasting, and a screencast showing every step in detail, so we can replicate it, if necessary.

Best regards,
timmse

1 Like

Thank you so much! ‘Disable class chaining’ definitely solved my issue. I really appreciate your help.

Just to confirm for other users. You stated:

You’re inserting HTML that contains a link with the class .w-button.

Correct. My HTML looked like this:

<a href="#" class="button is-alternate white-background w-button">Today</a>
1 Like