Review widget customization – beyond the editor

Written by Tom

Beyond the widget editing capabilities, you can customize the look of the widgets with little tricks. Let’s see a compilation of them!

Find your needs/problem below and add the given CSS/HTML/Javascript lines into your site. There are some ways to do this:

Append your-CSS-code it to your site’s CSS file
Add your-CSS-code to your WordPress theme’s custom style section
Wrap your-CSS-code with <style> and </style> and add it to your page as HTML code. Your insertable line should look like this: <style> your-CSS-code </style>
If you have your-HTML-code, copy-paste into your page as HTML code. (Like in the previous point)
If you have your-javascript-source-code, copy-paste into one of your used Javascript file, or into your HTML page. (In this case do not forget the <script> wrapper tag!)

Topics

Increase size of platform logos

CSS code

.ti-widget[data-layout-id] .source-Google .ti-large-logo img { width: 200px !important; height: auto !important; }

Usage

Replace the Google word to your actual platform name. For example: Facebook, Booking, Airbnb, ...
Change the 200 numeric value to get the wanted size

Increase size of platform stars

CSS code

.ti-widget[data-pid] .ti-star { width: 40px !important; height: 40px !important; }

Usage

Change the 40 numeric value to get the wanted size

Display any widget in a stick (always floating) box

Wrap your widget's code as in the example below, then insert the (result) HTML code into your site.

HTML code

bottom: 20px; left: 30px; width: 300px; height: 200px;">your-widget-code

Usage

Replace the bottom word to top if you want the box to show on the top
Replace the left word to right if you want the box to show on the right
Change the 20/30 numeric values to get the wanted box position
Change the 200/300 numeric values to get the wanted box size

Adjust the floating position

CSS code

.ti-widget {bottom: 100px !important}

Usage

Change the 100 numeric values to get the wanted box position

Remove themify's little icon from widget corners

If you find that weird little icons appear in the corners of the review boxes, the "themify" icon set is probably interfering with our solution. Here is the hint:

CSS code

.ti-widget:before {content:""}

Usage

Add the CSS code (above) to your site (into your theme's custom CSS section or with the Wordpress File editor)

Change color of platform stars

It is worth considering this step, as visitors develop trust sooner if we use (original) color combinations typical of a well-known brand.

CSS code

:root {
    /* star color */ 
    --star-color-primary: #000000;
    /* empty star color */ 
    --star-color-secondary: #cccccc;
  }

/* full star */ 
.ti-widget .ti-star.f {
    -webkit-mask: url(https://cdn.trustindex.io/assets/platform/Google/star/f.svg) no-repeat 50% 50%;
    background-color: var(--star-color-primary);
    background-image: none !important;
}
/* half star */ 
.ti-widget .ti-star.h {
    -webkit-mask: url(https://cdn.trustindex.io/assets/platform/Google/star/f.svg) no-repeat 50% 50%;
    background:  linear-gradient(90deg, var(--star-color-primary) 50%, var( --star-color-secondary) 50%) !important;

}
/* empty star */ 
.ti-widget .ti-star.e {
    -webkit-mask: url(https://cdn.trustindex.io/assets/platform/Google/star/f.svg) no-repeat 50% 50%;
    background-color: var(--star-color-secondary);
    background-image: none !important;
}

Usage

Change the #00000 HEX color code to your selected one

Make review boxes clickable. (Make them act like links)

First, consider whether this is definitely needed:

degrades the focus (navigates the visitors from your page)
In a mobile view, an intention to scroll may also appear to be a tap/click.

OK, you want it. Let's see:

Javascript code

Attach an event handler to each review box. jQuery example: jQuery(".ti-review-item").click(function(){window.location.href = "where-should-redirect-URL";});