# Cards widget

### Change rating color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards .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%2FAJlSLx6Zqxd6IAJBcm8i%2Fimage.png?alt=media&#x26;token=5f2096d6-467b-495c-b4c2-79575a959244" alt=""><figcaption></figcaption></figure>

***

### Change name color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards .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%2FacElqxiRccI06Mv4JWK9%2Fimage%201.png?alt=media&#x26;token=5101c3fe-36b6-48de-8c49-8ad084592e5f" alt=""><figcaption></figcaption></figure>

***

### Change caption color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards .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%2FKdaDlYnDOkeMv1SqtzGG%2Fimage%202.png?alt=media&#x26;token=c82169e1-6bc8-483d-8bb5-30235e2994b7" alt=""><figcaption></figcaption></figure>

***

### Change review text color

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

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2F8JPDNoJvaosUPoSiXy5B%2Fimage%203.png?alt=media&#x26;token=b54148ad-a948-4fe2-aa3b-984d3dfbfa03" alt=""><figcaption></figcaption></figure>

***

### Change border width, style and color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards .reputon-card .reputon-top-part {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%2FpgS4vbUEE7sa15t8QDIA%2Fimage%204.png?alt=media&#x26;token=45dbd14c-6f84-4492-bf7c-f74fda9e0d60" alt=""><figcaption></figcaption></figure>

***

### Change review card background color

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards .reputon-card .reputon-top-part {background: skyblue;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FFFoWPJVtuXGMBhccVhjt%2Fimage%205.png?alt=media&#x26;token=a59d9ea4-3146-4467-ac13-8a835267d6de" alt=""><figcaption></figcaption></figure>

***

### Change widget font

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards {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%2FIOjHY8aRHHMLTe9RU73z%2Fimage%206.png?alt=media&#x26;token=39910495-ec86-43d6-a237-f2c1089bdf4a" alt=""><figcaption></figcaption></figure>

***

### Hide customer name

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

***

### Hide caption

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

***

### Hide logo

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

***

### Always open reviews

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards .reputon-show-more 
{display: none;}
.reputon-testimonials-widget .reputon-cards .reputon-text-holder 
{-webkit-line-clamp: unset;mask-image: none;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FEIg976eUd1MoJ0foGkii%2Fimage%2010.png?alt=media&#x26;token=13dbdd0c-7946-4282-9f24-38baaa982614" alt=""><figcaption></figcaption></figure>

***

### Change “Show more” button

{% code overflow="wrap" %}
```css
/* change color */
.reputon-testimonials-widget .reputon-cards .reputon-show-more {color: red;}

/* change underline */
.reputon-testimonials-widget .reputon-cards .reputon-show-more span {text-decoration: none;}

/* change font */
.reputon-testimonials-widget .reputon-cards .reputon-show-more span {font-family: Comic Sans MS;}
```
{% endcode %}

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2F9xxac0h5AJOXXHFgPuHm%2Fimage%2011.png?alt=media&#x26;token=bd414660-74a6-4acf-a7e4-449feefae2dd" alt=""><figcaption></figcaption></figure>

***

### Change “Leave a Review” button

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

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

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

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

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

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

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2Fz98cov56tAwaGJpZwNDr%2Fimage%2012.png?alt=media&#x26;token=658d63c0-3ee8-4619-aafb-a1f4584dadbb" alt="" width="563"><figcaption><p>сhange color</p></figcaption></figure>

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FMOFex9U6uHVnm9L22LRc%2Fimage%2013.png?alt=media&#x26;token=c0200ff7-618f-455a-aa9e-f91cc833b168" alt="" width="563"><figcaption><p>сhange text</p></figcaption></figure>

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FPQWyqGM3NpNJHoHHTIPp%2Fimage%2014.png?alt=media&#x26;token=f8eb948f-f59f-46a7-9739-ce43c636d9d4" alt="" width="563"><figcaption><p>remove button</p></figcaption></figure>

***

### Change widget max-width

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

***

### Add margin above widget

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

***

### Add margin below widget

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

***

### **Hide widget on mobile**

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

***

### Color the widget

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

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

<figure><img src="https://3014174194-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXxxLc2Plpb5kH3bviCm%2Fuploads%2FgIl1xraSdiCOW9e6jQrH%2Fimage%2016.png?alt=media&#x26;token=8c5f9e26-7fb8-4e46-8848-ebd4f3112469" alt=""><figcaption></figcaption></figure>

***

### Apply black-and-white filter

{% code overflow="wrap" %}
```css
.reputon-testimonials-widget .reputon-cards 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%2FIfcMgcJCjgAg8pjenYIF%2Fimage%2017.png?alt=media&#x26;token=938cad82-583e-4162-80aa-a43586d878b6" 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)**.**
