Сompact slider / sticky compact slider widget
Change widget max-width
.reputon-etsy-reviews-widget .reputon-basic-slide .reputon-container {max-width: 400px;}
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;}
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;}
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;}
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: support@reputon.com or live chat.
Last updated
Was this helpful?