# Rotator widget (variant)

## Change rating color

{% code overflow="wrap" %}

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

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

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

/* сhange header rating counter color */
.reputon-google-reviews-widget .reputon-rotator.reputon-count-number {color: green;}

/* сhange header rating stars color */
.reputon-google-reviews-widget .reputon-rotator .reputon-count-text {color: green;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FTUwyP2hajtWpICgbbYi5%2Fimage.png?alt=media&#x26;token=223b945f-3498-4ba0-a180-650b622c884e" alt=""><figcaption></figcaption></figure>

***

## Change name color

{% code overflow="wrap" %}

```css
/* change name color */
.reputon-google-reviews-widget .reputon-rotator .reputon-name {color: red;}

/* change reviews name only */
.reputon-google-reviews-widget .reputon-rotator .swiper-horizontal .reputon-name {color: red;}

/* change header name only */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-name {color: red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FGArM07vbZlYeZCY7lWmK%2Fimage.png?alt=media&#x26;token=470655bd-1f4d-40c4-8512-ff23c3f46d07" alt=""><figcaption></figcaption></figure>

***

## Change review text color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-text,
.reputon-google-reviews-widget .reputon-rotator .reputon-text p {color: red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FfDKOTcvvrPE6PMMpqe7K%2Fimage.png?alt=media&#x26;token=4a4a76a2-e6a4-426a-ac94-8f4f5e72cc0d" alt=""><figcaption></figcaption></figure>

***

## Change publishing date color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-date {color: red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2Fa3CiCHNOlLTtT91nHtEt%2Fimage.png?alt=media&#x26;token=7a558517-93e5-4b50-8295-da1bf68235c3" alt=""><figcaption></figcaption></figure>

***

## Change reviews counter color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-count {color: red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2Fok8DaKTOn1uoaLViNS29%2Fimage.png?alt=media&#x26;token=666713ce-0608-44e6-87ed-7b0d17995822" alt=""><figcaption></figcaption></figure>

***

## Change **border width, style and color**

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-top-part {border: 3px solid red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FKcC43BiTc0U2nuSMKHgP%2Fimage.png?alt=media&#x26;token=ac3d860f-f1d4-4f7d-984d-b73b2d159a43" alt=""><figcaption></figcaption></figure>

***

## Change review card background color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-top-part {background: #eed5d5;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FdzgrT6pPqUTv8C5GuaFf%2Fimage.png?alt=media&#x26;token=7b44eef0-d773-4c4e-bb7a-caefb33cfff1" alt=""><figcaption></figcaption></figure>

***

## Change header **border width, style and color**

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head {border: 3px solid red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2Fd9oKzSAnDXMzNM7A5bYv%2Fimage.png?alt=media&#x26;token=77ec6fb9-c281-43d1-844e-462e83a8cd68" alt=""><figcaption></figcaption></figure>

***

## Change header background color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head {background: #eed5d5;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FbcGLDXxOK9AjXY3pdU1D%2Fimage.png?alt=media&#x26;token=a8561fce-aaf5-4ba8-af57-99068d6a1460" alt=""><figcaption></figcaption></figure>

***

## Change “Leave a Review” button

{% code overflow="wrap" %}

```css
/* regular state background color */
.reputon-google-reviews-widget .reputon-rotator.reputon-leave-review {background: purple;}

/* regular state text color */
.reputon-google-reviews-widget .reputon-rotator .reputon-leave-review {color: #fff;}

/* borders */
.reputon-google-reviews-widget .reputon-rotator .reputon-leave-review {border: 3px solid ;}

/* hover, active states color */
.reputon-google-reviews-widget .reputon-rotator .reputon-leave-review:hover,
.reputon-google-reviews-widget .reputon-rotator .reputon-leave-review:not([disabled]):active,
.reputon-google-reviews-widget .reputon-rotator .reputon-leave-review:not([disabled]):active 
{color: #fff; background: brown;}

/* customize text */
.reputon-google-reviews-widget .reputon-rotator .reputon-leave-review.editable:after {content: 'your text';} 

/* 'load more' button font */
.reputon-google-reviews-widget .reputon-rotator 
.reputon-leave-review {font-family: Comic Sans MS;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FOnMb901eloA1p71K8hx9%2Fimage.png?alt=media&#x26;token=706fdfbc-cf0d-4f00-94c9-99d7d1cdf60b" alt=""><figcaption></figcaption></figure>

***

## Change “Verified” icon color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-verified-icon {color: red;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F4svqGnlILFHB0e96MNUF%2Fimage.png?alt=media&#x26;token=dd99cc86-b311-4e62-b321-68731ed6a9ec" alt=""><figcaption></figcaption></figure>

***

## Change widget font

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-carousel-container {font-family: Comic Sans MS;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FG1Pd4LyGW9Q1MCQhxQRg%2Fimage.png?alt=media&#x26;token=e95350af-c93b-4712-9bd3-ba9803cd6b85" alt=""><figcaption></figcaption></figure>

***

## Change navigation arrows

{% code overflow="wrap" %}

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

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

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

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

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

```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FPpghEcnOJI78ngzXNfV1%2Fimage.png?alt=media&#x26;token=ff9ad63c-9c38-4b63-bcbf-edfe0993f3c1" alt=""><figcaption></figcaption></figure>

***

## **Center header content**

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-content {align-items: center;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FpvOcCpKPWHomLToznaTv%2Fimage.png?alt=media&#x26;token=3ecd013f-d009-4f3e-bb4f-fa46191a3533" alt=""><figcaption></figcaption></figure>

***

## Hide customer avatar

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-single-review .reputon-image {display: none;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F1KhvVT18kxKhGOrajiVY%2Fimage.png?alt=media&#x26;token=dd6afb9b-4b3e-4a99-beb4-6aef8f632e73" alt=""><figcaption></figcaption></figure>

***

## Hide customer name

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-single-review .reputon-name {display: none;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F3imandvi4Zk7oujyDrBb%2Fimage.png?alt=media&#x26;token=cd3bf569-f48b-4a50-97b8-1ebe46529545" alt=""><figcaption></figcaption></figure>

***

## Hide review posting date

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-date {display: none;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F5UNe9zzxEDo2OjB9gB3z%2Fimage.png?alt=media&#x26;token=351240ea-ff76-45e3-b84e-2b48d2be8127" alt=""><figcaption></figcaption></figure>

***

## Remove “Show more” button (Open all reviews)

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-show-more {display: none;}
.reputon-google-reviews-widget .reputon-rotator .reputon-text
{-webkit-line-clamp: unset; mask-image: none;}
```

{% endcode %}

***

## Change “Show more” button

{% code overflow="wrap" %}

```css
/* change color */
.reputon-google-reviews-widget .reputon-rotator .reputon-show-more span {color: red;}

/* remove underline */
.reputon-google-reviews-widget .reputon-rotator .reputon-show-more span {text-decoration: none;}

/* change font */
.reputon-google-reviews-widget .reputon-rotator .reputon-show-more span {font-family: Comic Sans MS;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F1TtJOo38Iorp9gIyQdrW%2Fimage.png?alt=media&#x26;token=ea2fccdd-de57-4771-aa11-6b893cf3a425" alt=""><figcaption></figcaption></figure>

***

## **Hide header content**

{% code overflow="wrap" %}

```css
/* hide entire header (use option Header position - hidden instead) */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head {display: none;}

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

/* hide seller name */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-name {display: none;}

/* hide rating */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-rating-stars {display: none;}

/* hide rating counter */
.reputon-google-reviews-widget .reputon-rotator.reputon-reviews-head .reputon-rating-stars .reputon-count-number {display: none;}

/* hide rating stars */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-rating-stars .reputon-count-text {display: none;}

/* hide seller avatar */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-image {display: none;}

/* hide 'leave a review' button */
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head .reputon-leave-review {display: none;}
```

{% endcode %}

***

## Remove reviews

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-carousel-holder {display: none !important;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FSL4AfHlwOzVmzjRH7JtZ%2Fimage.png?alt=media&#x26;token=f0e9cae2-b028-46b4-8d65-12183f8543a4" alt=""><figcaption></figcaption></figure>

***

## Add margin above widget

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-carousel-container {margin-top: 100px;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FfbxJfOTG8ooPobQs85EW%2Fimage.png?alt=media&#x26;token=e5c59107-7057-47b4-a066-c81d1f8a3679" alt=""><figcaption></figcaption></figure>

***

## Add margin below widget

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-carousel-container {margin-bottom: 100px;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2Fkxs6xPTYBTMlBFOxjow4%2Fimage.png?alt=media&#x26;token=3d1cd7c3-9978-4955-ac63-d84b6459093f" alt=""><figcaption></figcaption></figure>

***

## Change widget width

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget[data-type="carousel"] {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FiapVpSoLKvR6cfaNFyE8%2Fimage.png?alt=media&#x26;token=5b201a02-4b84-49a5-816d-52cffd18213a" alt=""><figcaption></figcaption></figure>

***

## **Hide widget on mobile**

{% code overflow="wrap" %}

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

{% endcode %}

***

## **Move header below widget**

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-reviews-head {order: 2;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F2tuiHlizxeKGc3DqDCIb%2Fimage.png?alt=media&#x26;token=00b16f61-d9bb-47b3-bff6-d5ba224094da" alt=""><figcaption></figcaption></figure>

***

## Change widget color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator {
  background: bisque;}

/* 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-rotator) {background: bisque;}
</style> 
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2Fa9DzMIeoYa4ll94AlsMp%2Fimage.png?alt=media&#x26;token=8b852727-8772-448e-b24e-4160f74749cd" alt=""><figcaption></figcaption></figure>

***

## Hide Google logo from reviews

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-review-logo {display: none;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FyNxDr2xsW5kFhwnZxBAw%2Fimage.png?alt=media&#x26;token=959ee169-19cd-4f56-8fc4-ee3051db6492" alt=""><figcaption></figcaption></figure>

***

## Change seller name (only supported for "all" locations)

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-rotator .reputon-info .reputon-name:after {
  content: ‘your name’;
}
```

{% endcode %}

***

## Change top part of reviews

{% code overflow="wrap" %}

```css
/* hide top part */
.reputon-google-reviews-widget .reputon-rotator .reputon-single-review 
.reputon-review-header {display: none;}

/* move to the bottom */
.reputon-google-reviews-widget .reputon-rotator .reputon-single-review .reputon-review-header {order: 5;}
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FNx4YWNUtiKdUNVm2FJ1h%2Fimage.png?alt=media&#x26;token=b9422442-7eaf-4e55-8e98-064990baa534" alt=""><figcaption></figcaption></figure>

***

## Apply black-and-white filter

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2Fo3tX8SBwg2i4y5aU5eAB%2Fimage.png?alt=media&#x26;token=12ef298e-402e-4ac8-bcde-43245a083dc2" alt=""><figcaption></figcaption></figure>

***

**Have questions or need help with CSS?** **We're excited to help at** [**support@reputon.com**](mailto:support@reputon.com) **or** [**live chat**](https://go.crisp.chat/chat/embed/?website_id=d24ef16e-6e05-49e9-bd59-a6f3bde0658a)**.**