Testimonials content template in Toolset

Template Section. Copy this first section into the Template part of the Toolset Editor.

<div class="testimonial-inner">
  <div class="testimonial-heading"><h3>[types field='headline'][/types]</h3></div>
<div class="testimonial-content">
  <div class="testimonial-image">[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]</div>
  <div class="maybe-clear"></div><p>[types field='comment'][/types]</p>
  </div>
<div class="testimonial-client">
  <div class="testimonial-name"><strong>[types field='name'][/types]</strong></div>
  [types field='website' target='_blank'][/types]
  </div>
  <div class="clear"></div>
</div>

CSS section - copy the following CSS into the CSS editor section of the Toolset Editor.
You will need to edit the part that says *PATH TO YOUR QUOTES IMAGE*, to an actual location of the quotes image on your site.

.testimonial-inner {
 border: 1px solid #bdbdbd;
 padding: 20px;
 text-align: left;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.testimonial-heading {
 background: url(*PATH TO YOUR QUOTES IMAGE*) no-repeat scroll left center transparent;
    margin-top: 0;
    padding-left: 40px;
    text-align: left;
  margin: 0 0 20px;
}

.testimonial-content {
 box-sizing: border-box;
  display: block;
}

.testimonial-image {
 margin-top: 0.25em;
 margin-right: 1em;
 margin-bottom: 0.25em;
 float: left;
 max-width: 100%;
}

.testimonial-image img {
 border-radius: 5px;
}

.maybe-clear {
  content: "";
    width: 6em;
    display: block;
    overflow: hidden;
}

.testimonial-client {
 margin-top: 1em;
    text-align: right;
}

.clear {
 clear: both;
}