# Customer story widget

### Change rating color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-rating-stars {color: dodgerblue;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2F7GpxuPmcBozJFgCV23KZ%2Fimage.png?alt=media&#x26;token=8cfb8e97-73c1-40cb-b020-cb19d5462b8e" alt=""><figcaption></figcaption></figure>

***

### Change name color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-name {color: red;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FHZpJnjFrz0K9birFojxi%2Fimage%201.png?alt=media&#x26;token=ccc1a350-22d0-4442-82f1-f1ecfad21e5e" alt=""><figcaption></figcaption></figure>

***

### Change caption color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-caption {color: red;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FK9hseGyqflY9QP1XX1yM%2Fimage%202.png?alt=media&#x26;token=5554cd6c-61d3-47bf-a731-87c43ba67f8e" alt=""><figcaption></figcaption></figure>

***

### Change review text color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-text {color: dodgerblue;}
```
{% endcode %}

***

### Change border width, style and color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-slider-container {border: 3px solid orange;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FCGhLIWCOpMS61tRQ8xId%2Fimage%204.png?alt=media&#x26;token=3013a2ea-408d-4da2-b9a2-47af68c95e5b" alt=""><figcaption></figcaption></figure>

***

### Change review card background color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-review-container {background: skyblue;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2Fb1q1ZoNbRRpyI9ZUKjXd%2Fimage%205.png?alt=media&#x26;token=73c4a5bd-ba49-4fec-90f3-f323158bb29b" alt=""><figcaption></figcaption></figure>

***

### Change widget font

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story {font-family: 'Comic Sans MS' !important;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FBvDkxOqRX12C6dsUcdSB%2Fimage%206.png?alt=media&#x26;token=7c7a7ba5-dd2a-4f5c-865b-b89964a46a42" alt=""><figcaption></figcaption></figure>

***

### Change navigation arrows

{% code overflow="wrap" %}
```css
/* change size */
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-next,  
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-prev {min-width: 80px;height: 80px;}

/* hide arrows */
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-next,  
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-prev {display: none;}

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

/* color arrows */
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-next,  
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-prev {color: red;}

/* move arrows (use negative numbers to position higher) */
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-next,  
.reputon-testimonials-widget .reputon-customer_story .reputon-swiper-button-prev {margin: 200px;}
```
{% endcode %}

***

### Hide customer name

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-single-review .reputon-name {display: none;}
```
{% endcode %}

***

### Hide caption

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-single-review .reputon-caption {display: none;}
```
{% endcode %}

***

### Hide logo

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-single-review .reputon-logo {display: none;}
```
{% endcode %}

***

### Change “Leave a Review” button

{% code overflow="wrap" %}
```css
/* regular state color */
.reputon-testimonials-widget .reputon-customer_story .reputon-leave-review {color: #fff; background: red;}

/* borders */
.reputon-testimonials-widget .reputon-customer_story .reputon-leave-review {border: 3px solid red;}

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

/* customize text */
.reputon-testimonials-widget .reputon-customer_story .reputon-leave-review.editable:after {content: 'your text';} 

/* 'load more' button font */
.reputon-testimonials-widget .reputon-customer_story
.reputon-leave-review.editable:after {font-family: Comic Sans MS;}

/* remove button */
.reputon-testimonials-widget .reputon-customer_story .reputon-leave-review {display: none;}
```
{% endcode %}

***

### Change widget max-width

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story {max-width: 600px !important;}
```
{% endcode %}

***

### Change widget height

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story .reputon-slider-container {height: 300px !important;}
```
{% endcode %}

***

### Add margin above widget

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story {margin-top: 200px !important;}
```
{% endcode %}

***

### Add margin below widget

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story {margin-bottom: 200px !important;}
```
{% endcode %}

***

### **Hide widget on mobile**

{% code overflow="wrap" %}
```css
@media (max-width: 460px) { 
	.reputon-testimonials-widget .reputon-customer_story { 
		display: none !important;}}
```
{% endcode %}

***

### Color the widget

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story {
  background: bisque;}

/* To change the widget section color, add this code to theme.liquid */
<style> 
section:has(.reputon-testimonials-widget .reputon-customer_story) {background: bisque;}
</style> 
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FB8FD0amQyKTVl9CMxBgh%2Fimage%2018.png?alt=media&#x26;token=03f725d6-2590-44d1-9da5-3d8bd659803a" alt=""><figcaption></figcaption></figure>

***

### Apply black-and-white filter

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-customer_story img {filter: grayscale(100%);}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2F58w1DeStEO9LLi7UhHcQ%2Fimage%2019.png?alt=media&#x26;token=2300fc05-ae4d-476f-8c1f-04fd78a2bb67" alt=""><figcaption></figcaption></figure>

***

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