Review widget customization – beyond the editor

Author: 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 lines into your site. There are some ways to do this:

  1. Append your-CSS-code it to your site’s CSS file
  2. Add your-CSS-code to your WordPress theme’s custom style section
  3. 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>
  4. If you have your-HTML-code, add copy-paste to your page as HTML code. (Like in the previous point)

Topics

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

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
Wrap your widget's code as in the example below, then insert the (result) HTML code into your site.

HTML code

<div style="position: fixed; bottom: 20px; left: 30px; width: 300px; height: 200px;">your-widget-code</div>

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

CSS code

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

Usage

  • Change the 100 numeric values to get the wanted box position
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)

Szólj hozzá!

Category: Tips and tricks