Customize Data Only Layout for Review Widget
Using the Data Only layout for the Review Widget and your own CSS you can fully customize how the review and customer feedback data from GatherUp is displayed on your website.
Using the Data Only layout for the Review Widget and your own CSS you can fully customize how the review and customer feedback data from GatherUp is displayed on your website.
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.
1) The GatherUp 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 GatherUp 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 GatherUp 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;}
CSS Selectors for the "Badge"
id selectors :
e2wget5sectionbadgee2w-averagee2w-bigstare2w-add-paddingbadgee2wget5poweredbybadge
class selectors :
e2wget5sectione2wUuidbadgee2w-theme-allinclusivee2w-new-themee2w-lang-ene2w-averagee2wcounte2w-aratinge2waveragee2woutofe2wbestfull-starhalf-stare2w-add-paddinge2w-businessnamealign-centere2w-view-testimonials-linke2wget5poweredby
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://GatherUp.com/api/doc/feedbacks/get
We also offer a JSON endpoint for getting a raw data feed of your GatherUp testimonials.