How to customize the review widget appearance with CSS?

In this article you will learn about the following:

• Stable selectors (public contract)
• Where to start if you are writing CSS for the first time
• Examples of selector usage
  • Example 1. Match the widget to your site font and background
  • Example 2. Review cards: border, rounded corners, soft shadow
  • Example 3. Cards without borders, separated by a line
  • Example 4. Rating stars in your brand color
  • Example 5. Author name and review text
  • Example 6. Buttons in your brand color, with hover
  • Example 7. Outline-style buttons (no fill)
  • Example 8. Dark theme
  • Example 9. Compact view (more reviews on screen)
  • Example 10. Mobile adaptation
  • Example 11. Trim long reviews to 4 lines
  • Example 12. Ready-made kit for your brand style
• Prompt for generating CSS

---

 

Stable selectors (public contract)

 

The widget is built of blocks nested one inside another: the outer frame of the widget, review cards inside it, and inside every card the stars, the author name and the text. For the browser to understand which exact block you want to restyle, every block has a name tag. That name is called a class, and the way to refer to it is called a selector.

The seven selectors in the table below are called stable, because they will stay unchanged in future updates of the widget. Your CSS written against them will keep working. CSS written against any other name tag may stop working after the next update - the widget will simply fall back to its default look, and no error message will be shown.

 

Selector	Element	What it is usually used for
.rw-container	Root container of the widget	font, padding, width
.rw-review-card	A single review card	background, border, rounded corners, shadow
.rw-rating	Rating block (stars + date) inside the card	star color, size, spacing
.rw-review-author	Name of the review author	weight, size, color
.rw-review-text	Review text	size, line spacing, color
.rw-button	Interactive buttons: "Leave a review", carousel arrows, "Read more"	color, rounded corners, border
[data-rw-branding]	BrandWizard branding / "powered by"	must not be changed, such rules are stripped out

 

The last row differs from the others: it is written in square brackets instead of starting with a dot, because the branding is marked with a special attribute rather than an ordinary class. It is listed in the table not to be used, but to make clear that any rule targeting it will be discarded on save.

 

---

 

Where to start if you are writing CSS for the first time?

 

1. Take the example from the section below that is closest to the look you want and paste it in full into the Custom CSS field.
2. Watch the live preview next to the field: the result is visible right away, you do not have to save to check it.
3. Change one value at a time - color, size, corner radius - and keep an eye on the preview. That way it is immediately clear which line does what.
4. A rule you do not need can simply be deleted: whatever you remove goes back to the default look of the widget.
5. If nothing works out - clear the field completely, and the widget returns to its original design.

Colors are written as codes like #0057ff (this is a hexadecimal code, you can pick one in any online color picker or get it from your designer), sizes are in pixels: 16px.

 

---

 

Examples of selector usage

 

All the examples below work as they are, you can paste them into the field in full or piece by piece.

 

Example 1. Match the widget to your site font and background

 

.rw-container { 
font-family: Arial, Helvetica, sans-serif; 
background: #f7f8fa; 
padding: 24px; 
}

 

Example 2. Review cards: border, rounded corners, soft shadow

 

.rw-review-card {  
background: #ffffff;  
border: 1px solid #e5e7eb;  
border-radius: 12px;  
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);  
padding: 20px;  
margin-bottom: 16px; 
}

 

 

Example 3. Cards without borders, separated by a line

 

 

.rw-review-card {  
background: transparent;  
border: none;  
border-radius: 0;  
box-shadow: none;  
border-bottom: 1px solid #ececec;  
padding: 16px 0; 
}

 

Example 4. Rating stars in your brand color

 

.rw-rating {  
color: #ff6b00;  
font-size: 18px;  
margin-bottom: 8px; 
}

 

 

Example 5. Author name and review text

 

.rw-review-author {  
font-weight: 700;  
font-size: 15px;  
color: #1a1a1a; 
} 
.rw-review-text {  
font-size: 15px;  
line-height: 1.6;  
color: #4a4a4a; 
}

 

 

