Easy Customization

Better Messages is designed to blend into any WordPress site — no coding required for the basics, full CSS access for advanced theming. Pick an accent color in the WordPress Customizer, choose between two layout templates, configure message alignment, and (for white-label sites) hide all plugin branding from end users.

What it adds#

Visual color customizer — pick your accent color with a live preview in the WordPress Customizer
Two layout templates — "Standard" (classic two-column inbox + thread) and "Modern" (compact, mobile-first)
Message bubble alignment — own messages left or right, configurable
Conversation list layout — wide / narrow / hidden modes
Custom CSS hooks — every UI surface has stable class names you can target
Responsive design — works with any WordPress theme; no specific theme dependency
White-label mode — hide all "Better Messages" branding from the user-facing UI (full white-label requires the WebSocket version's brand customization)

How it works#

The accent color is applied as a CSS custom property across the entire messenger — buttons, links, focus rings, badges, highlights all derive from the single color you pick. Light and dark theme variants are automatically generated.

The layout template switches between two rendering modes:

Template	Best for
Standard	Sites with their own header / sidebar — fits inside a content area
Modern	Standalone messenger pages, mobile-first communities, social network feel

The two templates share 100% of the underlying functionality — switch anytime without data loss.

What you can change visually#

Without code	With CSS
Accent color	All colors, gradients, shadows
Layout template	Component dimensions, spacing
Message alignment	Bubble shape (rounded / squared / asymmetric)
Conversation list layout	Custom avatars, badges, status indicators
Branding visibility	Replace fonts, icons, animations

How to enable#

Accent color — Navigate to WP Admin → Appearance → Customize → Better Messages and use the color picker. Changes preview live.

Layout / dimensions — Navigate to WP Admin → Better Messages → Settings → General.

Template selector (Standard / Modern)
Layout mode (full-width / contained / sidebar)
Width and height configurations for embedded views

Custom CSS — Add CSS rules via:

Your theme's Additional CSS in Appearance → Customize
A plugin like Simple Custom CSS
A child theme's stylesheet

Target Better Messages classes — they all start with .bp-better-messages- for backwards compatibility, or .better-messages- for the modern prefix.

Frequently asked questions#

Can I use my brand font in the messenger?#

Yes — add CSS via your theme's Additional CSS area:

.better-messages * { font-family: "Your Brand Font", sans-serif; }

Or load a webfont then re-declare the family.

Do customizations survive plugin updates?#

Yes — color, template, and layout settings persist in the database. Custom CSS in your theme survives any plugin update. Hooking PHP via a child theme also survives updates.

Can I have different designs for different chat rooms?#

There's no per-chat-room custom-CSS field in the admin today. To restyle a specific room, scope your CSS in Appearance → Customize → Additional CSS to that room's body class or post id, e.g. body.bpbm-chat-id-123 .bm-thread { ... }.

How do I match the design of an integration plugin (BuddyBoss / PeepSo)?#

Better Messages ships integration-specific stylesheets that align spacing and border-radius with the host theme's chat-related surfaces. For finer brand alignment, override the variables exposed by the messenger via the WordPress Customizer accent color, or add overrides under Appearance → Customize → Additional CSS.

What about the mobile app — can I rebrand that?#

The mobile app is white-label-ready via the mobile app build service — your own app icon, name, splash screen, push provider, and bundle ID. Contact support to start a custom build.