• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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.