Easy Customization

Better Messages is designed to blend into any WordPress site — no coding required for the basics, full CSS access for advanced theming. Everything visual lives on one screen: WP Admin → Better Messages → Settings → Appearance, with a live preview beside the controls.

The Appearance tab#

Six sections, and a Find an option search box across the top for when you know what you want to change but not where it lives.

Section	What it covers
Conversation	Message design, which side messages sit on, avatars, timestamps, the conversation header
Colors	Every color, in a light set and a dark set
Layout	Corners, spacing, messenger size, the sidebar, which panels appear and the ⋯ button on conversations
Typography	Font family, monospace font, text sizes, line height
Mini widgets	The widget bar, its placement, corners and icons
Mobile	Full screen behavior, swipe-to-go-back, the floating chat button and the ⋯ button on conversations

The tab opens on Conversation, since the message design chosen there decides what half the colors do.

Changes preview live and are not written until you press Save changes. Discard drops them, and Reset design puts every color, size and layout choice back to what the plugin ships with.

Colors#

Pick a palette from the selector at the top — Graphite, Evergreen, Sandstone, Indigo, Ocean or Rose — or set colors individually, which switches the selector to Custom. Applying a palette repaints colors only. Sizes and layout are left alone.

Every color has a light value and a dark value. Switch the preview between Light and Dark to edit each set. Colors are also scoped: Messenger, Mini chats, Mini widgets and Mobile each have their own tab, and the last three follow the messenger until you give them their own values.

Several fields are marked Automatic — text on accent, secondary text, field fills and subtle borders are blended from the colors you did set, until you override them.

Links and outlines have colors of their own. On Bubbles, Own messages → Links and Other messages → Links color the links on each side, and on Outlined and Classic Conversation → Links colors them on both. Each follows the text around it until you set it. Outlined draws its messages with Own messages → Outline and Other messages → Outline, which follow your own messages' background and the conversation border until you set them.

Light or dark, not both

The Color scheme control is Light or Dark. The messenger does not follow the visitor's device setting, because the rest of your page would not follow it either.

Conversation#

Control	Options
Message design	Bubbles (default) · Outlined · Classic
Message side	Mine on the right (default) · Mine on the left · All on one side

Between them these replace the old Standard / Modern template choice. For the flat list that 2.0 called Standard, choose Classic, which puts every message on one side, so Message side applies to the bubble designs only. Sites upgrading from 2.x that were on Standard are converted to exactly that automatically.

What you can change#

Without code	With CSS
Every color, light and dark	Anything not exposed as a control
Palette presets	Gradients, shadows, animations
Corners and spacing	Per-room or per-page styling
Fonts and text sizes	Custom avatars, badges, status indicators
Message design and side
Mini widget and mobile appearance

Custom CSS#

Better Messages has no custom CSS field of its own. Put your rules in your theme's Additional CSS (Appearance → Customize), a child theme stylesheet, or a code snippets plugin.

Upgrading from 2.x

Two things bite on upgrade:

The custom CSS field in the old Design tab is gone, and what was saved in it is not carried over. Copy it out before you update.
The messenger's class names changed. They are now prefixed bm-, replacing bpbm- and bp-messages-. CSS written against the old names needs updating.

The script and style files were renamed too — bp-messages* → better-messages* and bpbm-worker.js → bm-worker.js — so update the exclusion lists of any caching or optimisation plugin.

Frequently asked questions#

Can I use my brand font in the messenger?#

Yes, without CSS. Appearance → Typography → Font family offers System, Classic sans-serif, Serif, Monospace, and Inherit from the theme. For a web font your theme already loads — Roboto, Inter and the like — choose Custom and type its name.

Do customizations survive plugin updates?#

Yes. Everything on the Appearance tab is stored in the database. Custom CSS in your theme survives any plugin update, as does PHP hooked from a child theme.

Can I have different designs for different chat rooms?#

There is no per-chat-room design field. To restyle one room, scope your CSS to that room's wrapper, which carries the room id as a data attribute.

What happened to the WordPress Customizer panel?#

It was removed in 3.0. Colors and sizes live on the Appearance tab now, and snippets calling Better_Messages()->customize no longer work. Values you had set in the Customizer are migrated across on upgrade.

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.