Controlling the font color of headlines with hyperlinks not working the way it used to

[NMWeb]

From memory the way the color in headlines that contain hyperlinks used to work is that the colors would automatically match the Site Links base and interaction colors set in the Typography settings of Pro Theme Options.

At some point recently this has changed. Now I’m observing that the color in headlines that contain hyperlinks is instead controlled by a bizarre combination of the Typography Headings Color setting and the Site Links color settings in Pro Theme Options. Specifically the base color for a headline with hyperlinks is being defined by the Typography Headings Color setting and the interaction color is being defined by the Site Links Base color. Here is an example.

This means that I cannot have hyperlinks in headlines behave identically to hyperlinks in text elements unless I completely bypass the Pro theme settings and use custom CSS on each headline hyperlink.

Is this a bug or is this working as intended by Themeco?

[ruenel]

Hello @NMWeb,

Thanks for writing in!

Yes, you are correct. Any hyperlinked heading will have the same color as any other headings because of the global typography settings in Theme Options > Typography > Headings. The hover color of the hyperlinked heading will then be coming from the site links hover color in Theme Options > Typography > Site Links. This behavior was added intentionally and built into the theme.

Best Regards.

[NMWeb]

You’re saying that it is by design that the hover color of hyperlinked headings comes from the Theme Options > Typography > Site Links > Base color value and not the Interaction Color value? Therefore it is not possible to have the colors of hyperlinks in heading elements match the colors of hyperlinks in text elements without using CSS?

[ruenel]

Hello @NMWeb,

Yes, by design that the hover color of hyperlinked headings comes from the Theme Options > Typography > Site Links > Base color value and not the Interaction Color value. If you want to override the color, you need to add CSS code into > Theme Options > CSS.

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: Interaction Color value here
}

Hope this helps.