Changelog

Small/minimized compact rating widget

Remove widget elements

/* remove logo */
.reputon-facebook-reviews-widget .reputon-small .reputon-image {display: none;}

/* remove rating count */
.reputon-facebook-reviews-widget .reputon-small .reputon-rating-count {display: none;}

/* remove rating stars */
.reputon-facebook-reviews-widget .reputon-small .reputon-rating-stars {display: none;}

/* remove reviews count */
.reputon-facebook-reviews-widget .reputon-small .reputon-reviews-count {display: none;}
rating counter
rating stars
reviews counter
logo

Change widget main color

.reputon-facebook-reviews-widget .reputon-small .reputon-container {color: red;}

Change reviews count color

.reputon-facebook-reviews-widget .reputon-small .reputon-reviews-count {color: red;}

Apply black-and-white filter

.reputon-facebook-reviews-widget .reputon-small {filter: grayscale(100%);}

Center content

.reputon-facebook-reviews-widget .reputon-small .reputon-content {align-items: center;}

Change background color

.reputon-facebook-reviews-widget .reputon-small .reputon-container {background: antiquewhite;}
.reputon-facebook-reviews-widget .reputon-small .reputon-bt-close {background: antiquewhite;}

/* change color on element hover. */
.reputon-facebook-reviews-widget .reputon-small .reputon-container:hover {abackground: wheat;}

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

Move the widget

/* move to block start */
.reputon-facebook-reviews-widget .reputon-small {
	display: flex !important;
	justify-content: flex-start !important;
	margin:  !important0;}

/* move to block center*/
.reputon-facebook-reviews-widget .reputon-small {
	display: flex !important;
	justify-content: center !important;
	margin: 0 !important;}

/* move to block end */
.reputon-facebook-reviews-widget .reputon-small {
	display: flex !important;
	justify-content: flex-end !important;
	margin: 0 !important;}

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

Questions about CSS or need assistance? We're excited to help: support@reputon.com or live chat.

PreviousCompact/sticky compact rating widgetNextCompact slider/sticky compact slider widget

Last updated

Was this helpful?