# Masonry CSS codes

## Change rating color

{% code overflow="wrap" %}

```css
/* сhange the color of the header rating */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-rating-stars {color: green;}

/* сhange the color of the header rating counter */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-count-number {color: green;}

/* сhange the color of the header rating stars */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-count-text {color: green;}
  
/* сhange the color of the review rating */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-single-review .reputon-rating-stars {color: green;}
```

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FT5o9cQBovh1hLZ7L7a21%2FScreenshot%20from%202025-10-07%2017-18-39.png?alt=media&#x26;token=c3c0eb13-6251-4b9c-a27a-46fc2d17f745" alt=""><figcaption><p>header rating</p></figcaption></figure>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FFC2zlyYr8ev4BrDxxVnr%2FScreenshot%20from%202025-10-07%2017-20-11.png?alt=media&#x26;token=39eb40d3-2940-4076-98b6-a3841808e905" alt=""><figcaption><p>header counter</p></figcaption></figure>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FPuTQEU3Wli49YkFCVy7u%2FScreenshot%20from%202025-10-07%2017-20-55.png?alt=media&#x26;token=2e4a0093-737c-447b-af99-d4834caa2c0c" alt=""><figcaption><p>header stars</p></figcaption></figure>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FzDFHZ7xpBLbDkMc5145q%2FScreenshot%20from%202025-10-07%2017-21-33.png?alt=media&#x26;token=fe3be3f3-9f6f-4e9c-816a-d466ad1ff7fa" alt=""><figcaption><p>review rating</p></figcaption></figure>

***

## Change name color

{% code overflow="wrap" %}

```css
/* change name */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-name {color: green;}

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

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

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FmPly4gOIt2TQi3ziJhmu%2FScreenshot%20from%202025-10-07%2017-22-36.png?alt=media&#x26;token=5255ff0b-3932-41a1-9e49-ec7fbdbbd210" alt=""><figcaption><p>change name color</p></figcaption></figure>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FuS0hDOJ859Kg6BCXmkBv%2FScreenshot%20from%202025-10-07%2017-23-13.png?alt=media&#x26;token=0c6c02a9-57c6-4b46-9fbd-f63da66f5e97" alt=""><figcaption><p>change reviews name</p></figcaption></figure>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FfdkIpUTFta4c05RDEnxg%2FScreenshot%20from%202025-10-07%2017-23-59.png?alt=media&#x26;token=e4093811-0ed8-4c0f-8745-1517360c7241" alt=""><figcaption><p>change header name</p></figcaption></figure>

***

## Change review text color

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FKubZrNiu7b14OeUXLh62%2FScreenshot%20from%202025-10-07%2017-24-45.png?alt=media&#x26;token=43cb8cfd-b0b5-43f2-9e7d-bc5f786e3f27" alt=""><figcaption></figcaption></figure>

***

## Change publishing date color

<pre class="language-css" data-overflow="wrap"><code class="lang-css"><strong>.reputon-amazon-reviews-widget .reputon-masonry .reputon-date {color: green;}
</strong></code></pre>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FMeGBN73afzQL72ZpHp9i%2FScreenshot%20from%202025-10-07%2017-25-28.png?alt=media&#x26;token=5372fd99-47a7-4ed9-bef0-d04fc7458ca6" alt=""><figcaption></figcaption></figure>

***

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

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FGqO1RBgyT90ijrx1dSLR%2FScreenshot%20from%202025-10-07%2017-26-21.png?alt=media&#x26;token=4d878c48-a72a-422e-822c-08da25355f11" alt=""><figcaption></figcaption></figure>

***

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

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2F9c4acLibnyGqroDCrslt%2FScreenshot%20from%202025-10-07%2017-27-10.png?alt=media&#x26;token=d033028b-93ed-4d52-a7ca-97fe68a7661f" alt=""><figcaption></figcaption></figure>

***

## Change review card background color

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry .reputon-top-part {background: lightblue;}
```

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FfoJBmWIil8EfcWdpGB5j%2FScreenshot%20from%202025-10-07%2017-27-50.png?alt=media&#x26;token=20dd3c66-1729-40b0-8127-995d03260c87" alt=""><figcaption></figcaption></figure>

***

## Change header background color

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head {background: lightblue;}
```

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FM6mRHA3SJByKVueu9Jti%2FScreenshot%20from%202025-10-07%2017-28-23.png?alt=media&#x26;token=dac99362-4dee-421d-92bf-9ef4b77b78c3" alt=""><figcaption></figcaption></figure>

***

## Change “Verified” icon color

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry .reputon-verified-icon {color: pink;}
```

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FmrlVOb0QIwad0y7XU72w%2FScreenshot%20from%202025-10-07%2017-29-02.png?alt=media&#x26;token=c491dd01-3ef6-4ff2-ad53-5bcbc7e2074c" alt=""><figcaption></figcaption></figure>

