Need help figure out why the CMS rich text color is changed

Design help CMS
1

Hi,

I am pulling from the CMS collection of product description field into a page and when the content gets pulled in, the text color is white. I cannot figure out why it is white color? And can’t figure out how I can change the color? Please see my screenshot and the read-only link is below. Any help is greatly appreciated!! Thanks in advance.

Untitled-1
Untitled-12044×1276 266 KB

Here is my public share link: https://preview.webflow.com/preview/noya-collections?utm_source=noya-collections&preview=6df3ab36c3152fdfaa6ec48c5f294159

(how to access public share link)

2

The paragraph in the RT is white because the paragraph <p> element base style is… white.

The first paragraph of the block is dark because it has a class .Paragraph 2 that makes it dark

http://vincent.polenordstudio.fr/snap/m1u59.jpg

If you remove this class, you can see that the paragraph is white too:

http://vincent.polenordstudio.fr/snap/h1au4.jpg

If we select the All paragraphs selector then we see that the text color property is blue, meaning, it’s a property defined for all paragraphs.

http://vincent.polenordstudio.fr/snap/e1ozi.jpg

If we now set a different color for the All paragraphs selector, it will affect both the selected paragraph and the paragraph inside of the RT element.

http://vincent.polenordstudio.fr/snap/k0qbc.jpg

It’s solving your problem BUT we’re not going to do this. The fact that the base paragraph element is styled to white is probably useful on another part of the website, so if we pass it black this way, it will ruin another element on another page, probably. There’s an indication of that when you have the element selected:

http://vincent.polenordstudio.fr/snap/37pox.jpg

So in order to style the paragraph inside of the RT element, without risking to style another paragraph elsewhere, by accident, we need:

  • to make sure the CMS RT element has a class
  • to duplicate the CMS RT element and to disconnect it from CMS (because we can’t style a RT element that’s linked to CMS, yet)
  • to select the paragraph inside of the now non-CMS RT element (which contains dummy text)
  • to use the selector field to select the element we want to style then to limit it top the class applied to the RT
  • finally, to style the paragraph element. this style will impact all paragraph in all RT with the same class. At this time, you can see the paragraph inside of the CMS RT change color along.

In video:

http://vincent.polenordstudio.fr/snap/xowa5.mp4

3

Wow, thank you so much for the amazing detailed explanation! I had started out designing this site with a dark background in mind and therefore I applied white text color for the All Paragraph tag. After I changed the concept to white background, I had forgotten that about the white text color for the All Paragraph tag. The first solution works like a charm!! Again thank you for your help!! :slight_smile:

1 Like
4

I just fixed my last link that was supposed to be a video.

5

Cool that the first solution works, but ùake sure you understand how to style a CMS RT and how to limit styling to the class of a RT… kind of useful :wink:

Nice site btw.

1 Like
6

Thank you!
:slight_smile: