
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
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
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
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 }}">
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 }}">
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
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') }}


