I have created CMS pages for Help Center articles on my website. When I do this, it asks me to add custom fields such as Topic, Summary, and Article. When I publish and go to the design page, the content gets pulled over and the article appears in all black. Unfortunately, I can’t seem to find a way to edit the color of the headers.
I saw a couple of solutions online about adding custom CSS. Can anyone tell me what the code would be and where I could add it in order to change the headings to be a different color from the body of the article?
Hi Cloe. To clarify, you’re using Rich Text in your CMS and you’re looking for a way to style the headers inside of the Rich Text that’s being pulled from your CMS?
I see you already have a Style Guide page, which is great. You can actually style elements inside Rich Text elements just like anything else. When you do, Webflow applies a “nest selector” to the element – for example, “style all H3s this way, but only if nested inside of [class name of Rich Text Element]”
So, just create a new Rich Text element in your style guide and give it a class name.
Add whatever headings you’d like to style inside it. Click the heading you want to style and choose ‘All Hx Headings’ in your class selector.
You’ll see that we now have a nest selector – it is styling “All H1 Headings” as we choose but only inside my newly created RichTextForCMS class.
Then, you can just style as normal and apply the new RTE class to the RTE element in your collection list.
Thank you! When I went to the style guide and click on the “H3” text to turn it purple, it ended up turning all of the text purple on my whole site. I reset it and now everything is back to black. I can’t tell if within the Rich Text Block if Web Flow recognizes that there is an H3 header.
Yes, this is correct! So, in your screenshot (and in mine above) you’ll see the class selector, just click that and choose “All H3 Headings”, and you’ll then be styling all H3 headings inside any rich text element with that class applied.
Thank you! So, if I publish now it should change only H3’s color inside rich text? Somehow when I did it before it changed the color of all of the text.
It looks good to me. I think before you may have either had the body or the entire rich text element selected. It’s honestly a bit tricky to select elements inside rich text, I’ve done the same thing before.
