XF2 GUIDE - WhatsXFessenger

How does it do it?
Well, that would be telling.
Which, coincidentally, is what I'm going to do now.

It consists of one template edit and a couple of hundred lines of LESS code.
Well, that's a lie, it's only 196, but what are 4 lines between friends?
I won't tell if you don't!

Later.
The code allows for some level of customisation without having to edit the code itself (although it's still editing the code, so ignore what I just said because it's wrong).
That is done by changing the vars and properties of the 7 8 9 lines of code at the start.
The custom configuration in the screenshots above was done using the following values:

Less:

<xf:set var="$ctaMessageSelfSide" value="left" /> // side for own messages - right or left
<xf:set var="$ctaMessageSelfAvatar" value="no" /> // display your own avatar - yes or no
<xf:set var="$ctaMessageAttribution" value="yes" /> // display the message date and time and [New] indicator - yes or no
<xf:set var="$ctaMessagePointer" value="none" /> // pointer location for the message containers - top, bottom, or none
<xf:set var="$ctaMessageOnline" value="no" /> // display the online now indicator - yes or no
@__ctaMessageRadius: 10px; // radius of message containers - between 10px and 30px works best
@__ctaMessageWidth: 50%; // width of messages - between 50% and 85% works best
@__ctaMessageSelfColour: @xf-successBg; // colour of your messages
@__ctaMessageOtherColour: @xf-paletteAccent1; // colour of the messages of other participants

The explanatory text explains what they do and what values can be used.
You can use other values if you want, but they won't work.
Go ahead and try, see if I'm lying.

Other than that, if you want to customise it to suit, feel free.
There's a nominal charge of only £100 per single character change.
Just kidding! It's only £99.

Enough already!
What do I need to do to get Brogan's most splendiferous messenger style conversation layout modification thingy!!!11 on my forum?

That's easy.
There are just 2 3 simple steps.

Step 1
Edit the conversation_message_macros template.

Change this:

Rich (BB code):

<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">

To this:

Code:

<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} {{ $message.user_id == $xf.visitor.user_id ? 'ctaConversationMessageSelf' : 'ctaConversationMessageOther' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">

Step 2
Do step 1 ^ up there.
Don't forget this step - it's kind of important.
(Blame @tonmo and @Static-Xbox for this additional step

)

Step 3
Add the LESS code (also, don't forget steps 1 and 2).
There are two ways of doing that.

Option 1
Add the following code to the extra.less template:

Code:

// Begin Brogan's most splendiferous messenger style conversation layout modification thingy
[data-template="conversation_view"]
{
    <xf:set var="$ctaMessageSelfSide" value="right" /> // side for own messages - right or left
    <xf:set var="$ctaMessageSelfAvatar" value="yes" /> // display your own avatar - yes or no
    <xf:set var="$ctaMessageAttribution" value="no" /> // display the message date and time and [New] indicator - yes or no
    <xf:set var="$ctaMessagePointer" value="top" /> // pointer location for the message containers - top, bottom, or none
    <xf:set var="$ctaMessageOnline" value="yes" /> // display the online now indicator - yes or no
    @__ctaMessageRadius: 25px; // radius of message containers - between 10px and 30px works best
    @__ctaMessageWidth: 80%; // width of messages - between 50% and 85% works best
    @__ctaMessageSelfColour: @xf-paletteNeutral1; // colour of your messages
    @__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants
    .block
    {
        & .message
        {
            border-radius: @__ctaMessageRadius;

            &--conversationMessage
            {
                width: @__ctaMessageWidth;
            }

            &-cell--user
            {
                visibility: hidden;
                border: none;
                flex: 0 0 118px;
            }

            &-avatar
            {
                visibility: visible;

                &-wrapper
                {
                    margin-bottom: 0;
                }
                &-online
                {
                    <xf:if is="$ctaMessageOnline == 'no'">
                        display: none;
                    </xf:if>
                }
            }
            &-userDetails,
            &-userExtras,
            &-userArrow
            {
                display: none;
            }
            &--quickReply
            {
                border-radius: inherit;
            }
            &-attribution
            {
            <xf:if is="$ctaMessageAttribution == 'no'">
                display: none;
            </xf:if>
                border: none;
                    &-main
                    {
                        float: right;
                        margin-left: 4px;
                    }
            }
            &-body
            {
                margin: 0;
            }
            &.ctaConversationMessageSelf
            {
                background: @__ctaMessageSelfColour;
                <xf:if is="$ctaMessageSelfAvatar == 'no'">
                    & .message-cell--user
                    {
                        display: none;
                    }
                </xf:if>
            }
            &.ctaConversationMessageOther
            {
                background: @__ctaMessageOtherColour;
            }
            @media (max-width: @xf-responsiveMedium)
            {
                border-right: 1px solid @xf-borderColor;
                border-left: 1px solid @xf-borderColor;
                &-cell--user
                {
                    padding-bottom: 0;
                }
                &-avatar .avatar
                {
                    width: 32px;
                    height: 32px;
                    font-size: 20px;
                }
            }
        <xf:if is="$ctaMessageSelfSide == 'right'">
            &.ctaConversationMessageSelf,
            &--quickReply
            {
                margin-left: (100% - @__ctaMessageWidth);

                & .message-inner
                {
                    flex-direction: row-reverse;
                }
            }

            &--quickReply
            {
                margin-left: 0;
            }
            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf,
                &--quickReply
                {
                    & .message-user
                    {
                        flex-direction: row-reverse;
                    }
                }
                &.ctaConversationMessageOther .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }
            }
            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-right-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-top-left-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-right-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-bottom-left-radius: 0;
                    }
            </xf:if>
        <xf:else/>
            &.ctaConversationMessageOther
            {
                margin-left: (100% - @__ctaMessageWidth);

                & .message-inner
                {
                    flex-direction: row-reverse;
                }
            }
            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }
                &.ctaConversationMessageOther .message-user
                {
                    flex-direction: row-reverse;
                }
            }
            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-left-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-top-right-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-left-radius: 0;
                    }
                &.ctaConversationMessageOther
                    {
                        border-bottom-right-radius: 0;
                    }
            </xf:if>
        </xf:if>
        }
    }
}
// End Brogan's most splendiferous messenger style conversation layout modification thingy - so say we all

Option 2
Create a new template and name it cta_whatsXFessenger.less.
Paste the code above into it.
Add the following code to the extra.less template:

Code:

{{ include('cta_whatsXFessenger.less') }}

XF2 GUIDE WhatsXFessenger

More resources from shimmer

Share this resource