Masonry widget

Change rating color

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

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

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

Header rating stars

Header rating counter

Review stars

---

Change name color

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

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

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

---

Change review text color

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

---

Change publishing date color

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

---

Change reviews counter color

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

---

Change border style and color

/* change reviews border only */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-top-part {border: 3px solid #2fd45d;}

/* change header border only */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head {border: 3px solid red;}

Reviews border color

Header border color

---

Change background color

/* change header background only*/
.reputon-facebook-reviews-widget .reputon-masonry .reputon-top-part {background: lightpink;}

/* change reviews background only*/
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head {background: lightpink;}

Reviews background

Header background

---

Change “Leave a Review” button color

/* regular state */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review {background: purple !important;}

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

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

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

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

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

---

Change “Load more” button color

/* regular state */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more {background: purple !important;}

/* regular state text color */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more {color: #fff !important;}

/* borders */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more {border: 3px solid red;}

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

/* 'load more' button text */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more.editable:after {content: 'your text';}

/* 'load more' button font */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more.editable:after {font-family: Comic Sans MS !important;}

---

Change “Verified” icon color

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

---

Change Rating text color (Recommends...)

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

---

Change Rating icon color (Recommends...)

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

---

Change widget font

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

---

Hide customer avatar

.reputon-facebook-reviews-widget .reputon-masonry .reputon-single-review .reputon-image {display: none;}

---

Hide customer name

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

---

Hide "Recommends" text

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

---

Hide "Recommends" icon

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

---

Hide review posting date

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

---

Hide header content

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

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

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

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

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

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

/* hide seller avatar */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-image {display: none;}

---

Add margin above widget

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

---

Add margin below widget

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

---

Adjust widget width

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

---

Hide widget on mobile

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

---

Color the widget

.reputon-facebook-reviews-widget .reputon-masonry {
  background: bisque;}

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

---

Apply black-and-white filter

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

---

Questions about CSS or need assistance? We're excited to help: [e-mail] or live chat.