One line compact rating widget
Remove widget elements
/* remove rating stars */
.reputon-google-reviews-widget .reputon-star-rating .reputon-rating-stars {display: none;}
/* remove rating counter */
.reputon-google-reviews-widget .reputon-star-rating .reputon-rating-count {display: none;}
/* remove reviews counter */
.reputon-google-reviews-widget .reputon-star-rating .reputon-reviews-count {display: none;}


Change widget color
/* color rating stars */
.reputon-google-reviews-widget .reputon-star-rating .reputon-rating-stars {color: pink;}
/* color rating counter */
.reputon-google-reviews-widget .reputon-star-rating .reputon-rating-count {color: pink;}
/* color reviews counter */
.reputon-google-reviews-widget .reputon-star-rating .reputon-reviews-count {color: pink;}


Change direction
.reputon-google-reviews-widget .reputon-star-rating .reputon-review-badge {flex-direction: column;}
Move widget
/* move to the start of the block */
.reputon-google-reviews-widget {justify-content: flex-start !important;}
.reputon-google-reviews-widget .reputon-star-rating {margin: 0 !important;}
/* move to the end of the block */
.reputon-google-reviews-widget {justify-content: flex-end !important;}
.reputon-google-reviews-widget .reputon-star-rating {margin: 0 !important;}
/* move to center of the block */
.reputon-google-reviews-widget {justify-content: center !important;}
.reputon-google-reviews-widget .reputon-star-rating {margin: 0 !important;}



Hide widget on mobile
@media (max-width: 460px) {
.reputon-google-reviews-widget .reputon-star-rating.reputon-reviews-holder {display: none;}}Apply black-and-white filter

.reputon-google-reviews-widget .reputon-star-rating {filter: grayscale(100%);}Have questions or need help with CSS? We're excited to help at support@reputon.com or live chat.
Last updated
Was this helpful?