SOLVED: CSS links styling is too invasive

Bricks Version: 1.4RC2

Hi,

Links style is applied to any link inside .brxe-post-content (generated by post content element).
This is a bit too much, since .brxe-post-content can target any content built with Bricks.

IMHO, links style should only be applied to TEXT links.

Limiting the scope to .brxe-post-content[data-source="editor"] (WP post editor content) might be a good start to fix this, but I guess it could also interfere with Gutenberg…
Targetting text links is never easy :wink:

1 Like

Hi Yan,
Thanks a lot for your report!

As long as you use the default text-decoration, it isn’t a bug. This way, only the text is addressed. Yes, I know, there are several other methods (1 | 2) like in your case border-bottom and indeed, every method has advantages and disadvantages, no question.

However, it gets relatively complicated if you want to cover every conceivable styling method and every conceivable link (as you say yourself). Furthermore, it takes a lot of time and testing to ensure that every link is displayed as it should be… no offense, but I think the time is better spent elsewhere.

Thesis: the average user will be happy with the text-decoration:underline method, and if not, you can leave the theme styles out and use custom CSS to style your links where and how you want.

Best regards,
timmse

1 Like

Well for me it’s not a question of HOW I set the style (underline, border…), but IF the style should be applied at all to all kinds of links.

Whatever the styling method, I have the same issue (text color, underline, border) with all div/container links on all my pages now that they all use a page content template which si rendered inside a .brxe-post-content container:

I’m pretty sure link styling should be applied on text elements ONLY and not on div or container, for which underline makes no sense, for instance.

The links target is actually very complete and would cover most of text links WITHOUT adding .brxe-post-content a selector:

.brxe-accordion .accordion-content-wrapper a, .brxe-icon-box .content-wrapper a, .brxe-list a, .brxe-post-content a, .brxe-posts .dynamic p a, .brxe-shortcode a, .brxe-tabs .tab-content a, .brxe-team-members .description a, .brxe-testimonials .testimonial-content-wrapper a, .brxe-text a, a.brxe-text, .brxe-text-basic a, a.brxe-text-basic

Now, to allow WP content link styling (classic editor or Gutenberg), I would put .brxe-post-content[data-source="editor"] in the list.
Or maybe add a theme style option to style WP post content links, which would add it?

:warning: Another important drawback is that the styling is not visible in the builder when editing a page, because in this case content is not nested inside .brxe-post-content.

:warning: I would also add that since this rule doesn’t apply to header and footer, it is not consistent for all Bricks content, and thus should be removed.

:warning: Finally, the rule is impossible to override with something like color: inherit; text-decoration: inherit because it would erase the styling of all links and this is not wanted.

@timmse @thomas , bump!

Please, this needs attention, this is A MAJOR issue, all links inside a post content element get “style-corrupted” by this (see screenshot above).

This is true for some Gutenberg blocks as well, when using the WP post content.
For instance, here the button gets the underline and text color properties:

I tested removing the rule in includes\theme-styles\controls\links.php and it works much better.

(Added ‘p a’ selector to affect actual WP text links, but this could be improved of course.)

image

1 Like

Might be good to email this if it’s urgent

BUMP AGAIN @timmse @thomas

Sorry to insist but IMHO this is a critical flaw in design and not a question of how I style my links.

This section on homepage, which doesn’t use a template, so not nested inside .brxe-post-content, is OK:

In same section on pages using a template, thus nested inside .brxe-post-content, everything is BROKEN because color and text-decoration are wrongly applied to text and buttons:

I can’t understand why noone else complains about this.
Is it that specific? Just using link styling (color and underline) and page templates.

Links are the spine of every website, they need more attention, please.
I also gave you a fix that works (deeply tested in the last weeks), it should at least be considered.

And this is not to the user to manually unstyle everything inside a template.

2 Likes

@yankiara I will change the .brxe-post-content a selector to .brxe-post-content a:not(.bricks-button) in 1.5, to exclude any Button elements inside the “Post Content” from receiving the link styling.

I wouldn’t recommend using a selector like p a as this only styles links inside paragraphs. But not links inside other HTML tags like li, etc.

There is also a dedicated filter in Bricks named bricks/link_css_selectors that let’s you overwrite the link style selectors in your child theme like this: Filter: bricks/link_css_selectors – Bricks Academy

2 Likes

Hi @thomas @timmse , how do I use the filters to exclude from the link selector / add additional .not()?
I have a plugin that I’m using and I have limited control and their icons are set as links which in turn is getting included in the Links CSS. Want to set an exclude for the div class for that particular plugin.

I’ve tried doing it as a global CSS but the Theme Style seems to override it.
Thanks

Hey @valiant ,
Can you show me a concrete example? A link would be the easiest :slight_smile:

Hi @timmse , thanks for getting back to me. I actually raised it as a bug and Thomas helped me out here:

Thanks!

1 Like