CSS Targeting the Testimonial Rotator

You can easily change the styles of your testimonial rotator, this includes the font size, colors and borders.

Screen Shot 2016-04-12 at 10.51.29 AMAll changes will need to be in your style.css file found in your theme folder. You’ll want to scroll to the very bottom of your file and make sure you are not including your custom CSS inside of another snippit. There is a nice CSS Help Guide on WordPress.org

I have built the Testimonial Rotator with a lot of selectors. Selectors are classnames that you can target specific elements of the rotator. Here is a general breakdown of the rotator structure.

So once you find the elements you need to target you would simply add the CSS to your style.css file like this:

div.testimonial_rotator_wrap div.testimonial_rotator { font-size: 1.1em; }

This snippit above makes the font size 1 size bigger.

Target the Title

div.testimonial_rotator_wrap div.testimonial_rotator .testimonial_rotator_slide_title { font-size: 2em; }

TARGET THE Quote

div.testimonial_rotator_wrap div.testimonial_rotator .testimonial_rotator_quote { font-size: 2em; }

TARGET THE Stars

div.testimonial_rotator_wrap div.testimonial_rotator .testimonial_rotator_star { font-size: 48px; line-height: 48px; }

TARGET THE AUTHOR

div.testimonial_rotator_wrap div.testimonial_rotator .testimonial_rotator_author_info { color: #CCC; }

TARGET THE Directional Arrows

div.testimonial_rotator_wrap div.testimonial_rotator .testimonial_rotator_nav { font-size: 3em; }

Note on Selectors

The more specific a selector is, the higher it’s priority is. A selector of #content .block has more importance than just .block. This is why I have added div.testimonial_rotator_wrap div.testimonial_rotator to the beginning of each example above.

If you target with an ID (like #content .testimonial_rotator) instead of a classname you will have better success overriding the styles provided by your WordPress theme. If the CSS you add from above is still not showing, try adding !important after your CSS like this:

div.testimonial_rotator_wrap div.testimonial_rotator .testimonial_rotator_nav { font-size: 3em !important; }

You will need to be more exact with your selectors because there is a chance that WordPress will load your theme style before it loads the default Testimonial Rotator styles.