Modern Design

Better Messages ships with a modern, mobile-first interface that fits naturally into any WordPress theme. Pick the layout template, align message bubbles, enable full-screen mode for desktop power users, and tune dimensions to match your design. The result feels like a native chat app — not a bolted-on plugin.

What it adds#

Modern message bubble layout with configurable alignment (own messages left, right, or all-left)
Combined view — conversation list and active conversation visible side-by-side on desktop
Full-screen mode — immersive chat experience that uses the full viewport
Customizable accent color from the WordPress Customizer
Configurable message area height, min-height, and sidebar width
Fully responsive — adapts to phone, tablet, and desktop without dead zones

How it works#

Better Messages includes two templates — Standard and Modern. Both share 100% of the functionality but render differently.

Template	Visual character	Best for
Standard	Classic two-column inbox + thread, traditional WordPress feel	Sites with existing chrome around the chat
Modern	Mobile-first, message-app aesthetic, full-bleed bubbles	Standalone chat pages, social network feel

In the Modern template, you can further configure:

Setting	Effect
Modern Layout: left	Both own and others' messages align left (chat-log style)
Modern Layout: right	Own messages right-aligned, others left (iMessage-style) — default
Modern Layout: all-left	Everything left, with sender avatar (Slack/Discord-style)
Combined View	Inbox sidebar + open thread side-by-side on desktop
Desktop Full Screen	Full-screen toggle button — chat fills the viewport

When to choose each style#

Site type	Recommended setup
Social network	Modern template, right-aligned (iMessage feel)
Slack-style community	Modern, all-left with avatars
Marketplace messaging	Standard or Modern with Combined View — inbox always visible
Standalone chat app	Modern + Full-Screen Mode + Combined View
LMS / training site	Standard — fits within course content areas

How to enable#

Navigate to WP Admin → Better Messages → Settings → General.

Template — Standard or Modern
Modern Layout — Message bubble alignment (Left / Right / All Left)
Combined View — Show conversation list alongside active conversation
Desktop Full Screen — Add a full-screen toggle button to the messenger
Messages Height — Height of the message area (default 650px)
Messages Min Height — Minimum height (default 450px)
Side Threads Width — Conversation list sidebar width (default 320px)

For accent color: WP Admin → Appearance → Customize → Better Messages.

Frequently asked questions#

Can I switch templates without losing data?#

Yes — switching is a visual setting only. Messages, threads, and all data are template-agnostic. Switch back and forth freely.

Does the Modern template work on older browsers?#

Yes — the Modern template uses standard CSS (flexbox, grid). Works on all browsers released in the last 5 years. Older IE versions are not supported but represent a vanishing user base.

Can I have different layouts on different pages?#

The template is site-wide, but you can use shortcodes like [better_messages_single_conversation] to embed a customized view in specific pages.

How does the design adapt to mobile?#

On narrow viewports (around 800px and below), the layout collapses to a single-column view — the conversation list slides over the thread, similar to iMessage / WhatsApp. The Combined View setting is ignored on mobile.

Can I override the design with custom CSS?#

Yes — all UI surfaces have stable class names. Use Appearance → Customize → Additional CSS for theme-scoped overrides.