***

## Change widget font

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry, 
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {font-family: Comic Sans MS !important;}
```

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FcoNUFCWVyqPWgFehlbgC%2FScreenshot%20from%202025-10-07%2017-29-56.png?alt=media&#x26;token=ead6c4aa-ddff-47a7-8fe2-56f9b0303514" alt=""><figcaption></figcaption></figure>

***

## Hide customer name

{% code overflow="wrap" %}

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

{% endcode %}

***

## Hide review posting date

{% code overflow="wrap" %}

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

{% endcode %}

***

## Hide review rating stars

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry .reputon-card .reputon-rating-stars {display: none;}
```

{% endcode %}

***

## Hide verified icons

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry .reputon-verified {display: none;}
```

{% endcode %}

***

## ‘Load more’ button

{% code overflow="wrap" %}

```css
/* hide button */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {display: none}

/* change text color */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {display: none;}

/* change background color */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {background: beige;}

/* change font */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {font-family: Comic Sans MS;}

/* change width */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {
  width: 200px;
  justify-content: center;}

/* change height */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-load-more {
  height: 50px;
  align-items: center;}

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

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2F31auSwf8gZPQDkrXE8Ew%2Fimage%2019.png?alt=media&#x26;token=4b858be9-99fe-45b0-a708-deea7458c629" alt=""><figcaption></figcaption></figure>

***

## **Hide header content**

{% code overflow="wrap" %}

```css
/* hide amazon logo */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-image {display: none;}
  
/* hide seller name */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-name {display: none;}

/* hide rating */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-rating-stars {display: none;}
  
/* hide rating counter */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-count-number {display: none;}
  
/* hide rating stars */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-count-text {display: none;}
  
/* hide reviews counter */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-head .reputon-reviews-count {display: none;}
```

{% endcode %}

***

## Change image counter

{% code overflow="wrap" %}

```css
/* change color */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-card .reputon-reviews-image-container::after {color: red;}

/* change background */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-card .reputon-reviews-image-container::after {background: #ff00005e;}
```

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FGRCXHa6PGwmfPuO8zecf%2Fimage%2026.png?alt=media&#x26;token=5b21f4c6-1931-4128-83d2-a0836ee02f24" alt=""><figcaption><p>change color</p></figcaption></figure>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2F3I6e3JQoFjGHgOCRUt5W%2Fimage%2027.png?alt=media&#x26;token=0242e4c2-4f50-42cd-a87b-3c05d46bd889" alt=""><figcaption><p>change background</p></figcaption></figure>

***

## Add margin above widget

{% code overflow="wrap" %}

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

{% endcode %}

***

## Add margin below widget

{% code overflow="wrap" %}

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

{% endcode %}

***

## **Hide header content**

{% code overflow="wrap" %}

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

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

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

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

/* hide logo */
.reputon-amazon-reviews-widget .reputon-masonry .reputon-reviews-head .reputon-image {display: none;}
```

{% endcode %}

***

## Change widget width

{% code overflow="wrap" %}

```css
.reputon-amazon-reviews-widget .reputon-masonry {max-width: 400px !important;}
```

{% endcode %}

***

## **Hide widget on mobile**

{% code overflow="wrap" %}

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

{% endcode %}

***

## Color the widget

<pre class="language-css" data-overflow="wrap"><code class="lang-css"><strong>.reputon-amazon-reviews-widget .reputon-masonry {
</strong>  background: bisque;}

/* Add the code to theme.liquid to change the widget section color. */
&#x3C;style> 
	section:has(.reputon-amazon-reviews-widget .reputon-masonry) {background: bisque;}
&#x3C;/style> 
</code></pre>

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2FN303K8UgtStxmq13KffT%2FScreenshot%20from%202025-10-07%2018-17-39.png?alt=media&#x26;token=6fa041be-05e4-4883-828d-499f3d40967e" alt=""><figcaption></figcaption></figure>

***

## Apply black-and-white filter

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://2570869450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcbBR7zDPyn6rZIX2IflI%2Fuploads%2F84iKcpmUUX3LwXq0nIV3%2FScreenshot%20from%202025-10-07%2018-18-38.png?alt=media&#x26;token=b79bff56-d99e-4947-a163-c60adf37e0ff" 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)**.**