Skip to content

Display & Appearance

The Display tab controls how suggestion cards and match scores look on the frontend. Go to BuddyPress > Friend & Follow Suggestion > Display to find these settings.

These settings control what appears when a logged-in member views another member’s profile page.

Show Match Badge — adds a coloured badge near the profile avatar showing the compatibility level. The badge uses both a colour and a small status dot so the active state is visible to colour-blind users. Default: on.

Show Match Percentage — adds the numerical percentage (for example, “87%”) alongside or inside the badge. You can show the badge without the percentage, or the percentage without the badge. Default: on.

If both are off, nothing from this plugin appears on individual profile pages.

These settings add match information to the BuddyPress members directory (/members/).

Enable Directory Integration — master toggle for all directory-related display. Turn this off to keep the directory completely unaffected. Default: on.

Show Match Score — displays the percentage next to each member card in the directory. Only appears for logged-in members; guests see nothing. Default: on.

Highlight High Matches — visually emphasises members whose score is at or above the threshold you set (see below). The highlight modifies the member’s latest update area using the bp_get_member_latest_update filter. Default: on.

High Match Threshold — the minimum score required for a member to be highlighted. Default: 70%. Valid range: 50–100%. Members below this score are shown normally; members at or above it get the highlight treatment.

These settings apply to suggestion cards rendered by widgets and shortcodes (unless you override them via shortcode attributes).

Layout Style — how cards are arranged:

  • Cards — a responsive grid where each card shows a large avatar, name, match ring, and action buttons. Good for main content areas.
  • List — compact horizontal rows. Good for sidebars and pages with limited width.
  • Grid — a tighter grid, similar to cards but with smaller padding. Good for dense member directories or “People You May Know” sections.

Default: Cards.

Individual shortcodes can override this setting with a layout attribute. See Shortcodes Reference.

Suggestions Per Row — how many cards appear in each row of the grid or cards layout. Range: 1–6. Default: 3. The layout collapses to fewer columns on small screens regardless of this setting.

Show Avatars — whether to show the member’s profile photo on each card. Disabling this can speed up page load on large communities. Default: on.

Avatar Size (px) — the width and height of the avatar on each card. Range: 50–300 px. Default: 100 px. Larger avatars look better on cards layout; smaller ones work well in list layout.

The plugin uses CSS custom properties so its colors can be overridden from theme CSS without touching plugin files. The settings here write those custom property values to the page.

Primary Color — used for Connect and Follow buttons and the match ring stroke. Default: #007AFF (blue).

Success Color — used for high-match indicators and confirmed-friend states. Default: #34C759 (green).

Text Color — the main text color inside suggestion cards. Default: #1d1d1f (near-black).

To override these from your theme’s CSS instead of from the settings panel, target the CSS custom properties:

:root {
--bffs-primary-color: #your-color;
--bffs-success-color: #your-color;
--bffs-text-color: #your-color;
}

Theme CSS overrides take precedence over plugin-generated values.


Next: Notifications to configure email digests and the new-member welcome email.