Messenger Style Conversations

Messenger Style Conversations

Brogan

XenForo moderator
Staff member
#1
Brogan submitted a new resource:

Messenger Style Conversations - LOL, OMG, etc.

This resource is not affiliated with XenForo Ltd.


Description
Giving conversations a more messenger-like appearance is something which can be achieved very simply with a single template modification and a few lines of CSS.

Resulting in this:
View attachment 141474


Your own avatar will always appear on the right and the avatars of other participants will appear on the left. Naturally each participant will therefore have a different view:...
Read more about this resource...
 

Kevin

Well-known member
#2
Thanks for posting this! :) I had been wondering what approach you took for the conditionals for the reversed left/right postbits.
 

Brogan

XenForo moderator
Staff member
#3
I was originally going to release it as a packaged 'add-on' so wanted to keep the template mod as limited and simple as possible, to ensure maximum compatibility with third party styles, etc.
In the end I decided to just release it as a manual modification.

There's a lot of scope for customisation so hopefully it will give others some ideas.
 

RobinHood

Well-known member
#5
Nice Brogan. I've done something similar. Now we just need live updating like messenger so you don't have to reload the page.
 

Gemma

Well-known member
#11
Anyone successfully integrated with UI.X based styles?
In the message template comment out this code
Code:
<li id="{$messageId}" class="sectionMain message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if $message.isNew, 'new'} {$uix_additionalClasses}" data-author="{$message.username}">

<div class="uix_message {xen:if @uix_classicPostbit, 'uix_classicMessage'}">
Then add this below it
Code:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if '{$message.conversation_id}', {xen:if '{$visitor.user_id} ==  {$message.user_id}', 'ctaConversationMessageSelf', 'ctaConversationMessageOther'}}" data-author="{$message.username}">

<div>
And use the provided EXTRA.css code.

Seemed to work for me using UI.X Dark style though you may need to play around with margins to get it looking decent.
 

[xFv]

Previously Cylent1
#13
Hello!
I am running XF 1.5.10
Using a fresh untouched install, I changed the 1 line of code in the "message" template, then added the .css to EXTRA.css.
Both edits were done in the "default" style.
I cannot get this working. Nothing changes.
 

Brogan

XenForo moderator
Staff member
#14
You must not have done it correctly or you've done it in a different style - it works exactly as listed in the resource.
 

[xFv]

Previously Cylent1
#15
You must not have done it correctly or you've done it in a different style - it works exactly as listed in the resource.
I thought so too, but doing this on a total fresh install I just dont see that happening. I am almost positive it might have something to do with the latest XF..

EDIT*** I just also tried using the Template Modifications way also with no luck....
 
Last edited:

RSI

Active member
#16
Hi, is there a way to remove the sidebar, but only in Conversations? I think this mod would look even better with the sidebar removed. It may just be personal preference thing on my part though.
.
 

Brogan

XenForo moderator
Staff member
#17
Yes, you can edit the template and remove the code, use a conditional statement, CSS to hide it, etc.
 
Top