Messenger Style Conversations

Messenger Style Conversations


Active member
I did all of that and was trying to do it with css in EXTRA.css instead, but I could only hide the blocks and the blank space was still there with the sidebar’s dimensions. I just wanted to make sure I had the right template.

Anyway, if anyone is interested it's in the conversation_view template. Just do what Brogan said or delete the code below. It looks way better with the sidebar removed. May need to add the invite link back somewhere, but it sill looks better.


    <div class="section statsList">
        <div class="secondaryContent">
            <h3>{xen:phrase conversation_info}</h3>
            <div class="pairsJustified">
                <dl><dt>{xen:phrase participants}:</dt>
                    <dd>{xen:count $recipients}</dd></dl>
                <dl><dt>{xen:phrase replies}:</dt>
                    <dd>{xen:number $conversation.reply_count}</dd></dl>
                <dl><dt>{xen:phrase last_reply_date}:</dt>
                    <dd><xen:datetime time="$conversation.last_message_date" /></dd></dl>
                <dl><dt>{xen:phrase last_reply_from}:</dt>
                    <dd><xen:username user="$conversation.last_message" /></dd></dl>
    <div class="section participants avatarList">
        <div class="secondaryContent">
            <h3>{xen:phrase conversation_participants}</h3>
            <div id="ConversationRecipientsPlaceholder">
                <xen:include template="conversation_recipients" />
            <xen:if is="{$canInviteUsers}">
                <div class="sectionFooter"><a href="{xen:link 'conversations/invite', $conversation}" class="_callToAction _inviteCtrl OverlayTrigger"
                    title="{xen:phrase invite_more_members_to_participate_in_this_conversation}">{xen:phrase invite_more}</a></div>


Active member
If you want the invite more members link back after removing the sidebar...

Find in the same conversation_view template:
<a href="{xen:link 'conversations/leave', $conversation}" class="OverlayTrigger">{xen:phrase leave_conversation}</a>
Then add this line below or above it:
<a href="{xen:link 'conversations/invite', $conversation}" class="_callToAction _inviteCtrl OverlayTrigger"">{xen:phrase invite_members}</a>
Last edited:


Well-known member
For anybody having problems implementing this, try installing the attached XML file as an add-on. :) There is no PHP files, just the single XML file.

This will add three new style properties that you can turn on/off as wanted. Each of the options are independent of each other so you could, for example, turn off signatures but leave the sidebar enabled and displaying the conversation posts as normal. Turning all options on will give the most 'Messenger' like display, especially on smaller fixed-width styles.

The CSS is in the template "brogan_im_style_pc.css"; that is the only template added. Five new template modifications are added.

BroganBot 3000 - Messenger Style PCs Options.PNG



XenForo moderator
Staff member
All of the messenger interfaces I've seen have the avatar/icon and text in separate divs.

Feel free to modify it to suit your own needs though.

I come to you because I have modified the templates and I do not get the expected result.

I even try with the XML supplied by Kevin, but still nothing.

I use the theme charm, if that can help.

Thank you in advance for your help.




XenForo moderator
Staff member
I can't help with third party styles - you may need to inspect the style CSS and adapt the instructions to suit.
I just extended this mod to use with thread_view. All seems to work fine except for .ctaConversationMessageSelf missing out from Inspect Element in the thread view. Though it is still showing in Extra.css.

Any assistance from you will be appreciated.
<xen:require css="message_simple.css" />
<xen:require css="bb_code.css" />

<li id="{$messageId}" class="message conversationWideWidth {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if '{$message.post_id}', {xen:if '{$visitor.user_id} ==  {$message.user_id}', 'ctaConversationMessageSelf', 'ctaConversationMessageOther'}}" data-author="{$message.username}">

    <xen:include template="message_user_info">
        <xen:map from="$message" to="$user" />
    <div class="messageInfo">
        <xen:if is="{$message.isNew}"><strong class="newIndicator"><span></span>{xen:phrase new}</strong></xen:if>

        <xen:if hascontent="true">
            <ul class="messageNotices">
                    <xen:hook name="message_simple_notices" params="{xen:array 'message={$message}'}">
                        <xen:if is="{$message.warning_message}">
                            <li class="warningNotice"><span class="icon Tooltip" title="{xen:phrase warning}" data-tipclass="iconTip flipped"></span>{$message.warning_message}</li>
                        <xen:if is="{$message.isDeleted}">
                            <li class="deletedNotice"><span class="icon Tooltip" title="{xen:phrase deleted}" data-tipclass="iconTip flipped"></span>{xen:phrase this_message_has_been_removed_from_public_view}</li>
                        <xen:elseif is="{$message.isModerated}" />
                            <li class="moderatedNotice"><span class="icon Tooltip" title="{xen:phrase awaiting_moderation}" data-tipclass="iconTip flipped"></span>{xen:phrase this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal}</li>
                        <xen:if is="{$message.isIgnored}">
                            <li>{xen:phrase you_are_ignoring_content_by_this_member} <a href="javascript:" class="jsOnly DisplayIgnoredContent">{xen:phrase show_ignored_content}</a></li>

        <div class="messageContent">
            <xen:username user="$message" class="poster" />
            <article><blockquote class="ugc baseHtml{xen:if $message.isIgnored, ' ignored'}">{xen:raw $message.messageHtml}</blockquote></article>

            {xen:raw $messageContentAfterTemplate}
        {xen:raw $messageAfterTemplate}

        <div id="likes-{$messageId}"><xen:if is="{$message.likes}"><xen:include template="likes_summary" /></xen:if></div>
I have altered this line
<li id="{$messageId}" class="message conversationWideWidth {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if '{$message.post_id}', {xen:if '{$visitor.user_id} ==  {$message.user_id}', 'ctaConversationMessageSelf', 'ctaConversationMessageOther'}}" data-author="{$message.username}">