Formatting bullets in Rich Text CMS Block

Hello community - forgive me if this is repeat post, but I’m having trouble finding accurate info on how to style the unordered bullet list when using a rich text block in my CMS projects.

Can someone point me to a solution? I am assuming at this moment there might be some CSS I can put into my custom code area which would work but if someone has some tried and true code they could refer me to I’d appreciate it.

If there is an existing solution for this kindly let me know! Thanks kindly, -Kevin

hi @kevin_keiper when you search use “custom RTE list style” or similar keyword in search input on top right (magnifier) and go trough all results to find you are looking for. here is an example:

Keep in mind that you need to give some class name to RTE be able to save these changes. more info on WFU about RTE.

Thanks Stan but when I follow your link resource the firs thing I see is that other people are having the same problem and have not solved it. do you have a solution you can recommend?

hi @kevin_keiper what part of solution in post you do not understand?

This response is for a version of webflow which is many years old. since they have updated their UI these older ‘solutions’ do not work…

Also, take a look at the very example you provided. The very first post is to the effect of “this does not work with bullets in a rich text block in a CMS…” this remains my problem

hi @kevin_keiper did you try that? this is I have done now by following these instructions changing bullets, font color … . Only what changed is how you bind to RTE, now it is via purple dot on top left corner. :man_shrugging:

this video shows how to use images for list-style in RTE :man_shrugging:

Thanks @Stan but in your screenshot example I am missing the ‘purple dot’ you mention? I do not see it… there is no way to ‘unbind’ the item from the CMS source… i do see you were able to style one of your red bullets with a greater indent, how are you specifically getting to your solution? Im happy to try anything :)

@Stan Also the video you attached is about making custom bullets, I do not want to make custom bullets, i only want to adjust the spacing on the CMS rich text block bullets…

If you’re only trying to adjust spacing ( left of the bullet, between the bullet and the text, or between each line of the list ), you just use the designer to set the list item’s left margin, left padding, or bottom margin respectively.

Do this on an unbound rich text block with a custom class, as “All List Items” when nested inside of your custom classed rich text block. Then bind it to the CMS after.

hi @kevin_keiper it will be for you very helpful to read Webflow documentation. also this forum is rich for solutions or responses that will answer majority of your questions.

Anyway, to adjust spacing of ul or ol can be done with custom code like in following example


<style>
ul, ol {
  padding-left: 20px;
}
</style>

where, why and how to implement custom code is well described on this forum or in WF docs.

unbinding example

@Stan hey thanks for your recent clarity i figured it out! :) I got it working now… yay!

1 Like