How can the styling of the unordered list in the CMS rich text field be edited in Webflow?
TL;DR
- Add a Rich Text element linked to your CMS Rich Text field and assign it a custom class (e.g., "cms-rich-text").
- Use nested styling to target and customize unordered lists or list items within that class.
To style unordered lists inside a CMS rich text field, you need to use a Rich Text element nested in a Rich Text Block and apply custom classes via a Rich Text custom element, not directly in the CMS field.
1. Add a Rich Text Element to Your Page
- Drag a Rich Text element from the Add panel onto your collection page or template.
- Connect it to the CMS Rich Text field that contains your content.
2. Apply a Custom Class to the Rich Text Element
- Select the Rich Text element, not the content inside.
- Give it a custom class, e.g., "cms-rich-text".
- This class will be used to scope your styles.
3. Use Webflow’s Nested Styling to Style List Items
- With the Rich Text element still selected, click into the element so that you’re inside the formatting options.
- Locate a list item (you may have to temporarily input a sample unordered list in the CMS).
- Click the list item, then use the selector dropdown at the top of the Style panel to choose “All Unordered Lists inside .cms-rich-text” or “All List Items inside .cms-rich-text”.
- Apply your desired styles, such as:
- Bullet type (disc, circle, square via pseudo-elements/custom CSS).
- Padding and margin.
- Font settings and line height.
4. Use a Rich Text Custom Element for More Control (Optional)
- If you want even more styling flexibility, replace the basic Rich Text element with a Rich Text Custom via a Webflow CMS Embed or use custom code.
- However, for most design needs, scoped nested styling is enough.
5. Publish and Verify
- Publish your site to see your custom styles applied in the live view.
- Make sure any changes are reflected across all instances of the class “cms-rich-text”.
Summary
To style unordered lists in a CMS Rich Text field, connect the Rich Text element to your field, assign it a class, and use nested element selectors to target and style list elements inside. This method ensures consistent and CMS-safe styling across your site.