Fixed CSS Overriding Text Color on Item Page Nav Link Style Property

Amaury

Well-known member
Screenshots are from KH-Flare to show it better (bigger font size and non-hiding pagination), but I was able to reproduce it here on XenForo Community as well by inspecting the elements:

Nav 1.webp

As you can see, I have the text color set to red, the background color set to yellow, and the border color set to lime.

Nav 2.webp

However, as you can then see, only the background and border colors changed. The text color did not change.

Nav 3.webp

It is being overridden by this CSS in the xenforo.css template:

Code:
body .muted, body a.muted, body .muted a { color: @mutedTextColor; }

Nav 4.webp

If I uncheck it in the inspector tool, the text changes to red.

On the default XenForo style, @secondaryDark is used for the text color on Item Page Nav Link, but we see @mutedTextColor for the reasons stated above.
 
I've fixed this now. It has necessitated a specificity increase here for the link related components but that shouldn't be an issue. If you explicitly want the muted text color, you can just remove the color from the
discussionListItemPageNavLink property.
 
Awesome as always! Thank you, Mike!

When all the text colors were the same, it wasn't a problem, but if they were different, such as on a light style (e.g., white text for header and header-type blocks and black / gray text for everywhere else), it was.

I usually leave the text as the default @secondaryDark, but I sometimes change it to @secondaryDarker depending on the style.
 
Last edited:
Back
Top Bottom