Compact rating / sticky compact rating widget

Change widget main color

.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-image svg,
.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-rating-stars {color: skyblue;}

.reputon-etsy-reviews-widget .reputon-basic .reputon-badge >div:nth-of-type(2)  {background: skyblue;}

---

Change rating color

.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-rating-stars {color: skyblue;}

---

Change widget font

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

---

Center widget's content

.reputon-etsy-reviews-widget .reputon-basic .reputon-content {align-items: center;}
.reputon-etsy-reviews-widget .reputon-basic .reputon-name {text-align: center;}

---

Change background color

.reputon-etsy-reviews-widget .reputon-basic .reputon-container {background: antiquewhite;}
	
/* hovered state color */
.reputon-etsy-reviews-widget .reputon-basic .reputon-container:hover {background: brown;}

/* 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) {background: bisque;}
</style> 

---

Remove shadow and add border

.reputon-etsy-reviews-widget .reputon-basic .reputon-badge {
	box-shadow: none;
	border: 2px solid coral;}

---

Change widget color

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

/* change reviews count color */
.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-reviews-count {color: skyblue;}

change name color

change reviews count color

---

Remove widget blocks

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

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

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

/* remove name, reviews and logo */
.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-name,
.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-reviews-count,
.reputon-etsy-reviews-widget .reputon-basic .reputon-info .reputon-image {display: none;}

removed reviews count

removed logo

removed name, reviews count and logo

removed name

---

Change widget width

min width: 205px

.reputon-etsy-reviews-widget .reputon-basic .reputon-container {width: 470px;}

---

Add margin above widget

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

---

Add margin below widget

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

---

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 {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 {margin: 0 !important;}

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

---

Apply black-and-white filter

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

---

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