The Designer

Customise how Trustie looks on your site — colours, star ratings, borders, shadows — all without writing a line of code.

Why This Matters

Your reviews should look like they belong on your site. If they look bolted on or clash with your brand colours, visitors notice — and it undermines the trust you’re trying to build.

Trustie’s Designer gives you full control over appearance with a live preview, so you can see exactly how things will look before saving anything.

What You’ll Need

• Trustie installed and active
• About 2 minutes (seriously — the Designer does most of the work for you)

—

The Designer

Where: Trustie > Designer (or Tracksies > Designer if you have the full suite)

Everything you need to customise Trustie’s appearance lives here. As you make changes, a live preview updates in real-time — nothing saves until you click the Save button, so experiment freely.

—

Automatic Theme Integration

Here’s the clever bit: Trustie reads your theme’s colours and fonts automatically.

When you first activate Trustie, the Designer picks up your theme’s colour palette and pre-fills the colour settings. Your theme’s body and heading fonts are applied to all Trustie output — review cards, testimonial grids, the floating widget, forms — everything uses your existing fonts straight away.

The result is that Trustie looks like it was built into your theme from day one, not parachuted in from somewhere else. Most sites won’t need to change a thing in the Designer.

How It Works

• Colours: Trustie reads your theme’s colour values, then maps them to the Designer’s colour fields. Open the Designer and you’ll see your theme colours already filled in — ready to copy, paste, or tweak.
• Fonts: Your theme’s body font and heading font are automatically applied to all Trustie output. There’s nothing to configure — if your theme uses Inter for body text and Playfair Display for headings, Trustie uses those too.
• Font refresh: If you change themes or update your theme’s fonts, Trustie picks up the new fonts automatically. To force an immediate refresh, visit any page on your site with ?tracksies_refresh_fonts=1 added to the URL (you need to be logged in as admin).

If You Want to Customise Further

The automatic integration is a starting point. Everything the Designer detects can be overridden — change your primary colour, adjust star colours, tweak the border radius. The live preview shows your changes instantly.

—

Colours

Brand Colours

These are the core colours that Trustie uses throughout your site.

• Primary Colour: Your main brand colour — used for buttons, links, focus indicators, and accents
• Text Colour: The colour of review content and headings
• Light Text: Secondary text like dates and meta information
• Surface Colour: Background colour for review cards and forms
• Border Colour: Subtle lines around inputs and cards

Star Rating Colours

Stars are often the most visible part of your reviews. Make them stand out.

• Filled Stars: The colour of earned stars — classic gold, your brand colour, or anything you like
• Empty Stars: The colour of un-earned stars — usually a subtle grey

Widget Colours

The floating widget tab and panel use your brand colours by default. You can customise:

• Tab Background: The colour of the clickable tab on the side of your screen
• Tab Text: Text colour on the tab

If you’re using Trustie Pro, you get additional widget-specific colour controls (separate header background, header text, etc.).

—

Borders & Shadows

This is where you control the visual depth and style of your review cards.

Border Radius

How rounded do you want your corners?

• 0px: Sharp, square corners — modern and clean
• 4–8px: Subtly rounded — the sweet spot for most designs
• 12–16px: Noticeably rounded — friendly and approachable
• 20px+: Very rounded — playful and casual

Drop Shadows

Shadows make cards appear to “float” above the page.

• Enable Shadows: That modern floating-card look
• Disable Shadows: Flat design — cards sit flush with the page

Tip: If your theme already uses a lot of shadows, you might want to disable Trustie’s shadows to avoid visual clutter.

Hover Effects

When visitors hover over review cards, should they respond?

• Enable Hover: Cards lift slightly and the shadow deepens — feels interactive and polished
• Disable Hover: Cards stay put — cleaner, especially on mobile-focused sites

—

Live Preview

As you make changes in the Designer, the preview panel updates in real-time. You’ll see:

• How review cards look with your colours and borders
• Star ratings in your chosen colours
• Form styling with your inputs
• Widget appearance with your brand colours

Play around! Nothing saves until you click the Save button, so experiment freely.

—

Quick Presets

Not sure where to start? Here are some popular combinations:

Modern Minimal

• Border radius: 8px
• Shadows: Off
• Hover effects: Off
• Use your theme’s existing colours

Friendly & Warm

