How to apply text style in rich text cms field imported via api

Design help Custom code
1

Can someone help me write a custom code (javascript?) to change the attributes of a class inside a rich text field in a cms item. The text itself has been imported through the Webflow api from an external source. The incoming text is formatted in html but some attributes makes the text justified and sets Arial as font. These settings disrupt the design of my page where I want the font set on the rich text class (Muli font) and text should be left aligned.

Who can help me?

Here is my site Read-Only: https://preview.webflow.com/preview/eliceratest?utm_medium=preview_link&utm_source=designer&utm_content=eliceratest&preview=0cb8a97dfb8b57f557dd337d58f0f849&pageId=6062ef7055f29657da2d665f&itemId=606305c03088bf50c089346c&mode=preview

2

Hi @catino You do not need JS to do that you can just use CSS with pointers as eg.w-richtext p etc. to add your styling, BUT first clean up code mess in your page template settings.

Script should be in before body tag. I do not know why you have uncommented styles but even that your comment-out have wrong syntax and it may cause problems. After use standard CSS to style your elements.

3

Thank you very much for your reply.
I’ve now cleaned up inside head and instead added a few lines to body. I’ve tried to style the ul li elements through the div class .rich-text.pr.w-richtext. It doesn’t work. I guess I haven’t fully understood how to style the classes in the custom code. How do I properly call on the correct class?

I am writing it like this:
<style> div.rich-text.pr.w-richtext ul li {text-align: left;} </style>

4

hi @catino that’s not correct. Did you tried I have wrote?
eg.

.w-richtext p{
  color: red;
}
5

Thanks.
Yes I tried that now. Within <style>. Correct? Doesn’t seem to pick it up on the live site though. Any suggestions?
Thanks in advance.

6

hi @catino here is your CSS code

<style>
.rich-text ul li,
.rich-text ul li span{
	font-family: Muli;
    text-align: left !important;
}
</style>

You can change selector .rich-text to .w-richtext I didn’t check which one have higher specificity

7

@Stan Wow that made it! Thanks so much, saved me many hours… :slight_smile:

1 Like