Сompact slider / sticky compact slider widget

Change widget max-width

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-container {max-width: 400px;}

before

after

---

Add margin above widget

.reputon-etsy-reviews-widget .reputon-basic-slide {margin-top: 100px !important;}

---

Add margin below widget

.reputon-etsy-reviews-widget .reputon-basic-slide {margin-bottom: 100px !important;}

---

Change rating color

/* change the color of the rating in all widget */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-rating-stars {color: dodgerblue;}

/* change the color of the rating in review slides only */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-single-review .reputon-rating-stars {color: dodgerblue;}

/* change the color of the rating in info slide only */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-rating-stars {color: dodgerblue;}

---

before

after

Hide customer name and stars count

/* hide customer name and stars count */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-single-review .reputon-rating-text {display: none;}

/* hide stars counter only */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-single-review .reputon-rating-text > div:first-child {display: none;}

hide the entire line

hide the stars count only

---

Change customer name and stars count color

/* change customer name and stars count color */;
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-single-review .reputon-rating-text {color: dodgerblue;}

/* change stars count color only */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-single-review .reputon-rating-text > div:first-child {color: dodgerblue;}

---

Change publishing date color

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-date {color: dodgerblue;}

---

Change border width, style and color

/* change color except top */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-badge {
	border: 3px solid orange;
	border-top: none;}

/* change top color */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-badge > div:last-child {background: dodgerblue;}

---

Change slider background color

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-slide {background: skyblue;}

/* make hover lighter or darker than the container color */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-container:hover .reputon-slide {background: skyblue;}

/* To change the background color of the widget section, add this code to your theme.liquid file. */
<style> 
	section:has(.reputon-etsy-reviews-widget .reputon-basic-slide) {background: bisque;}
</style> 

---

Change widget font

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-carousel-holder {font-family: 'Comic Sans MS' !important;}

---

Change Etsy logo color

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-image {color: dodgerblue;}

---

Change info slider text color

/* change 'number of reviews' color */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-reviews-count {color: orange;}

/* change name color*/
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-name {color: orange;}

---

Center info slider title and reviews counter

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-content {align-items: center;}

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-name {text-align: center;}

---

Center review slider title and reviews counter

.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-single-review .reputon-content {align-items: center;}

---

Hide footer title, rating, reviews and logo

/* hide title */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-name {display: none;}

/* hide rating */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-rating-stars {display: none;}

/* hide reviews */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-reviews-count {display: none;}

/* hide logo */
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-info .reputon-image {display: none;}

hide logo

hide name

hide rating

hide reviews

---

Apply black-and-white filter

.reputon-etsy-reviews-widget .reputon-basic-slide {filter: grayscale(100%);}

---

Move the widget

/* move to the start of the block */
.reputon-etsy-reviews-widget {justify-content: flex-start !important;}
.reputon-etsy-reviews-widget .reputon-basic-slide {margin: 0 !important;}

/* move to the end of the block */
.reputon-etsy-reviews-widget {justify-content: flex-end !important;}
.reputon-etsy-reviews-widget .reputon-basic-slide {margin: 0 !important;}

/* center on mobile */
@media (max-width: 640px) {
  .reputon-etsy-reviews-widget .reputon-basic-slide .reputon-badge {transform-origin: center;}}

---

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