• Border radius: 16px
• Shadows: On (subtle)
• Hover effects: On
• Warm star colour (#FFB347)

Bold & Professional

• Border radius: 4px
• Shadows: On
• Hover effects: On
• Star colour matching your primary brand colour

—

Testimonial Display Layouts

When using the [trustie_testimonials] shortcode, you can choose between three layouts:

Grid Layout (default)

[trustie_testimonials layout="grid"]

Responsive grid of testimonial cards — works well for most sites.

List Layout

[trustie_testimonials layout="list"]

Single-column stacked layout — great for longer, detailed testimonials.

Masonry Layout

[trustie_testimonials layout="masonry"]

Pinterest-style layout where cards fill available space — looks great when testimonials vary in length.

All layouts respect your Designer colour and style choices.

—

Dark Mode

If your theme supports dark mode, Trustie adapts. The Designer’s Surface and Text colours are used in both light and dark contexts.

If your theme has a dark mode toggle, the Designer colours work as your light mode settings. Your theme’s dark mode CSS handles the rest.

—

Matching Your Theme

Thanks to automatic theme integration, Trustie usually matches your theme out of the box. Your theme’s fonts are applied automatically, and the Designer pre-fills your colour palette.

If you want to fine-tune things:

1. Open the Designer — your theme’s colours should already be populated
2. Adjust the Primary Colour if the detected colour isn’t quite right
3. Set your Star Colours to complement your brand
4. Click Save

Most themes look great without any changes at all.

—

CSS Variables (For Developers)

If you have a developer working on your site, they can fine-tune Trustie’s appearance directly in your theme’s stylesheet using CSS variables — named values that control colours, spacing, and shadows across all of Trustie’s output.

The main variables are:

• --tracksies-color-primary
• --tracksies-rating-star-color
• --tracksies-rating-star-empty
• --tracksies-color-text
• --tracksies-color-surface
• --tracksies-radius-medium
• --tracksies-shadow-card

If you’re not a developer, you don’t need this section at all — the Designer gives you the same control with a visual interface and live preview.

—

Accessibility

Trustie meets WCAG 2.1 Level AA accessibility standards out of the box. This means:

• Keyboard navigation works everywhere — all forms, buttons, and filters can be used without a mouse
• Focus indicators are visible — when tabbing through controls, you’ll see a clear outline in your primary brand colour
• Screen readers are supported — form submissions, loading states, and review filtering all announce changes to screen readers
• Reduced motion — animations are toned down for visitors who prefer reduced motion
• No extra setup needed — accessibility features work automatically with your Designer settings

Focus indicators use your Primary Colour from the Designer, so they match your brand without any extra configuration.

—

Performance

The Designer settings are lightweight CSS variables — they don’t slow down your site.

If you want to keep things lean:

• Turn off unused features in Tracksies > Settings > Features — think of features like appliances in a tiny house: unplug what you’re not using
• Disable hover effects if your audience is mostly mobile — hover effects don’t apply on touch devices anyway

—

Common Questions

Can I use different colours for different shortcodes?
The Designer sets your site-wide defaults. Individual shortcodes inherit these settings automatically. If you need per-shortcode overrides, you can use CSS custom properties in your theme.

Will my Designer settings survive an update?
Yes. Designer settings are stored in your database, not in plugin files. Updating Trustie won’t change your settings.

I changed my theme — do I need to redo my Designer settings?
Your Designer settings persist across theme changes. Trustie will automatically pick up your new theme’s fonts, so text will match straight away. You might want to open the Designer and update your Primary Colour to match the new theme — but fonts are handled for you.

—

If Something Goes Wrong

Colours aren’t applying:
Clear your caching plugin and do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Caching plugins can hold onto old styles.

Stars are the wrong colour:
Check Trustie > Designer > Colours and look for the Star Rating Colours section. Make sure Filled Stars is set to the colour you want. Click Save and clear your cache.

Everything looks broken after a theme change:
Switch to a default theme (like Twenty Twenty-Four) temporarily. If Trustie looks fine with the default theme, your new theme has conflicting CSS. Try adjusting your Designer settings — changing the border radius or disabling shadows often helps things blend better.

Designer preview doesn’t match the live site:
This usually means your caching plugin is serving old styles. Clear your cache, then hard refresh the page. If the issue persists, check whether your theme is overriding Trustie’s CSS variables.