Compact/sticky compact rating widget

Customize your Facebook Reviews compact/sticky compact widget with CSS. Change colors, fonts, layout, arrows, and more to match your website design.

Change rating color

/* сhange header rating stars color */
.reputon-facebook-reviews-widget .reputon-basic .reputon-rating-stars .reputon-count-text {color: red;}

/* сhange header rating counter color */
.reputon-facebook-reviews-widget .reputon-basic .reputon-rating-stars .reputon-count-number {color: red;}

Rating stars

Rating counter

---

Change name color

.reputon-facebook-reviews-widget .reputon-basic .reputon-content .reputon-name {color:red;}

---

Change reviews counter color

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

---

Change widget font

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

---

Center review counter

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

---

Center rating name

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

---

Center Content

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

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

---

Hide widget element

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

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

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

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

/* remove shadow */
.reputon-facebook-reviews-widget .reputon-basic .reputon-badge {box-shadow: none;}

Hide top border

---

Add margin above widget

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

---

Add margin below widget

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

---

Change top border color

.reputon-facebook-reviews-widget .reputon-basic .reputon-badge {border-color: pink;}

---

Move the widget

/* move block start  */
.reputon-facebook-reviews-widget .reputon-basic {
	margin-left: 0 !important;}

/* move block center */
.reputon-facebook-reviews-widget .reputon-basic {
	margin: 0 !important;}

/* move to the end of the block */
.reputon-facebook-reviews-widget .reputon-basic {
	margin-right: 0 !important;}

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

---

Apply black-and-white filter

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

---

Change background color

.reputon-facebook-reviews-widget .reputon-basic .reputon-container {background: antiquewhite !important;}

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

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

---

Have questions or need help with CSS? Contact us at [e-mail] or live chat