SOLVED: Theme Styles > Links > Text Decoration overrides any ID-level removal of text declaration and does not show in editor but shows in frontend only

Browser: Safari
OS: macOS

I noticed in my client’s site that the Google social icon from font-awesome in Bricks Icon List widget is showing an underline on it, however in the editor it looks perfectly fine with no underline.

On further investigation It turned out the underline is coming from the Theme Styles > Links > Text Decoration as I had it set to decorate with an underscore.

Of course this raises some questions/issues… why does this show an underline in the frontend but not the editor? And why does decorating at the ID level of the Icon List widget to explicitly declare no underline not override the theme style for the element?

It’s coming from this CSS rule from the theme-style CSS:

:where(.brxe-accordion .accordion-content-wrapper) a, :where(.brxe-icon-box .content) a, :where(.brxe-list) a, :where(.brxe-post-content) a:not(.bricks-button), :where(.brxe-posts .dynamic p) a, :where(.brxe-shortcode) a, :where(.brxe-tabs .tab-content) a, :where(.brxe-team-members) .description a, :where(.brxe-testimonials) .testimonial-content-wrapper a, :where(.brxe-text) a, :where(a.brxe-text), :where(.brxe-text-basic) a, :where(a.brxe-text-basic), :where(.brxe-post-comments) .comment-content a {
    color: var(--bricks-color-e93fed);
    font-weight: 500;
    text-decoration: underline;
}

What it shows in the editor :
image

What it shows on the frontend:
image

Something is broken here again between what shows in the editor and what shows in the frontend :frowning: . This may be related to this post that was fixed in 1.8 for reference.

Here are my steps to reproduce:

  1. Set Theme Style > Links > Text Decoration to ‘underline’.
  2. In any page, add the Icon List element, add a few icons (use the Google icon as an example), add a link to the icon, and save the page.
  3. In the editor, notice it does not show any underline. This is wrong (it should show the underline from the theme style).
  4. In the frontend, notice it shows the underline which is expected.
  5. Now try to set Typography > Text Decoration to “none” in the Icon List element which should override any theme styles.
  6. Notice in the frontend after refreshing the page that it still shows the underline despite the ID level explicitly stating it should not be underlined.

Please let me know if you have any questions or if you are able to reproduce the issue with the steps above and I’ll do my best to clarify if I’ve missed anything. Thank you in advance, I hope this can be fixed soon. :crossed_fingers:

Hi Dustin,
Thanks again for your report!

I reproduced the issue and added it to our bug tracker.

Best regards,
timmse

Hi guys,

We’ve fixed this issue in Bricks 1.10 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

Best regards,
M

1 Like