Rating badge medium /sticky compact rating widget

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

Change rating color

.reputon-google-reviews-widget .reputon-basic .reputon-rating-stars {color: #2fd45d;}

---

Change name color

.reputon-google-reviews-widget .reputon-basic .reputon-name {color: #2fd45d;}

---

Change reviews counter color

.reputon-google-reviews-widget .reputon-basic .reputon-reviews-count {color: #2fd45d;}

---

Change widget font

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

---

Center content

.reputon-google-reviews-widget .reputon-basic .reputon-content {align-items: center;}
.reputon-google-reviews-widget .reputon-basic .reputon-name {text-align: center;}

---

Center review counter

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

---

Center business name

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

---

Center rating

.reputon-google-reviews-widget .reputon-basic .reputon-rating-stars {align-self: center;}

---

Adjust widget size

.reputon-google-reviews-widget .reputon-basic .reputon-badge .reputon-content {padding: 2px;}

/* logo */
.reputon-google-reviews-widget .reputon-basic .reputon-badge .reputon-image {
  width: 25px;
  height: 25px;
  min-width: 25px;}

/* text */
.reputon-google-reviews-widget .reputon-basic .reputon-badge .reputon-name {
  font-size: 12px;
  line-height: 16px;}

/* stars-text */
.reputon-google-reviews-widget .reputon-basic .reputon-badge .reputon-rating-stars 
.reputon-count-number {
  font-size: 12px;
  margin-right: 2px;}

/* stars */
.reputon-google-reviews-widget .reputon-basic .reputon-badge .reputon-rating-stars svg {
  width: 12px;
  height: 12px;
  margin-right: 2px;}

/* change container width */
.reputon-google-reviews-widget .reputon-basic .reputon-badge .reputon-container {
	width: 160px;
	min-width: 160px;}

---

Hide widget element

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

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

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

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

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

---

Add margin above widget

.reputon-google-reviews-widget .reputon-basic .reputon-badge {margin-top: 100px;}

---

Add margin below widget

.reputon-google-reviews-widget .reputon-basic .reputon-badge {margin-bottom: 100px;}

---

Change top line color

.reputon-google-reviews-widget .reputon-basic .reputon-badge:before {background: red;}

---

Move the widget

/* move to the start of the block */
.reputon-google-reviews-widget {
	justify-content: flex-start !important;}
.reputon-google-reviews-widget .reputon-basic {margin: 0 !important;}

/* move to the end of the block */
.reputon-google-reviews-widget {justify-content: flex-end !important;}
.reputon-google-reviews-widget .reputon-basic {margin: 0 !important;}

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

---

Apply black-and-white filter

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

---

Change background color

.reputon-google-reviews-widget .reputon-basic .reputon-container {background: antiquewhite;}
.reputon-google-reviews-widget .reputon-basic .reputon-bt-close {background: antiquewhite;}

/* change color when hover at element */
.reputon-google-reviews-widget .reputon-basic .reputon-container:hover {background: wheat;}

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

---

Change widget

.reputon-google-reviews-widget .reputon-basic .reputon-info {padding: 0;}
.reputon-google-reviews-widget .reputon-basic .reputon-content {width: auto;}
.reputon-google-reviews-widget .reputon-basic .reputon-badge {box-shadow: none;}
.reputon-google-reviews-widget .reputon-basic .reputon-badge:before {content: none;}
.reputon-google-reviews-widget .reputon-basic .reputon-name,
.reputon-google-reviews-widget .reputon-basic .reputon-reviews-count {display: none;}
.reputon-google-reviews-widget .reputon-basic .reputon-image {order:2; width: 25px; height: 25px; min-width: 25px;}
.reputon-google-reviews-widget .reputon-basic .reputon-container {width: auto; min-width: initial;}
.reputon-google-reviews-widget .reputon-basic .reputon-count-number {order:2; margin-right: 0;}
.reputon-google-reviews-widget .reputon-basic .reputon-rating-stars {gap:10px; color: #eda755;}

---

Have questions or need help with CSS? We're here to help: [e-mail] or live chat