Using this guide, you can customize the text color, border style & more in any of Reputon's review widgets for Trustpilot, Google, Facebook, Amazon, Etsy and Testimonials.

All you need to do is paste a given CSS example below with custom parameter (color, border, etc.) into the Custom CSS field in corresponding widget settings.

For text color, you can use HEX format (i.e #ff8899), or just word (i.e "red", "yellow").

For border width (i.e. 1px, 2px), border style (i.e. "solid", "dotted"), border color (i.e #aa4455, #bb6677).

You can add 2 or more CSS codes to the Custom CSS field as well. All examples below are for the Trustpilot and Google widgets, but they are really applicable across all widgets as the CSS classes are mostly the same. If you want to view the CSS class name for particular widget element, you can use your browser developer tools to do that (right click on element > Inspect).

 

Table of Contents

  1. Trustpilot Reviews
  2. Google Reviews
  3. Etsy Reviews

 

Trustpilot Reviews

Compact badge layout

Background color

CSS example:

 [class*=reviews-holder][class*=badge] [class*=review-badge] {background: #F8F2F1;}

 

"Powered by" text color

CSS example:

[class*="reviews-holder"][class*="badge"] [class*="review-badge"] [class*="powered"] {color: red;}

 

Rating text color

CSS example:

[class*="reviews-holder"][class*="badge"] [class*="review-badge"] [class*=rating-text] {color: red;}

 

Headline color

CSS example:

[class*="reviews-holder"][class*="badge"]::before {background: red;}

 

Small badge layout

Badge background color

CSS example:

[class*=reviews-holder][class*=badge] [class*=review-badge] {background: #F8F2F1;}

 

Text color

CSS example:

[class*=reviews-holder][class*=badge] [class*=review-badge] {color: red;}

 

List layout

Widget background color

CSS example:

[class*=reviews-holder][class*=standard] {background: F8F2F1;}

 

Review text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=text] {color: red;}

 

Review headline text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=review-title] {color: red;}

 

Published date text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=date] {color: red;}

 

Customer's name text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=name] {color: red;}

 

Head reviews text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=reviews-head] [class*=powered][class*=reverted] {color: red;}

 

Widget border width, style and color

CSS example:

[class*=reviews-holder][class*=standard] {border: 6px solid red;}

 

Review border width, style and color

CSS example:

[class*=reviews-holder][class*=standard][class*=single-review]{border: 1px solid red}

 

Single review headline text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=top-part] [class*=text-block] [class*=caption] {color: red;}

 

"Show more" text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=show-more] {color: red;}

 

Published date text color

CSS example:

[class*=reviews-holder][class*=carousel][class*=single-review][class*=date]{color: red;}

 

Customer's name text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=name] {color: red;}

 

Review border width, style and color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=top-part] {border: 1px solid red;}

 

Widget background color

CSS example:

[class*=reviews-holder][class*=carousel] {background: #F8F2F1;}

 

Badge text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=carousel-footer] [class*=common-review] [class*=powered][class*=reverted] {color: red;}

Google Reviews

Background color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=carousel-footer] [class*=common-review] [class*=powered][class*=reverted] {color: #F8F2F1;}

Review background color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=top-part] [class*=holder] {background: #F8F2F1;}

Review border width, style and color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=top-part] {border: 2px solid red;}

Date of publishing text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=date] {color: red;}

Review text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=text] {color: red;}

List layout

Background color

CSS example:

[class*=reviews-holder][class*=standard] {background: #F8F2F1;}

Review text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=text] {color: red;}

Date text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=date] {color: red;}

Compact layout

Background color

CSS example:

[class*=reviews-holder][class*=badge] [class*=review-badge] {background: #F8F2F1;}

Text color

CSS example:

[class*=reviews-holder][class*=badge] [class*=review-badge] [class*=single-review] [class*=name] {color: red;}

Small layout

Average review text color

CSS example:

[class*=reviews-holder][class*=badge][class*=small] [class*=rating-count] {color: red;}

Background color

CSS example:

[class*=reviews-holder][class*=badge][class*=small] [class*=review-badge] {background: #F8F2F1;}

Etsy Reviews

Background color

CSS example:

[class*=reviews-holder][class*=carousel] {background: #F8F2F1;}

Review background color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=top-part] [class*=holder] {background: #F8F2F1;}

Review border width, style and color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=top-part] {border: 2px solid red;}

Published date text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=date] {color: red;}

Review text color

CSS example:

[class*=reviews-holder][class*=carousel] [class*=single-review] [class*=text] {color: red;}

List layout

Background color

CSS example:

[class*=reviews-holder][class*=standard] {background: #F8F2F1;}

Review text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=text] {color: red;}

Date text color

CSS example:

[class*=reviews-holder][class*=standard] [class*=single-review] [class*=date] {color: red;}

Compact layout

Background color

CSS example:

[class*=reviews-holder][class*=badge] [class*=review-badge] {background: #F8F2F1;}

Text color

CSS example:

[class*=reviews-holder][class*=badge] [class*=review-badge] [class*=single-review] [class*=name] {color: red;}

Small layout

Average review text color

CSS example:

[class*=reviews-holder][class*=badge][class*=small] [class*=rating-count] {color: red;}

Background color

CSS example:

[class*=reviews-holder][class*=badge][class*=small] [class*=review-badge] {background: #F8F2F1;}