Example 6. Buttons in your brand color, with hover

 

.rw-button {  
background: #0057ff;  
color: #ffffff;  
border: none;  
border-radius: 8px;  
padding: 10px 20px;  
font-weight: 600;  
cursor: pointer;  
transition: background 0.15s ease; 
} 
.rw-button:hover {  
background: #0044cc; 
}

 

Example 7. Outline-style buttons (no fill)

 

.rw-button { 
background: transparent; 
color: #0057ff; 
border: 1px solid #0057ff; 
border-radius: 8px; 
padding: 9px 19px; 
} 
.rw-button:hover { 
background: #0057ff; 
color: #ffffff; 
}

 

 

Example 8. Dark theme

 

 

.rw-container {  
background: #14161a;  
font-family: "Segoe UI", Roboto, Arial, sans-serif; 
} 
.rw-review-card {  
background: #1e2126;  
border: 1px solid #2c3138;  
border-radius: 10px; 
} 
.rw-review-author {  
color: #ffffff; 
} 
.rw-review-text {  
color: #b8bec7; 
} 
.rw-rating {  
color: #ffc107; 
} 
.rw-button {  
background: #2c3138;  
color: #ffffff;  
border: 1px solid #3a4048;  
border-radius: 8px; 
} 
.rw-button:hover {  
background: #3a4048; 
}

 

 

Example 9. Compact view (more reviews on screen)

 

 

.rw-review-card {  
padding: 12px;  
margin-bottom: 8px;  
border-radius: 6px; 
} 
.rw-review-text {  
font-size: 13px;  
line-height: 1.45; 
} 
.rw-rating {  
font-size: 14px;  
margin-bottom: 4px; 
}

 

 

Example 10. Mobile adaptation

 

 

@media (max-width: 600px) {  
.rw-container {    
padding: 12px;  
}  
.rw-review-card {    
padding: 14px; 
}  
.rw-review-text {    
font-size: 14px;  
}  
.rw-button {    
width: 100%;    
padding: 12px;  
} 
 }

 

 

Example 11. Trim long reviews to 4 lines

 

 

.rw-review-text {  
display: -webkit-box;  
-webkit-line-clamp: 4;  
-webkit-box-orient: vertical;  
overflow: hidden; 
}

 

 

Example 12. Ready-made kit for your brand style (assembled from the examples above)

 

 

Just change the three colors at the top: your main brand color, the star color and the text color.

.rw-container {  
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
background: #ffffff;  
padding: 20px; 
} 
.rw-review-card {  
background: #fbfbfd;  
border: 1px solid #e8e8ef;  
border-radius: 14px;  
box-shadow: 0 1px 4px rgba(20, 20, 40, 0.05);  
padding: 20px;  
margin-bottom: 14px; 
} 
.rw-rating {  
color: #f5a623;  
font-size: 17px;  
margin-bottom: 10px; 
} 
.rw-review-author {  
font-weight: 600;  
font-size: 15px;  
color: #14142b; 
} 
.rw-review-text {  
font-size: 15px;  
line-height: 1.65;  
color: #4e4b66; 
} 
.rw-button {  
background: #6c3ce9;  
color: #ffffff;  
border: none;  
border-radius: 10px;  
padding: 11px 22px;  
font-weight: 600;  
cursor: pointer; 
} 
.rw-button:hover {  
background: #5a2fd0; 
}

 

---

 

 

Prompt for generating CSS

 

 

If you do not want to write the CSS yourself, you can take the prompt below, paste it into any AI assistant (ChatGPT, Claude, Gigachat and so on), add your own wishes in free form at the end and get a ready block to paste into the Custom CSS field.

The prompt already contains both the list of selectors and all the widget restrictions, so the result is CSS that will not break the widget.

 

An example of filling in the last block:

My styling wishes: main brand color #0057ff, orange stars, white cards with 12px rounded corners and a soft shadow, a sans-serif font, buttons with rounded corners filled with the brand color, and on mobile the button takes the full width.