Overview
The Avatar Slider widget displays each testimonial one at a time in a sliding format, placing the reviewer’s avatar image prominently at the center of the card alongside their name, role, and review text. Because the avatar and star rating appear together as the visual focal point of each slide, the color of those stars has a direct impact on how polished and on-brand the widget looks as visitors move through your reviews.
Feedspace gives you two separate color controls for the star icons in your Avatar Slider widget: Star Rating Color, which sets the fill color of the stars, and Star Rating Border Color, which sets the outline or border color around each star. Using both together lets you create a solid filled star, a hollow outlined star, or a combination that fits your site’s color palette. These options are found in the Widget Color Customization section of the Design tab.
How to Change the Star Rating Color for Your Avatar Slider Widget
Step 1: Open the Widgets Section
Log in to your Feedspace account. In the left-hand navigation, click Widgets to open your list of saved widgets.
Step 2: Edit Your Avatar Slider Widget
Find the Avatar Slider widget you want to update. Click the edit icon or the widget name to open the widget editor.
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 the Avatar Slider, including colors, fonts, and layout settings.
Step 4: Locate the Widget Color Customization Section
Scroll down within the Design tab until you reach the Widget Color Customization section. This section groups all color pickers for the Avatar Slider widget in one place.
Step 5: Set the Star Rating Color and Star Rating Border Color
You will see two color pickers in this section:
- Star Rating Color: Click this picker to choose the fill color of the star icons. This is the main color that fills the inside of each star shape.
- Star Rating Border Color: Click this picker to choose the outline or border color drawn around each star icon. Setting this to a contrasting color makes the stars stand out against both light and dark backgrounds.
Click each color picker, choose your desired color using the color palette or by entering a hex code, then click outside the picker to confirm your selection. The widget preview will update in real time so you can see how the star colors look within the sliding avatar layout before you save.
Step 6: Save Your Changes
Once you are satisfied with both star color selections, click Save to apply the changes. Your Avatar Slider widget will immediately reflect the updated star colors everywhere it is embedded on your site.
What You Can Do Next
- Show or hide the star rating display on your Avatar Slider widget entirely using the visibility toggle in the Design tab.
- Adjust other color settings in the Widget Color Customization section, such as the card background color and reviewer name color, to create a fully cohesive Avatar Slider design.
- Preview how the updated star colors look across different slides in the Avatar Slider by cycling through the testimonial cards in the live preview panel.
- Copy the embed code for your Avatar Slider widget and place it on your website to display the freshly styled testimonials with your new star rating colors.
You might also find helpful
How Do I Show or Hide Star Ratings on My Avatar Slider Widget in Feedspace?
Overview The Avatar Slider widget displays your testimonials in a sliding format that places each reviewer’s avatar prominently at the center of the card, with their review text and details arranged around it. Because the avatar and reviewer identity are the visual anchors of each slide, the star rating sits...
How to Create an Avatar Slider Widget in Feedspace
Overview The Avatar Slider widget in Feedspace displays one review at a time with a reviewer’s avatar, name, and feedback. It includes smooth sliding transitions and navigation arrows for switching between reviews. This layout is ideal for minimal testimonial sections that highlight one review prominently. How to Access Step 1...
How Do I Customize the Design of My Widget in Feedspace?
Overview Feedspace widgets come with a powerful Design tab that lets you tailor every visual aspect of your widget. From card colors and fonts to dark mode and call-to-action buttons, you can fully customize the look to match your website’s brand without writing any code. How to Customize the Widget...