Messenger Style Conversations

Messenger Style Conversations

Overview Reviews (3) Discussion
P

Paul B

XenForo moderator
Staff member
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:...
Click to expand...

Read more about this resource...
 
Thanks for posting this! :) I had been wondering what approach you took for the conditionals for the reversed left/right postbits.
 
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.
 
Nice Brogan. I've done something similar. Now we just need live updating like messenger so you don't have to reload the page.
 
Is it possible to have the size of the background change based on the size of the message like on Skype?
 
Mouth said:
Anyone successfully integrated with UI.X based styles?
Click to expand...
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.
 
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.
 
You must not have done it correctly or you've done it in a different style - it works exactly as listed in the resource.
 
Brogan said:
You must not have done it correctly or you've done it in a different style - it works exactly as listed in the resource.
Click to expand...
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:
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.
.
 
Yes, you can edit the template and remove the code, use a conditional statement, CSS to hide it, etc.
 
You must log in or register to reply here.

Similar threads

P
Messenger style conversations anyone?
2
Replies
23
Views
2K
Paul B
P
P
Messenger style conversation layout
Replies
15
Views
880
Paul B
P
Back
Top Bottom