I’m experiencing an issue with the styling of our blog’s hyperlinks. Specifically, I’m unable to make the hyperlinks appear in blue (like standard links) when the text is bold or part of a heading. I would appreciate any guidance on how to rectify this.
To illustrate the issue, consider this blog article on our website: Best Collaborative Learning Tools for 2023 - Teachfloor Blog. The headings in the list numbered 1, 2, 3, etc., are hyperlinks, but since they appear in black, they don’t seem clickable. How can I fix it?
Here’s the problem and how you can fix it in this specific case, with custom code;
<style>
.rich-text h3 a strong {
color: inherit;
}
</style>
However ideally, you wouldn’t need to use custom code, and you can generally minimize problems like this by avoiding/minimizing styles on archetype elements like All Bolds, All Italics, and All Links.
You’re bumping up against a very common problem. Luckily there is a very common, and recommended approach to solving this.
Though, it’s a bit counter-intuitive
With a non-CMS RichText element you can adjust the style how you please through the Webflow Designer. But as you’ve found out, with a CMS bound RT element you cannot.
Recommended Appraoch
Here’s the recommended approach keeping everything within the Webflow Designer.
You create a second RichText element (usually on a new page) that is not bound to the CMS. Many folks will password protect only this “styles” page / folder.
You style it how you like.
You give that RT a class name.
You apply that class name to your CMS bound RT.
Any style changes you make are now reflected in the CMS bound RT.
Here’s how Webflow describes part of the process:
I’ve shared a project that has an example of this:
