List widget

Customize your Facebook Reviews list widget with CSS. Change colors, fonts, layout, arrows, and more to match your website design.

Change rating color

/* сhange header rating stars color */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-count-text {color: purple;}

/* сhange header rating counter color */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-count-number {color: purple;}

/* сhange reviews rating color */
.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review .reputon-rating-stars {color: purple;}

Header rating stars

Header rating counter

Review stars

---

Change name color

.reputon-facebook-reviews-widget .reputon-standard .reputon-name {color: green;}

/* change reviews name only*/
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-body .reputon-name {color: green;}

/* change header name only*/
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-name {color: green;}

---

Change review text color

.reputon-facebook-reviews-widget .reputon-standard .reputon-text {color: green;}

---

Change publishing date color

.reputon-facebook-reviews-widget .reputon-standard .reputon-date {color: green;}

---

Change reviews counter color

.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-reviews-count {color: green;}

---

Change border width, style and color

/* entire widget border */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-wrapper {border: 3px solid red;}

/* reviews border */
.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review {border: 3px solid red;}

/* reviews body */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-body {border: 3px solid red;}

Widget border

Reviews border

Body border

---

Change background color

/* reviews background */
.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review {background: antiquewhite;}

/* reviews body background */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-body {background: antiquewhite;}

/* header background */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head {background: antiquewhite;}

/* footer background */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-footer {background: antiquewhite;}

/* Add this code to theme.liquid to change the widget section color. */
<style> 
section:has(.reputon-facebook-reviews-widget .reputon-standard) {
background: bisque;}
</style> 

Reviews background

---

Change "Leave a Review" button

/* chaange color ofregular state */
.reputon-facebook-reviews-widget .reputon-standard .reputon-leave-review {background: purple !important;}

/* regular state text color */
.reputon-facebook-reviews-widget .reputon-standard .reputon-leave-review {color: #fff !important;}

/* borders */
.reputon-facebook-reviews-widget .reputon-standard .reputon-leave-review {border: 3px solid red;}

/* hover, active states */
.reputon-facebook-reviews-widget .reputon-standard .reputon-bt:hover,
.reputon-facebook-reviews-widget .reputon-standard .reputon-bt:not([disabled]):active,
.reputon-facebook-reviews-widget .reputon-standard .reputon-bt:not([disabled]):active {color: #fff; background: #269e26;}

/* 'leave a review' button text */
.reputon-facebook-reviews-widget .reputon-standard .reputon-leave-review.editable:after {content: 'your text';}

/* 'leave a review' button font */
.reputon-facebook-reviews-widget .reputon-standard .reputon-leave-review {font-family: Comic Sans MS !important;}

---

Change "Verified" icon color

.reputon-facebook-reviews-widget .reputon-standard .reputon-verified-icon {color: green;}

---

Change "Verified" text color

.reputon-facebook-reviews-widget .reputon-standard .reputon-verified-text {color: green;}

---

Change Rating text color (Recommends...)

.reputon-facebook-reviews-widget .reputon-standard .reputon-feedback-text {color: pink;}

---

Change Rating icon color (Recommends...)

.reputon-facebook-reviews-widget .reputon-standard .reputon-feedback-icon g {color: purple !important;}

---

Change widget font

.reputon-facebook-reviews-widget .reputon-standard {font-family: Comic Sans MS !important;}

---

Hide customer avatar

.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review .reputon-info img {display: none;}

---

Hide customer name

.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review .reputon-name {display: none;}

---

Hide "Recommends" text

.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review 
.reputon-feedback-text {display: none;}

---

Hide "Recommends" icon

.reputon-facebook-reviews-widget .reputon-standard .reputon-single-review 
.reputon-feedback-icon {display: none;}

---

Hide review posting date

.reputon-facebook-reviews-widget .reputon-standard .reputon-date {display: none;}

---

Hide header content

/* hide entire header */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head {display: none;}

/* hide reviews counter */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-reviews-count {display: none;}

/* hide seller name */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-name {display: none;}

/* hide rating */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-rating-stars {display: none;}

/* hide rating counter in header */
.reputon-facebook-reviews-widget .reputon-standard .reputon-count-number {display: none;}

/* hide rating stars in header */
.reputon-facebook-reviews-widget .reputon-standard .reputon-count-text {display: none;}

/* hide logo */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-head .reputon-image {display: none;}

---

Add margin above widget

.reputon-facebook-reviews-widget .reputon-standard {margin-top: 100px !important;}

---

Add margin below widget

.reputon-facebook-reviews-widget .reputon-standard {margin-bottom: 100px !important;}

---

Adjust widget width

.reputon-facebook-reviews-widget[data-type=standard] {max-width: 400px !important;}

---

Hide widget on mobile

@media (max-width: 460px) { 
	.reputon-facebook-reviews-widget .reputon-standard { 
		display: none !important;}}

---

Change scroll color

.reputon-facebook-reviews-widget .reputon-standard 
.reputon-reviews-body::-webkit-scrollbar-thumb {background: red;}
.reputon-facebook-reviews-widget .reputon-standard 
.reputon-reviews-body::-webkit-scrollbar-track {background: black;}

---

Hide footer

.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-footer {display: none;}

---

Change widget height

.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-body {height: 200px;}

/* open all reviews without scroll */
.reputon-facebook-reviews-widget .reputon-standard .reputon-reviews-body {max-height: none;}

---

Apply black-and-white filter

/* on photo */
.reputon-facebook-reviews-widget .reputon-standard img {filter: grayscale(100%);}
	
/* on widget */
.reputon-facebook-reviews-widget .reputon-standard {filter: grayscale(100%);}

---

Have questions or need help with CSS? Contact us at [e-mail] or live chat