Can I Match My Widget Colors to My Website Brand?

Overview

Your testimonial widgets should feel like a natural part of your website, not a third-party add-on. Feedspace gives you comprehensive color controls so you can align every element of your widget with your brand identity. This article walks you through all the color options available and shows you how to achieve a pixel-perfect match.

How to Match Your Widget Colors to Your Brand

The Widget Color Customization section lives inside the Design tab of the widget editor. Open your widget, click Design, and scroll down to find the full set of color pickers. Each picker accepts a hex code, so you can paste values directly from your brand style guide for an exact match.

Color Controls Available

The Design tab gives you individual control over every visual layer of the card:

• Card background color: Set the fill color for each testimonial card.
• Primary text color: Controls the reviewer name and main testimonial body text.
• Secondary text color: Controls supporting text such as the date or reviewer title.
• Star rating color: Choose the filled-star color to match your accent palette.
• Card border color: Set the outline color of each card.
• Card shadow color: Adjust the drop shadow to complement your background.

Entering Exact Brand Hex Codes

Click any color picker and type or paste your hex code directly into the input field. This ensures the widget uses precisely the same values as the rest of your site, with no approximation from dragging a color swatch.

Dark Mode for Dark-Themed Sites

If your website uses a dark background, enable the Dark Mode toggle in the Design tab. Feedspace automatically applies a coordinated dark palette across all widget elements, saving you the work of manually adjusting every color for a dark layout.

Pixel-Perfect Control with Custom CSS

For advanced styling needs, the Custom CSS option (available on premium plans) lets you override any widget style with your own CSS rules. This is ideal when you need to match a highly specific design system, adjust spacing, or apply styles that go beyond the built-in color pickers.

What You Can Do Next

• Open the Design tab on any widget and paste your brand hex codes into the card background and text color pickers to see the change instantly.
• Enable Dark Mode in the Design tab if your site uses a dark theme, so all widget colors adapt automatically.
• Use the Custom CSS option (premium) to write targeted CSS rules for any style not covered by the built-in pickers.
• Check the related articles below for step-by-step guides on changing card background color, text color, and applying custom CSS to your widgets.