How to Change the Background color of Divi Toggle Module Title and Icon
By default Divi Toggle Module didn’t have any style for Toggle open view. It’s look very plain like the below image.
We can add a little CSS to add Background color to the Toggle title and make it stand alone from rest of the content.
/* Toggle open background color */
/* Remove all padding in toggle open view*/
.et_pb_toggle_open{
padding: 0 !important;
}
/* Remove default toggle top padding*/
.et_pb_toggle.et_pb_toggle_item.et_pb_toggle_open{
padding-top: 0 !important;
}
/* Change title color, background color and add padding */
.et_pb_toggle_open .et_pb_toggle_title, .et_pb_toggle_open h5.et_pb_toggle_title {
color: #fff;
padding: 10px 20px;
background-color: #2eaef0;
}
/* change icon color and position */
.et_pb_toggle_open .et_pb_toggle_title:before {
content: "\e04f";
color: #fff !important;
right: 5px !important;
}
/* add padding to toggle content */
.et_pb_toggle_content {
padding: 20px;
}
Copy above CSS code in your Divi Theme Option or custom Code module and see the result. Your resulting page should look like the below image.
Thanks, Happy coding…… 🙂
