Change text size

Better Messages exposes its core typography through CSS custom properties so you can re-tune the messenger without forking any templates. The two most commonly tweaked properties are --bm-message-font-size (the body text of each message bubble) and --bm-message-line-height (vertical rhythm between lines inside a bubble).

The thread list — the left-rail list of conversations — has its own set of selectors because the visual hierarchy there differs from the message bubble. The snippet below targets:

• .last-message — the preview line under each thread title.
• .bm-info .name + h4 — the timestamp shown next to the conversation name.
• .bm-info .name and .bm-info h4 — the conversation name and unread badge counter.

Drop the snippet into your theme's stylesheet, the WordPress Customizer's Additional CSS field, or a custom CSS plugin. The !important flags are deliberate — they win against Better Messages' own scoped styles without forcing you to copy the full selector chain.

This is an example of how to increase or change text size in Better Messages interface:

:root{
    --bm-message-font-size: 16px;
    --bm-message-line-height: 20px;
}

.bp-messages-wrap .threads-list .thread .bm-info .last-message{
    font-size: 14px !important;
    line-height: 16px !important;
}

.bp-messages-wrap .threads-list .thread .bm-info .name+h4{
    font-size: 12px !important;
    line-height: 14px !important;
}

.bp-messages-wrap .threads-list .thread .bm-info .name {
    font-size: 15px;
    line-height: 15px;
}

.bp-messages-wrap .threads-list .thread .bm-info h4 {
    font-size: 15px;
    line-height: 15px;
}