Streaming live at 10am (PST)

How to style Ordered list and Unordered list both differently inside Rich text field?

I’ve imported CSV file data in my collections and I’ve setup all the fields to rich text fields how can I add class or styled the differently both order and unordered lists inside the rich text fields?


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

1 Like

I’m facing the same issue. Have you received a reply or figured out how to style Ordered and Unordered Lists within RT?

You can style elements inside of a Rich Text Block by giving the RTB a class. Then select a child element. Then in the design panel, select "All (whatever element you selected) and a new sub option will be displayed allowing you to choose all (elements) when nested inside (class of RTB).

Look at the documentation for the Rich Text Block and styling elements in the University (always the best place to check first).

I have viewed the documentation - perhaps I missed something, but I could not find any information for styling the LIST ITEM differently for ordered/unordered list - the nested selector defaults to ALL LIST ITEMS.

2 Likes

Watch this video.

Hi - I am struggling with the same issue. Maybe I’m missing it, but the the example isn’t really helping me because the ordered and unordered list are already set in the RTB at the start of the demo - I can’t even get that far because it always defaults to whatever ‘all list items’ is set to when I insert an ordered or unordered list. Any ideas?

Yeah, this is clearly still an issue. This is very disappointing and annoying to have to go in and add some custom CSS to resolve this.

To clarify the issue here, when using a RTB you can set the ALL LIST ITEMS > Style to one of the 6 available styles, however this then applies to all LI items. The app lets you set values for list type on LIST > ALL UNORDERED LISTS and LIST > ALL ORDERED LISTS but these are overridden by the List Items which sit within, which you can only choose one variant of List item > Style on (ALL LIST ITEMS)

To work around this issue, I added the following CSS to the Project > Custom Code > Head Code section, and it sets the list item type back to the default value. This doesn’t work in the preview/editor but will work in the rendered page.

<!--Styles to fix Webflow-->
<style>
  .w-richtext li {
    list-style-type: inherit;
}
</style>
1 Like

Yeah, I just came across this and there is no way to do this once the list item has been set to a certain style, since there is not “unset” option. If you remove what is set it defaults to “none”.

Clearly the solution would be that when you select a list item it lets you set the “when nested inside of” part to either ordered list or unordered list.

The other issue is that if I remove the “style” setting for a list item it needs to go back to a state where it removes the style and does not set it to “none”, which is a big difference in CSS.

Anyways, can’t believe it’s impossible to do such a simple thing, without resorting to custom CSS. Then I might as well just style all the list items in CSS.

Come on Webflow ol and ul are like among the most basic HTML elements that have been around since the dawn of the web and you are struggling on those!?!

Screenshot 2021-06-02 at 14.30.48