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

Szólj hozzá!

Category: News, Tips and tricks