How to Change Bullet Color of List in Divi Theme

Jun 15, 2021 | 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.

0 Comments

Submit a Comment

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

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month