# Carousel widget (Header position - in card)

## Change rating color

{% code overflow="wrap" %}

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

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

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

/* сhange header rating stars color */
.reputon-google-reviews-widget .reputon-carousel .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%2FVz4vAaxDTaYDXbGMo0wc%2Fimage.png?alt=media&#x26;token=4c3ae901-00e7-4d3e-aba1-8da95b569194" alt=""><figcaption></figcaption></figure>

***

## Change name color

{% code overflow="wrap" %}

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

/* change reviews name only */
.reputon-google-reviews-widget .reputon-carousel .reputon-review-header .reputon-name {color: red;}

/* change header name only */
.reputon-google-reviews-widget .reputon-carousel .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%2FRLeKpjrJnaFSkn3SevJJ%2Fimage.png?alt=media&#x26;token=319252ff-bc6b-4291-9964-263d753ea4ef" alt=""><figcaption></figcaption></figure>

***

## Change review text color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .reputon-text,
.reputon-google-reviews-widget .reputon-carousel .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%2FT3zK51aCUo8dSQoSD1tC%2Fimage.png?alt=media&#x26;token=554074fe-792f-4525-a1ce-df8320951a58" alt=""><figcaption></figcaption></figure>

***

## Change publishing date color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FbCvBcs0nCevjTJ7DHLNr%2Fimage.png?alt=media&#x26;token=b59021a5-b8d8-4c73-b91b-1e36254cc78d" alt=""><figcaption></figcaption></figure>

***

## Change reviews counter color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2Fd3wxeMv6FlslX6ZBb4St%2Fimage.png?alt=media&#x26;token=44aa8453-fd90-4fe3-a54c-b9a73b172886" alt=""><figcaption></figcaption></figure>

***

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

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2F7C5v8D1gqo6yUCudB7m6%2Fimage.png?alt=media&#x26;token=12c04b28-4d2d-4ee6-a278-8ea3a238d207" alt=""><figcaption></figcaption></figure>

***

## Change review card background color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FafKCBfce6rPWiOQw6Lnu%2Fimage.png?alt=media&#x26;token=a74cab83-b930-4b62-b211-b61f62e10258" alt=""><figcaption></figcaption></figure>

***

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

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2Fwy8gu5RvdK8dNLIoMuce%2Fimage.png?alt=media&#x26;token=dd9a4036-0114-4857-b34c-2700d43ffac4" alt=""><figcaption></figcaption></figure>

***

## Change header background color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FhHKODTXa4GmOhlZJCB38%2Fimage.png?alt=media&#x26;token=61cbb930-ad4e-42e0-a185-0226d8c7d9dc" alt=""><figcaption></figcaption></figure>

***

## Change “Leave a Review” button

{% code overflow="wrap" %}

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

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

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

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

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

/* 'load more' button font */
.reputon-google-reviews-widget .reputon-carousel 
.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%2FIeksABzi5MrjPKDPWAHd%2Fimage.png?alt=media&#x26;token=fe214156-9876-4d0d-90dc-e7903f82655d" alt=""><figcaption></figcaption></figure>

***

## Change “Verified” icon color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FnL6qP2Fdoz2Mv5j4dh7T%2Fimage.png?alt=media&#x26;token=169fd41c-c310-438c-a73f-fa026470ea7b" alt=""><figcaption></figcaption></figure>

***

## Change widget font

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2F7Cy5JHlpxpngwuuwd3BH%2Fimage.png?alt=media&#x26;token=a03977fc-91ed-4217-b66a-485cd753a758" alt=""><figcaption></figcaption></figure>

***

## Change navigation arrows

{% code overflow="wrap" %}

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

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

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

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

/* color arrows */
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-google-reviews-widget .reputon-carousel .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%2FRsq1evfJxwfvhO7yRtH9%2Fimage.png?alt=media&#x26;token=db612b77-c3ef-484d-a653-436094d798ad" alt=""><figcaption></figcaption></figure>

***

## Hide customer avatar

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .reputon-single-review .reputon-review-header .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%2Fuq1BBCo6aDeN5UfNAZku%2Fimage.png?alt=media&#x26;token=ea78825f-139a-42db-9e75-5e17a95dc2bb" alt=""><figcaption></figcaption></figure>

***

## Hide customer name

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .reputon-single-review .reputon-review-header  .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%2FWvJdhFHpq8LHlLTtT28P%2Fimage.png?alt=media&#x26;token=9f352154-3464-45cf-913b-8267fa3b0d96" alt=""><figcaption></figcaption></figure>

***

## Hide review posting date

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FxsUQzjyRt8moblFEOWSq%2Fimage.png?alt=media&#x26;token=5078f492-1642-4b60-bbc5-20f078a6592d" alt=""><figcaption></figcaption></figure>

***

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

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F18hoJc48HpAnITL5sLnC%2Fimage.png?alt=media&#x26;token=ac20c608-1c23-481f-9e10-5976a807f25d" alt=""><figcaption></figcaption></figure>

***

## Change “Show more” button

{% code overflow="wrap" %}

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

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

/* change font */
.reputon-google-reviews-widget .reputon-carousel .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%2FEeEnywCETHeaMJpUrIf4%2Fimage.png?alt=media&#x26;token=fa864151-7ce4-45e2-8155-611838e6d51d" alt=""><figcaption></figcaption></figure>

***

## **Hide header content**

{% code overflow="wrap" %}

```css
/* hide entire header */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head {display: none;}

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

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

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

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

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

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

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

{% endcode %}

***

## Add margin above widget

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FxhVQI1jUsB028UtuPb7d%2Fimage.png?alt=media&#x26;token=ade6507a-823d-4794-9755-45ff28303fb9" alt=""><figcaption></figcaption></figure>

***

## Add margin below widget

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2Fr83zNDxPE7ArH6boQ2F7%2Fimage.png?alt=media&#x26;token=91b95f22-dad7-46d7-a4fe-f2934240e64b" 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%2FhYLtmYCiO1PemykYU6Bp%2Fimage.png?alt=media&#x26;token=f510f844-d5d9-45b9-9bf3-0cb8c69fa2fd" alt=""><figcaption></figcaption></figure>

***

## **Hide widget on mobile**

{% code overflow="wrap" %}

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

{% endcode %}

***

## Change widget color

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel {
  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-carousel) {background: bisque;}
</style> 
```

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2FOJcdUoXSwGPnRQ1IZDUi%2Fimage.png?alt=media&#x26;token=c47d255e-0825-4c71-9ebd-b4ed87f0d037" alt=""><figcaption></figcaption></figure>

***

## Hide Google logo from reviews

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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%2FqXf2IwsxBCjEYOmT1um6%2Fimage.png?alt=media&#x26;token=c4a3163a-2be8-49c3-9954-1fe696961438" alt=""><figcaption></figcaption></figure>

***

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

{% code overflow="wrap" %}

```css
.reputon-google-reviews-widget .reputon-carousel .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-carousel .reputon-single-review 
.reputon-review-header {display: none;}

/* move to the bottom */
.reputon-google-reviews-widget .reputon-carousel .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%2FHAYXM0yBeMIXiVUhZcpL%2Fimage.png?alt=media&#x26;token=1ac360e1-670d-4220-9e6f-220f1b803711" alt=""><figcaption></figcaption></figure>

***

## Apply black-and-white filter

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://3311081497-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRkZZ4LuP4fAqhhizix17%2Fuploads%2F2EbPFW0kPGE7CKW859Ef%2Fimage.png?alt=media&#x26;token=bf16d90a-0422-413e-900f-2203fe64d837" 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)**.**