Icon link styling conflict with Cornerstone on CPTs

[thisisbbc]

Hello guys,

This issue was arleady discussed in the thread below but I’d like to expand on it as I’ve come across another related problem and you might want to take a note:

Icon link styling conflict with Pro on posts

This time, this is happening on the single-page for a CPT we’ve created using Toolset.

We have a Global Block that renders the breadcrumbs. The links in the breadcrumbs are hijacked by this rule:

.format-standard .entry-content a:not(.x-btn):not(.meta-comments) {
    color: #E66923;
}

I went ahead in .../themes/pro/framework/functions/frontend/generated-css/icon.php to try and find that line but to my surprise there wasn’t any like previously with the dotted bottom border.

I would like to apply the fix by replacing the selector with .format-standard .entry-content a:hover:not([class]), could you indicate where I can find the code above to be replaced?

Thank you!

[friech]

Hi @thisisbbc,

Thank you for writing in, as Alex said from the other thread

@alexander

We’re going to be working from scratch and making a new base level styling options that are un-opinionated as possible, then allow granular customization. I don’t have specifics on how this will work but our strategy will somewhat naturally remove conflicts like what you encountered in this support ticket.

@thisisbbc

The links in the breadcrumbs are hijacked by this rule:

That does not make sense because the Breadcrumbs element has a specific rule/selector, unlike a naked link. I can’t view the posts that you shared so I can’t confirm what is causing your Breadcrumb issue. I don’t see breadcrumb on other posts either. Please confirm.

This selector .format-standard .entry-content a:hover:not([class]) will not work on Breadcrumbs because breadcrumb has a class (e.g. x-crumbs and the element-id class).

@thisisbbc

I went ahead in …/themes/pro/framework/functions/frontend/generated-css/icon.php to try and find that line but to my surprise there wasn’t any like previously with the dotted bottom border.

Overwriting a theme file directly on the parent theme is not recommend, add your custom CSS instead on the Theme Options > CSS that is the right way of overwriting a default theme CSS.

Work on your CSS selector so you can target an element specifically.

CSS Selectors
CSS Specificity

Cheers!

[thisisbbc]

Hey Friech,

A little bit of confusion here

.format-standard .entry-content a:not(.x-btn):not(.meta-comments)

This selector will affect ALL links EXCEPT if they have the “x-btn” or “meta-comments” class. The breadcrumbs do have a specific rule/selector, but since the breadcrumbs links do not have either of the classes above, the auto-generated-css kicks in.

.format-standard .entry-content a:hover:not([class])

This selector will affect ALL links EXCEPT if they have ANY class. The breadcrumbs do have a class so they would be ignored. I want to replace the CSS rule that colorize our breadcrumb links (:not(.x-btn):not(.meta-comments)) with our rule that will only affect naked links (:not([class])).

I totally agree with you, nobody should have to edit parent theme files. Unfortunately this rule cannot be easily override via the Theme Options because it’s too broad, I had spent quite some time trying to find all sort of solution in the ticket I linked in my first message. I invite you to check the back-and-forth to understand why.

Could you tell me where to find this rule in the auto-generated css Icon file because I can’t find it?

Thank you!

PS: Check the link in the secure note, the Glosary CPT should load now. Breadcrumbs are on top of the page.

[ruenel]

Hello @thisisbbc,

In the custom css you have added this:

.format-standard .entry-content a:not(.x-btn):not(.meta-comments) {
    color:#E66923;
}

.format-standard .entry-content a:hover:not(.x-btn):not(.x-img-thumbnail){
    color:#f29c24;
    opacity:1;
}

The code has been added as a custom css and not an auto generated code.

This has affected all the links inside the content area. This code not needed. If you want to have a site link and link hover color, you must set it in X > Theme Options > Typography > Site Links. Having that settings, it will not override whatever color you set for your breadcrumbs.

If were not able to find it, please provide us access to your site so that we can check your settings and custom css.

Best Regards.

[thisisbbc]

Hey @RueNel,

Gosh I feel stupid, this rule has been sitting here for a very long time and totally slipped through my radar.

My apologies for that, our links are indeed configured as you indicated so this rule is totally pointless.

Thanks for the assistance.

Have a great day ahead!

All best,
B

[nabeel]

Glad we could help.

Cheers!