How Do I Change the Star Rating Color on My Masonry Widget in Feedspace?

Overview

The Masonry widget displays your reviews in a Pinterest-style staggered grid, arranging cards across multiple columns of varying heights so visitors can scan many testimonials at once. Because the layout is visually dense, every design detail, including the star rating icons, contributes to the overall impression your social proof makes.

Feedspace gives you two dedicated color pickers inside Widget Color Customization for the Masonry widget: Star Rating Color, which controls the fill color of the star icons, and Star Rating Border Color, which controls the outline around each star. Adjusting both values lets you keep the rating icons consistent with your brand palette across every card in the grid, whether you prefer bold, high-contrast stars that draw the eye or subtler tones that blend with your site theme.

How to Change the Star Rating Color for Your Masonry Widget

Step 1: Open the Widgets Section

Log in to your Feedspace account and navigate to the Widgets section from the left-hand sidebar. This is where all your saved widgets are listed, including any Masonry widgets you have already created.

Step 2: Edit Your Masonry Widget

Find the Masonry widget you want to update and click the Edit button (pencil icon) next to it. The widget editor will open, showing all configuration options for that widget.

Step 3: Go to the Design Tab

Inside the widget editor, click the Design tab at the top of the panel. This tab contains all visual customization options for your Masonry widget, including layout, typography, and color settings.

Step 4: Find the Widget Color Customization Section

Scroll down within the Design tab until you reach the Widget Color Customization section. This section groups all color controls for the Masonry widget together in one place.

Step 5: Set the Star Rating Color and Star Rating Border Color

You will see two color pickers relevant to star ratings:

• Star Rating Color: Click the color swatch to open the picker and choose the fill color for the star icons. This is the main body color visible inside each star across every review card in the Masonry grid.
• Star Rating Border Color: Click the second color swatch to set the outline color that appears around each star icon. This lets you add contrast or a subtle border that complements the fill color.

After selecting your colors, click Save to apply the changes. The updated star colors will appear across all review cards displayed in your Masonry widget’s staggered grid.

What You Can Do Next

• Show or hide star ratings entirely on your Masonry widget to control whether the rating icons appear in the grid at all.
• Explore other color options in the Widget Color Customization section, such as card background and text colors, to create a fully cohesive look across every card in the Masonry layout.
• Preview your Masonry widget on your live page after saving to confirm the star colors look correct at different column widths and on both desktop and mobile viewports.
• Create a second Masonry widget with a different color scheme for a seasonal campaign or a specific landing page, keeping your main widget unchanged.