Gallery widget

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

Change rating color

/* сhange rating color */
.reputon-google-reviews-widget .reputon-gallery .reputon-rating-stars {color: green;}

/* сhange modal rating color */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-rating-stars {color: green;}

---

Change name color

/* change reviews name only */
.reputon-google-reviews-widget .reputon-gallery .reputon-name p {color: red;}

/* change popup name only */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-name {color: red;}

---

Change popup review text color

.reputon-google-reviews-widget.gallery-reviews-popup .reputon-review {color: red;}

---

Change publishing date color

/* change publishing card date only */
.reputon-google-reviews-widget .reputon-gallery .reputon-date {color: red;}

/* change publishing popup date only */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-date {color: red;}

---

Change border width, style and color

/* reviews border*/
.reputon-google-reviews-widget .reputon-gallery .reputon-gallery-card {border: 3px solid red;}

---

Change popup review card background color

/* change popup background info container only */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-popup-info-card {background: pink;}

/* change popup background image container only */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-container {background: pink;}

---

Change “Verified” icon color

.reputon-google-reviews-widget.gallery-reviews-popup .reputon-verified-icon {color: red;}

---

Change widget font

/* change card font only */
.reputon-google-reviews-widget .reputon-gallery .reputon-info-bar {font-family: Comic Sans MS;}

/* change popup background image container only */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-popup-info-card {font-family: Comic Sans MS;}

---

Change review text font

.reputon-google-reviews-widget.gallery-reviews-popup .reputon-review {font-family: Comic Sans MS;}

---

Hide customer avatar

/* hide card avatar */
.reputon-google-reviews-widget .reputon-gallery .reputon-avatar {display: none;}

/* hide popup avatar */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-avatar {display: none;}

---

Hide customer name

/* hide card customer name */
.reputon-google-reviews-widget .reputon-gallery .reputon-name {display: none;}

/* hide popup customer name */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-name {display: none;}

---

Hide review posting date

/* hide card posting date */
.reputon-google-reviews-widget .reputon-gallery .reputon-date {display: none;}

/* hide popup posting date */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-date {display: none;}

---

Add margin above widget

.reputon-google-reviews-widget .reputon-gallery {margin-top: 100px !important;}

---

Add margin below widget

.reputon-google-reviews-widget .reputon-gallery {margin-bottom: 100px !important;}

---

Change style of info card

/* change blur */
.reputon-google-reviews-widget .reputon-gallery .reputon-info-bar 
{backdrop-filter: blur(10px);}

/* change background color */
.reputon-google-reviews-widget .reputon-gallery .reputon-info-bar 
{background: blue;}

---

Hide info card

.reputon-google-reviews-widget .reputon-gallery .reputon-info-bar 
{display: none;}

---

Change navigation arrows

/* change button size */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-next,  
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-prev {min-width: 80px; height: 80px;}

/* change arrows size (change buttons size too) */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-next svg,  
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-prev svg {min-width: 80px; height: 80px;}

/* hide arrows */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-next,  
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-prev {display: none;}

/* hide arrows only on mobile */
@media(max-width: 760px) {
	.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-next,  
	.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-prev 
	{display: none;}}

/* color arrows */
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-next,  
.reputon-google-reviews-widget.gallery-reviews-popup .reputon-swiper-button-prev {color: red; background: yellow;}

---

Adjust widget width

.reputon-google-reviews-widget {max-width: 400px;}

---

Hide widget on mobile

@media (max-width: 460px) { 
	.reputon-google-reviews-widget {display: none; }}

---

Apply black-and-white filter

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

---

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