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 Reputation Builder 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.

Screen_Shot_2022-07-28_at_11.10.27_AM.png

1) The Reputation Builder 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 Reputation Builder 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 Reputation Builder 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).

.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).

#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 :

e2wget5sectionbadge
e2w-average
e2w-bigstar
e2w-add-paddingbadge
e2wget5poweredbybadge

class selectors :

e2wget5section
e2wUuidbadge
e2w-theme-allinclusive
e2w-new-theme
e2w-lang-en
e2w-average
e2wcount
e2w-arating
e2waverage
e2woutof
e2wbest
full-star
half-star
e2w-add-padding
e2w-businessname
align-center
e2w-view-testimonials-link
e2wget5poweredby

___________________________________________________________________________