Carousel widget

Change rating color

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

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

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

Header rating stars

Header rating counter

Reviews rating

---

Change name color

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

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

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

---

Change review text color

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

---

Change publishing date color

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

---

Change reviews counter color

.reputon-facebook-reviews-widget .reputon-carousel .reputon-header .reputon-reviews-count {color: green;}

---

Change border width, style and color

/* change reviews border only */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-top-part {border: 3px solid red;}

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

---

Change background color

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

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

Reviews background

Header background

---

Change widget color

.reputon-facebook-reviews-widget .reputon-carousel {
  background: pink;}

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

---

Change navigation arrows

/* change size */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-prev {min-width: 80px; height: 80px;}

/* hide arrows */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-prev {display: none;}

/* hide arrows on mobile*/
@media(max-width: 760px) {
	.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
	.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-prev {display: none;}}

/* color */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-prev {color: red;}

/* background */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-prev {background: pink;}

/* adjust arrows (use negative numbers to raise position) */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-facebook-reviews-widget .reputon-carousel .reputon-swiper-button-prev {margin-top: 200px;}

---

Change “Leave a Review” button

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

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

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

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

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

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

---

Change “Verified” icon color

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

---

Change Rating text color (Recommends...)

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

---

Change Rating icon color (Recommends...)

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

---

Change widget font

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

---

Hide customer avatar

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

---

Hide customer name

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

---

Hide review posting date

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

---

Hide "Recommends" text

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

---

Hide "Recommends" icon

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

---

Remove “Show more” button

.reputon-facebook-reviews-widget .reputon-carousel .reputon-show-more 
{display: none;}
.reputon-facebook-reviews-widget .reputon-carousel .reputon-text-holder 
{-webkit-line-clamp: unset;mask-image: none;}

---

Change “Show more” button

/* change color */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-show-more {color: red;}

/* remove underline */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-show-more span {text-decoration: none;}

/* change font */
.reputon-facebook-reviews-widget .reputon-carousel .reputon-show-more span {font-family: Comic Sans MS;}

---

Hide reviews counter in header

.reputon-facebook-reviews-widget .reputon-carousel .reputon-header .reputon-reviews-count {display: none;}

---

Hide rating counter in header

.reputon-facebook-reviews-widget .reputon-carousel .reputon-count-number {display: none;}

---

Hide rating stars in header

.reputon-facebook-reviews-widget .reputon-carousel .reputon-count-text {display: none;}

---

Hide facebook logo in header

.reputon-facebook-reviews-widget .reputon-carousel .reputon-header .reputon-header-logo {display: none;}

---

Hide entire header

.reputon-facebook-reviews-widget .reputon-carousel .reputon-header {display: none;}

---

Add margin above widget

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

---

Add margin below widget

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

---

Change widget width

.reputon-facebook-reviews-widget[data-type=carousel] {width: 600px !important;}

---

Hide widget on mobile

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

---

Apply black-and-white filter

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

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

---

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