Hello!
In TSF 5.0.2, we increased the specificity of the CSS to resolve a widespread issue. This, in turn, requires theme developers to be even more specific, such as annotating the wrapper block such as .site-header
, or even the entire body (but that is not recommended):
.site-header nav.tsf-breadcrumb ol li:not(:last-child)::after {
margin-inline-start: 0.5ch;
margin-inline-end: 0.5ch;
}
Alternatively, you can use a PHP filter. To mitigate a crash if the selector disappears or changes, we forgo using array_push()
and write directly to the variable instead.
To prevent repeating the selector, I created a pointer. This pointer causes anything we write to the $sep_css
pointer variable to be written to the primary $css
variable’s separator index.
add_filter(
'the_seo_framework_breadcrumb_shortcode_css',
function ( $css, $class ) {
// Create a pointer so we do not have to write the long selector repeatedly.
$sep_css = &$css[ "nav.$class ol li:not(:last-child)::after" ];
$sep_css[] = 'margin-inline-end:.5ch';
$sep_css[] = 'margin-inline-start:.5ch';
return $css;
},
10,
2,
);
I hope this helps! Have a lovely day 🙂