Display & Appearance

Tab: Display
Option stored: bffs_display_setting
Admin path: WB Plugins > BP Friend & Follow > Display

Controls how match information and suggestion cards look across member profiles, the members directory, widgets, and shortcodes.

Profile Display Options

Settings under this section control what shows up when one member views another member’s profile page.

Show Match Badge

Option key: bffs_display_setting[profile_display][show_match_badge]
Default: on

Displays a badge in the member header area showing compatibility. The badge uses the match score ring style introduced in 1.7.3 - a colored ring around the avatar with a small status dot. When off, no match indicator appears on profiles.

Show Match Percentage

Option key: bffs_display_setting[profile_display][show_percentage]
Default: on

Shows the numerical percentage alongside (or instead of) the badge. For example, “78%”. When off, the badge is shown without a number, or no indicator at all if both this and “Show Match Badge” are off.

Both toggles work independently. You can show just the number, just the badge ring, both, or neither.

Members Directory Integration

Controls how match data appears on the /members/ directory page where all members are listed.

Enable Directory Integration

Option key: bffs_display_setting[directory_integration][show_in_directory]
Default: on

When on, this section’s sub-settings below are applied to member cards in the directory. When off, the directory shows as normal BuddyPress member cards without any match data.

Show Match Score

Option key: bffs_display_setting[directory_integration][show_match_score]
Default: on

Shows the match percentage on each member card in the directory listing. Requires “Enable Directory Integration” to be on.

Highlight High Matches

Option key: bffs_display_setting[directory_integration][highlight_high_matches]
Default: on

Visually emphasizes member cards where the compatibility score is at or above the threshold set below. The exact visual treatment depends on your theme, but the plugin adds a CSS class to high-match cards that themes can target.

High Match Threshold

Option key: bffs_display_setting[directory_integration][threshold]
Range: 50-100
Default: 70

The percentage above which a member is considered a “high match” and gets the highlight treatment. A threshold of 70 means members scoring 70% or higher with the logged-in visitor are highlighted.

Setting this very high (90+) will highlight very few members. Setting it at 50 (the minimum) will highlight most members, which reduces its usefulness as a visual signal.

Layout Options

These settings apply to suggestion widgets and shortcodes across the site.

Layout Style

Option key: bffs_display_setting[layout_options][layout_style]
Options: Cards, List, Grid
Default: Cards

Controls the visual structure of suggestion output:

• Cards - Individual member cards with avatar, name, match score, and action buttons. Works in sidebars and in main content columns.
• List - Horizontal rows, one member per row. Good for longer suggestion lists. Introduced a fix in 1.7.3 for the list shortcode which was duplicating the grid layout.
• Grid - Multi-column grid similar to Cards but tighter spacing. Designed for displaying more suggestions in a smaller area.

The widget automatically adapts to its placement context: a comfortable grid in the main content area, a compact card in the sidebar widget. This layout setting controls the default when no context override applies.

Suggestions Per Row

Option key: bffs_display_setting[layout_options][suggestions_per_row]
Range: 1-6
Default: 3

How many suggestion cards appear in a single row before wrapping. Applies to Cards and Grid layouts. Ignored for List layout, which is always one item per row.

3 columns balances content and whitespace for most themes. Wider layouts can support 4-5 columns; sidebar placements work better with 1-2.

Show Avatars

Option key: bffs_display_setting[layout_options][show_avatars]
Default: on

When on, member avatars appear in suggestion cards. When a member has no avatar, the plugin shows colorful initials instead of a blank placeholder (this behavior was added in 1.7.3).

When off, suggestion cards show only the member name and action buttons - no avatar column.

Avatar Size (px)

Option key: bffs_display_setting[layout_options][avatar_size]
Range: 50-300 (step: 10)
Default: 100

The pixel size for avatars in suggestion output. Applies to the avatar request sent to BuddyPress, so larger values load a bigger image.

For sidebar widgets, 60-80px is typical. For main content cards, 80-120px gives a good visual weight. Values above 150px are generally only useful for profile spotlight sections.

Color Scheme

These color pickers set the CSS custom properties used throughout suggestion output. They affect suggestion cards, match rings, and action buttons.

Primary Color

Option key: bffs_display_setting[color_scheme][primary_color]
Default: #007AFF (blue)

Used for primary action buttons (Connect, Follow) and active UI elements. Choosing a color that matches your theme’s brand color creates a cohesive look.

Success Color

Option key: bffs_display_setting[color_scheme][success_color]
Default: #34C759 (green)

Used for success states and high-match indicators, including the “hot” status on the match score ring. High-match cards use this color to emphasize the strong connection.

Text Color

Option key: bffs_display_setting[color_scheme][text_color]
Default: #1d1d1f (near-black)

Main text color for suggestion card content. If your theme uses a very light background, the default works well. For dark-mode themes, you may need to adjust this or use theme CSS to override.

Saving

Click “Save Display Settings”. Color and layout changes take effect immediately on the next page load. Cached suggestion lists are not affected by display changes - the cache stores user IDs and scores, not rendered HTML.