🎁 Get Up To 70% Off During Divi Summer Sale! Get Divi

How to Change Bullet Color of List in Divi Theme

Blog, Divi Tutorial | 0 comments

In this article I will share the steps to change the bullet list icon color in Divi theme.

In the Divi theme you can set a custom color for text in lists. However there is no option to set a custom color specifically for the icon in the list.

We can use custom css to set a custom color for the bullet.

1. Add CSS Class to the Module

The first step is to add a CSS Class to the module so that the code does not affect any other modules on your website. Open Module Settings > Advanced > CSS Class and add the class lwp-bullet-color.

Please check the screenshot below to understand where to add the class in the module settings if you are not sure.

Divi CSS Class change bullet list color

2. Add CSS Code to Change Bullet Color

Next go to your WordPress Dashboard > Divi >Theme Options > Custom CSS and then add the following css code there.

.lwp-bullet-color ::marker {
    color: #ff0000;
}

The code will change the color of the bullet inside the list. You can change the #ff0000 value in the code to change the color of the bullet.

If you are not sure where to add the code then here is a screenshot to help you.

Divi Theme Options Custom CSS

Here is a preview of how the list will look like after the CSS Class and CSS Code are added.

Divi list with custom bullet color

As you can see the icon have completely separate color from the list text. The code should work in any Divi module.

Here are some popular Divi tutorials from the blog that you can read next.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!