How can I style the shortcode testimonials

Owned by Saurabh Dixit
Jan 05, 2017
1 min read

See How is a testimonial list formatted with CSS? and How is an active testimonial widget formatted with CSS? for more specific HTML layout and CSS presentation information.

Each shortcode testimonial is wrapped by a div using classestestimonials-widget-testimonial list. As such, to increase spacing between testimonials, try…

.testimonials-widget-testimonial list {
    padding-bottom: 1em;
}

Making the citation line a different color is a little trickier. The reason being is that applying a color to .testimonials-widget-testimonial cite will change the entire citation line in the widget display as well. To only change the shortcode testimonial citation color, try…

.testimonials-widget-testimonial list cite {
    color: blue;
}

If you’re wanting to change only the company or URL color, then try.

.testimonials-widget-testimonial list cite .company {
    color: purple;
}

Like wise, the source uses class source.