I wanted to challenge myself to use the fewest possible number of CSS changes to transform the display of a Conductor Widget for use as a client testimonial area. Conductor Widget is the centerpiece of Conductor Plugin

Watch the video to see the process to create the testimonial area using Conductor Plugin with only a few CSS changes.

I had already prepared the posts that I was planning to display with a featured image, some content and the title (to be used as the signature line of the testimonial). I assigned all the testimonials to a single category.
My plan was to have page to display the testimonials all together and incorporate the items that were already available in the post. I needed to rearrange the elements. Normally, the title is displayed before the content; however, I wanted to re-purpose the title as a signature line so it would be logical to display below the content. In the Conductor Widget display area (after selecting featured image, content and title as things that I wanted to have to display) I switched (dragged) the order of the title so it would located be under the content.

However because the image was kind of big but still didn’t fill the entire display container of the Conductor Widget, I needed to perform a few housekeeping tasks. The place to control the featured image size is available in the Conductor Widget in the advanced settings area. The two items that I needed to work with were the size of the featured image and the custom CSS. I decided the thumbnail image would be the best choice in proportion to the overall look I wanted. Yes, I need to get rid of the empty space that was created when the featured image displayed above the content.

I had created testimonial widgets in the past but I wanted to see how few CSS changes I actually needed to fix up the display. The challenge of making changes to the styling of a widget or in any are area of a website is to figure out what classes are in control of the style. You can figure this out by using tools like Firebug for Firefox, Inspect element for Chrome or check what is set up in the actual CSS file for the plug-in.

I did a combination of things to determine what classes need to needed to be adjusted. I noticed in the CSS file that they were just a few lines that really applied to managing the featured image. I copied those lines of CSS into my child theme CSS file. Since I wanted the changes that I was planning to make to only impact the testimonials widget that I was creating, I added another class to CSS related to the image so that whatever modifications I was doing only apply to this specific Conductor Widget. Changing the float and padding were the two main changes that were necessary. Below, I have provided the exact CSS that I used to get the text to wrap neatly around the image.

The other change I decided to do was to modify the formatting of the text of the signature line. I wanted to make the signature text stand out so I chose a tiny background image icon and I reduced the size of the text (since it was not really representing a title).


/*Conductor Widget changes for Testimonial display*/
.people.conductor-widget-large .thumbnail img,
.people.conductor-widget-single-large .thumbnail img,
.people.conductor-widget-medium .thumbnail img,
.people.conductor-widget-single-medium .thumbnail img {
padding: 10px 10px 0px 0px; /*changed*/
float: left; /*changed*/
}
.people.conductor-widget .post-title.no-link{
font-size: 1.0em;
padding-left:20px;
background: #fff url("http://zigorzag.wpengine.com/wp-content/uploads/2015/07/heart.png");
background-repeat:no-repeat;
background-position:top left;
}

After saving the CSS changes in my child theme, I used the special class I had created for this widget. The new class was named “people” but you can name it anything you want. I typed the the word “people” into the space appropriately labeled CSS Class(es) in the advanced settings area of the Conductor Widget. As soon as the new CSS class name was typed in to the advanced settings space, the customizer area showed the immediate impact of the CSS changes.

I had originally started out with the large item display in the Conductor Widget. However, I decided that, while I did like the way everything was being handled with the image and text. I felt that the display would work better showing the testimonials side-by-side instead of stacked. I changed the Conductor Widget display size to medium and saved the widget to publish it.