# Masonry widget

## Change rating color

{% code overflow="wrap" %}

```css
/* сhange header rating stars color */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-count-text {color: purple;}

/* сhange header rating counter color */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-count-number {color: purple;}

/* сhange reviews rating color */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-single-review .reputon-rating-stars {color: purple;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2Fp5uuFSnhkYPnsiwW3P3m%2Fimage.png?alt=media&#x26;token=f8d13bc6-ca41-42ba-ac9b-93f95018cf39" alt=""><figcaption><p>Header rating stars</p></figcaption></figure>

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FPNrRWMJr5M0wdCrvZMYH%2Fimage.png?alt=media&#x26;token=fc2798cb-a649-4c2e-8b0a-63c4fd9723e2" alt=""><figcaption><p>Header rating counter</p></figcaption></figure>

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FDQX8pi0mHaqCFCw5uCAm%2Fimage.png?alt=media&#x26;token=d25f3cc6-3803-4207-b75b-7c6e75f8ade9" alt=""><figcaption><p>Review stars</p></figcaption></figure>

***

## Change name color

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-name {color: green;}

/* change reviews name only*/
.reputon-facebook-reviews-widget .reputon-masonry .reputon-body .reputon-name {color: green;}

/* change header name only*/
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-name {color: green;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FFadGDgxQmnsBk91SBZrJ%2Fimage.png?alt=media&#x26;token=034254f0-4305-4481-8450-2034fde15b00" alt=""><figcaption></figcaption></figure>

***

## Change review text color

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-text {color: green;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FubziFbU34yvhFplOX4d6%2Fimage.png?alt=media&#x26;token=80a09663-1c2d-41de-a1f8-70524c894e50" alt=""><figcaption></figcaption></figure>

***

## Change publishing date color

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-date {color: green;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2F3Ap7WYSHQl75n3AI3KKo%2Fimage.png?alt=media&#x26;token=6b38de00-ba10-4ea4-8415-06cb67e60164" alt=""><figcaption></figcaption></figure>

***

## Change reviews counter color

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-reviews-count {color: green;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FPWvisUCugQWi4kc5yMll%2Fimage.png?alt=media&#x26;token=f02b813a-55c8-49dd-9b31-2c96b075f231" alt=""><figcaption></figcaption></figure>

***

## Change **border style and color**

{% code overflow="wrap" %}

```css
/* change reviews border only */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-top-part {border: 3px solid #2fd45d;}

/* change header border only */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head {border: 3px solid red;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FF17L5Zb3n5aNakG6hJRP%2Fimage.png?alt=media&#x26;token=d554ac6b-2a5b-4ff8-9f42-91ea68650753" alt=""><figcaption><p>Reviews border color</p></figcaption></figure>

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FwySUjL07TrZri52K7mGW%2Fimage.png?alt=media&#x26;token=3cf7e877-3086-417a-8ce5-cbb208ee9902" alt=""><figcaption><p>Header border color</p></figcaption></figure>

***

## Change background color

{% code overflow="wrap" %}

```css
/* change header background only*/
.reputon-facebook-reviews-widget .reputon-masonry .reputon-top-part {background: lightpink;}

/* change reviews background only*/
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head {background: lightpink;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FEadRooRysNk3mf3MfAq8%2Fimage.png?alt=media&#x26;token=434011b2-f3b4-413a-99cc-e2b57d75f8f6" alt=""><figcaption><p>Reviews background</p></figcaption></figure>

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FrrcMzwlhqJiZzJLwZlq1%2Fimage.png?alt=media&#x26;token=61db51bf-addd-44b2-9d58-d6343f6e42c5" alt=""><figcaption><p>Header background</p></figcaption></figure>

***

## Change “Leave a Review” button color

{% code overflow="wrap" %}

```css
/* regular state */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review {background: purple !important;}

/* regular state text color */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review {color: #fff !important;}

/* borders */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review { border: 3px solid red;}

/* hover, active states */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review:hover,
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review:not([disabled]):active,
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review:not([disabled]):active {color: #fff;background: #269e26;}

/* 'leave a review' button text */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review.editable:after {content: 'your text';}

/* 'leave a review' button font */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-leave-review {font-family: Comic Sans MS !important;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2F6ZGuGTChOqJOWhegiwAz%2Fimage.png?alt=media&#x26;token=98a2e58a-7eb4-41c6-bbba-b0454d37b600" alt=""><figcaption></figcaption></figure>

***

## Change “Load more” button color

{% code overflow="wrap" %}

```css
/* regular state */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more {background: purple !important;}

/* regular state text color */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more {color: #fff !important;}

/* borders */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more {border: 3px solid red;}

/* hover, active states */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more:hover,
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more:not([disabled]):active,
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-moret:not([disabled]):active {color: #fff;background: #269e26;}

/* 'load more' button text */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more.editable:after {content: 'your text';}

/* 'load more' button font */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-load-more.editable:after {font-family: Comic Sans MS !important;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2Fq8hBXnnuVXVIlBAprShC%2Fimage.png?alt=media&#x26;token=88d9fd9d-bf3f-4ede-813e-417a2318e408" alt=""><figcaption></figcaption></figure>

***

## Change “Verified” icon color

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-verified-icon {color: green;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2Fz24zJmbERavGGnFdo5Ci%2Fimage.png?alt=media&#x26;token=957bcc4d-c9c2-4ed7-8d48-ef225b675f8e" alt=""><figcaption></figcaption></figure>

***

## Change Rating text color (Recommends...)

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-feedback-text {color: pink;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2Fu2LVOlzn7IF6wn2k4hNO%2Fimage.png?alt=media&#x26;token=3c714880-6139-4f3e-8e80-745de7e7d9c8" alt=""><figcaption></figcaption></figure>

***

## Change Rating icon color (Recommends...)

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-feedback-icon g {color: purple !important;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FuuDReyZiJrBtiohW3egI%2Fimage.png?alt=media&#x26;token=1e924f64-2abc-486c-a98c-a12f5379d94a" alt=""><figcaption></figcaption></figure>

***

## Change widget font

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry {font-family: Comic Sans MS !important;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2F5PBXPgbYiG460fwMFhoW%2Fimage.png?alt=media&#x26;token=3ef90fcb-ee46-455d-8899-e2caffdfafc4" alt=""><figcaption></figcaption></figure>

***

## Hide customer avatar

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FMyjfIDn8hRbScMRDGX3U%2Fimage.png?alt=media&#x26;token=1797598e-a8c3-4b44-a85d-d05e71b5e3c3" alt=""><figcaption></figcaption></figure>

***

## Hide customer name

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2F84njHzGEtpI7eODQ9a6h%2Fimage.png?alt=media&#x26;token=7644d6e0-e357-447a-b34f-c5c768bdd4f9" alt=""><figcaption></figcaption></figure>

***

## Hide "Recommends" text

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-single-review 
.reputon-feedback-text {display: none;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FvNHWwtPiu0qrgOqAFdz3%2Fimage.png?alt=media&#x26;token=d056bf46-f0e9-4ebe-a5a3-3a814e974aaa" alt=""><figcaption></figcaption></figure>

***

## Hide "Recommends" icon

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-single-review 
.reputon-feedback-icon {display: none;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FTXJPAb11lCXYxI5BCNuW%2Fimage.png?alt=media&#x26;token=f95173b6-d151-41b8-b8b8-d0c1ba949f02" alt=""><figcaption></figcaption></figure>

***

## Hide review posting date

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry .reputon-date {display: none;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FsXOerEUTghzmgx3qavrY%2Fimage.png?alt=media&#x26;token=15271a1a-b738-40fa-be9c-483078256a62" alt=""><figcaption></figcaption></figure>

***

## **Hide header content**

{% code overflow="wrap" %}

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

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

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

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

/* hide rating counter in header */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-count-number {display: none;}

/* hide rating stars in header */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-count-text {display: none;}

/* hide seller avatar */
.reputon-facebook-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-image {display: none;}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FNIQHG5wf0pdKs5MU2RBe%2Fimage.png?alt=media&#x26;token=4fa9b504-8845-4859-98c2-3b42de9b983e" alt=""><figcaption></figcaption></figure>

***

## Add margin above widget

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry {margin-top: 100px !important;}
```

{% endcode %}

***

## Add margin below widget

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry {margin-bottom: 100px !important;}
```

{% endcode %}

***

## Adjust widget width

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget[data-type=masonry] {max-width: 400px !important;}
```

{% endcode %}

***

## **Hide widget on mobile**

{% code overflow="wrap" %}

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

{% endcode %}

***

## Color the widget

{% code overflow="wrap" %}

```css
.reputon-facebook-reviews-widget .reputon-masonry {
  background: bisque;}

/* Add this code to theme.liquid to change the widget section color. */
<style> 
section:has(.reputon-facebook-reviews-widget .reputon-masonry) {background: bisque;}
</style>
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FlATRVqGr9FImrqYA7cx9%2Fimage.png?alt=media&#x26;token=a225c3ea-3093-44ca-a3e1-b0254905ae03" alt=""><figcaption></figcaption></figure>

***

## Apply black-and-white filter

{% code overflow="wrap" %}

```css
/* on photo */
.reputon-facebook-reviews-widget .reputon-masonry img {filter: grayscale(100%);}
	
/* on widget */
.reputon-facebook-reviews-widget .reputon-masonry {filter: grayscale(100%);}
```

{% endcode %}

<figure><img src="https://653954620-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FifT0qawdDvZWopFXGPuq%2Fuploads%2FRhUEgMJc0lZJXSwBwmTF%2Fimage.png?alt=media&#x26;token=1d6b635c-c940-4928-ac10-45eaa83d4172" 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)**.**