Custom CSS

You can include custom CSS going to Testimonials > Settings > Advanced Settings and there will be a textarea to include custom CSS there. This is the best way to include CSS in the plugin, because this way when the plugin is updated, you won’t need to place the custom CSS changes again.

Why would you need Custom CSS? 

Often the theme styles will affect the testimonials layouts. So including some extra CSS could solve some of the problems. Other reason to include custom CSS would be to simply customise the way the layouts look like. Below I’ll document some CSS hacks and tricks that are more commonly needed.

Change Font Styles

The testimonials layout will inherit the font styles from your theme files. If you want to use custom font styles you can do so by adding font rules to your css. You can target all the testimonials showcase using the class .ttshowcase_wrap for example:


.ttshowcase_wrap {
font-weight:bold;
font-family:"Times New Roman",Georgia,Serif;
}

Or you can target specific elements of the plugin, using their wrapping classes:
.ttshowcase_rl_quote {}
.ttshowcase_rl_info_wrap {}

 

Change vertical alignment of entries in Grid

Depending on the number of columns you choose to display, you’ll have to write the proper class name for it. The example below will work for the 2 columns and will change the vertical alignment to top.


.tt_2cl {
vertical-align: top;
}

Set a minimum width for the author box

Sometimes when the image is to small, the author box information when aligned left or right will be to straight. Add some extra CSS to set a minimum width for it.


.tt_info-left {
min-width: 100px;
}

Change Speech Bubble arrow position

In the current version of the plugin the position of the arrow in the speech bubbles layouts are not dynamic, so if you have a different image size and you want to move the arrow to another position we’ll need some extra CSS. The position is set in pixels counting from the left. Here are some examples below:

Speech Bubble Layout

.tt_theme_speech .tt_text_left .tt_quote_info-below .ttshowcase_rl_quote:after
{
left: 37px;
}

Card Box Layout

.tt_theme_card .tt_text_left .tt_quote_info-above .ttshowcase_rl_quote:after
{
left: 37px;
}

 

How to change the star colors

You can change the color of the stars with the following CSS:

.ttshowcase_rating .fa-star, 
.ttshowcase_rating .fa-star-half-o, 
.ttshowcase_rating .fa-star-o {
    color: #6699cc !important;
}

Change the color of pager circles for the slider

.ttshowcase_slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
.ttshowcase_slider .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #6699cc !important;
}

.ttshowcase_slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #669900 !important;
}

Change color of Quote Signs

.ttshowcase_rl_quote .fa-quote-left {
    color:#6699cc;
    opacity:1;
}