How do I change the color of the background of the testimony (As shown in purple)?

How do I change the color of the title (As shown “What customers say about us”) and the customer’s name (As shown “Bonnie”)?

Thank you!

Hi @frankieg1150,

Use this css code for background testimonials:

#testimonials .section-content .testimonials-carousel .carousel-testimonial .testimonial-content {
    width: 100%;
    background-color: #682e66;

Color of the title:

#testimonials .section-header h3 {
    color: #fff;

Customer name:

#testimonials .section-content .testimonials-carousel .carousel-testimonial .testimonial-meta {
      color: #fff;



I used the codes you provided for the color of the title and color of the customer name and they are not working. See photo attached. The background code for the testimony worked, but not the others. Also, is there a way to change that area that is still purple? I saw a code for block quotes for the testimony and used the code as I would prefer that, but it is not working either.

Any update on this?


In order to change section title color use this :

body #testimonials .section-header h3 {
    color: #000;

For testimonial name use this :

body #testimonials .section-content .testimonials-carousel .carousel-testimonial .testimonial-meta {
    color: #000;

For the little triangle use this :

body #testimonials .section-content .testimonials-carousel .carousel-testimonial .testimonial-content:after {
    border-color: #000 transparent transparent transparent;

Please add this in : Appearance -> Customize -> Additional CSS.

Thank you! It works great! Are there suppose to also be dots to show that visitors to the website can scroll over to another testimony? Right now I have two testimonies posted on my website and I can scroll over from one testimony to the other, but again customers cannot see that they can swipe. Is there a code to show that there are several testimonies visitors can view?

Also, is there a way to show more than one testimony at a time on the page? Or is scrolling through the only option?

Thank you!


Please add the following code in order to show testimonial navigation :

#testimonials .section-content .testimonials-carousel .owl-controls .owl-dots .owl-dot:hover, #testimonials .section-content .testimonials-carousel .owl-controls .owl-dots .owl-dot.active {
    border: 1px solid #6dc904;
#testimonials .section-content .testimonials-carousel .owl-controls .owl-dots .owl-dot {
    background-color: #6dc904;

At this moment you can show only one testimonial at once.

Have a nice day,