How to style unordered list item in CMS Rich text

Design help CMS
1

Hi, how does one edit the styling of the unordered list in the CMS rich text field?

  • I was able to edit all the other stylings in the Rich text field by editing a Rich text field not dynamically synced to the CMS.

  • Collection Page Template / Blog Post Template

** also, there are list items the way I want them to be styled right below the dynamic rich text field in the way I would like them to be styled for reference in the Blog Post Template.

https://preview.webflow.com/preview/a-living-theory?preview=a94ce00d956e347412f774b183f9f4e7

Best,

Nathan

Here is my public share link: LINK
(how to access public share link)

2

Hi @nathanphilsteele this gif may help:

CloudApp

4 Likes
3

I thought I replied yesterday but apparently not…anyway, that was it!

Thank you so much for your help @PixelGeek

Best,

Nathan

1 Like
4

Hi @PixelGeek

I know this was solved but I somehow have a similar problem. Unfortunately this way does not work for rich text elements that are connected to a CMS Collection as I am not able to select the list inside. I would like to exchange the bullets with checkmarks/an image but can find no way to do so. Do you have an idea?

Thanks,
Lisa

5

Hi there! I know I’m not Nelson, but I recently tackled this on my own site. I created another page where I keep a Rich Text element to adjust styles. Give the element the same class name as your CMS Rich Text element and then style away! All of your styles will be mirrored for the CMS version.

As for replacing bullets with an image, I found what appears to be a really useful forum post here: How to replace List Bullets to custom icons (SVG)

6

Hi @parker
Thanks for your quick reply! As mentioned, the usual “replace list bullets to custom icons” as shown in the forum post you shared is not working for lists integrated in rich text fields connected to a CMS rich text field.

But I found a simple solution in the meantime. In the elements panel of my browser I searched for the list class Webflow assigned to this list and did some basic CSS:

.list.kl.w-richtext {
list-style-image: url(‘https://uploads-ssl.webflow.com/5de9f6064b9e5a0f0ea33ece/5e5fba73b41ccd70f7827f97_check_list.png’);
}

That was it! :slight_smile: Thanks anyway for the input!

7

Glad you found a simple solution! I should have mentioned, you need to make sure that you’re styling all lists when nested under your rich text class. The panel looks like this:

Screen Shot 2020-03-04 at 8.39.36 AM

Either way, glad you found something that works for you!

8

Create rich-text-editor add any styles you want (Remember to add class otherwise the changes effect the entire site). Add any styles/color you want - and than only than bind CMS RTE feild (Sometimes i put extra RTE next to the “bind” RTE and make this changes).

The docs about this issue:

Rich text elements can be connected to rich text fields in a Collection. When a RTE is connected, it’s no longer possible to select or edit text elements, except for in the CMS. That’s because the content is pulled from the CMS itself.

To style a connected RTE, it’s recommended to disconnect (unbind) it from the field, style the nested elements, and then re-connect (bind) it. If you just want to apply a class on a connected RTE, you can do that without disconnecting it. Learn more about dynamic rich texts.

Then follow the same article - post2 (I wrote this) - This idea works fine also on CMS RTE

If this not work for you i will update the original post (I am almost sure its fine).

1 Like
9

How do I put lists inside rich text elements? the builder says that i can’t add lists into rich text, so then how do I style it? but when i’m inside the CMS i can put in lists…

example - this blog post as bullets but i can’t edit the styling of them in the rich text element on the designer