1. Home
  2. Showing Testimonials
  3. Customizing the look of Testimonials on a Website

Customizing the look of Testimonials on a Website

This post shows you how to customize the embedded testimonials from GetFiveStars.com


1) Log into your GetFiveStars.com account

2) Click on the Business you would like to customize the testimonials for.

select a business getfivestars

3) In the main menu (upper right) click on “Settings -> Testimonial Widget”

testimonials-widget-menu-item

4) Pick a color scheme from the “Testimonials Widget Color Scheme” dropdown.

change-color-scheme-testimonials-widget

5) Preview of each color scheme. Left: Orange | Middle: Default | Right: Legacy

testimonials-color-schemes



Advanced Customization using CSS

In addition to choosing a color scheme as described above you can also add your own custom CSS. The following is intended for users with good CSS and HTML knowledge. Please contact your webmaster if you are not sure how to access or use your websites CSS file(s).

Any pre-build color scheme (Default, Orange, Legacy etc) can be overwritten locally with CSS. If “big” changes are required we recommend using the “No Style | Data Only” scheme option. As the name implies no styles will be included with the testimonials widget allowing you to add your own even more easily.

no-styles-data-only-testimonials-widget


1) The GetFiveStars Widget has several different div classes. All of which can have their own css applied on your end and which will overwrite the “out of the box” defaults.

2) The maximum width of the responsive GetFiveStars widget is by default 500px.

3) To identify desired div classes we recommend using the “Inspect Element” option in your Chrome browser or the “Firebug” Add-on for Firefox.

4) Below are a few common examples. Please note that the examples are *not* a complete list of all CSS classes found in the GetFiveStars Testimonial Widget. Refer to item #3 above on how to identify all classes in order to modify them to your needs.


Color CSS – Use a hex color number of choice. Example: #ccc

#e2wget5widget {color: #____ !important;}
[Note: Above code applies style to entire widget. Alternatives below.]

#e2wget5widget h2 {color: #____ !important;}

#e2wget5widget h4 {color: #____ !important;}

#e2wget5widget p {color: #____ !important;}

#e2wget5widget a {color: #____ !important;}


Font Family and Font Size CSS

#e2wget5widget {font-family: #____ !important; font-size: __px !important;}
[Note: Above code applies style to entire widget. Alternatives below.]

#e2wget5widget h2 {font-family: ____ !important; font-size: __px !important;}

#e2wget5widget h4 {font-family: ____ !important; font-size: __px !important;}

#e2wget5widget p {font-family: ____ !important; font-size: __px !important;}

#e2wget5widget a {font-family: ____ !important; font-size: __px !important;}


Width CSS – Insert a width in Pixel of choice. Example: 700px

#e2wget5widget {max-width:____ !important;}

#e2wget5widget span.e2whr{max-width:____ !important;}

#e2wget5widget .e2wdescription p {max-width:____ !important;}


Changing the “Leave Us Feedback” image button (“Legacy” Color Scheme only).

Click here to see the “default” feedback request image as reference for creating your own.

.e2get5writeReviewLink {background: url(‘http://www.your-domain.com/feedback-request.png’) no-repeat !important;}

Other Color Schemes (Default, Orange and Transparent etc) are using CSS3 to create the button. The div class .e2get5writeReviewLink remains the same however.


Changing the “Stars” image (active and passive are one image).

Click here to see the “default” stars image as reference for creating your own.

#e2wget5widget .get5_stars .e2wrating .e2w-active-stars, #e2wget5widget .get5_stars .e2wrating .e2w-inactive-stars {background-image: url(‘http://www.your-domain.com/stars.png’) !important;}


Pro Tip:

​If you would like to create your own custom display solution you may also be interested in our API which allows you to receive all feedbacks as raw data feed. More here: https://getfivestars.com/api/doc/feedbacks/get

We also offer a Json endpoint for getting a raw data feed of your GetFiveStars testimonials.

 

Was this article helpful?

Related Articles