Changelog

Compact slider/sticky compact slider widget

Change rating color

.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-info .reputon-rating-stars {color: red;}

Change name color

/* change info slide only */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-info .reputon-name {color: red;}

/* change review slides only */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-slide-container .reputon-name {color: red;}

Change reviews counter color

.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-info 
.reputon-reviews-count {color: red;}

Change widget font

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

Center review counter

.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-reviews-count {align-self: center;}

Center rating name

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

Center rating

/* change info slide only */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-info .reputon-name {text-align: center;}
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-info .reputon-content {align-items: center;}

/* change review slides only */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-slide-container .reputon-top-part {justify-content: center;}
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-slide-container .reputon-content {align-items: center;}

Hide widget element

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

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

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

/* hide top border */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-badge:before {content: none;}

/* remove shadow */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-badge {box-shadow: none;}
reviews counter
logo
name
top border
shadow

Add margin above widget

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

Add margin below widget

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

Change top border color

.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-badge:before {background: pink;}

Move the widget

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

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

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

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

Apply black-and-white filter

/* on photo */
.reputon-facebook-reviews-widget .reputon-basic-slide {filter: grayscale(100%);}

Change background color

.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-slide {background: antiquewhite;}
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-bt-close {background: antiquewhite;}

/* change color on element hover */
.reputon-facebook-reviews-widget .reputon-basic-slide .reputon-container:hover .reputon-slide {background: wheat;}

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

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

PreviousSmall/minimized compact rating widget

Last updated

Was this helpful?