• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Demarcate Conversations Style From Threads

ProCom

Active member
#1
Maybe it's just because I'm still new to xF, but I keep finding that when I'm in a conversation with someone I'm often wondering if I'm in a thread.

Maybe it's also because of the way I do thing: I'll open up 10 different tabs with threads, conversations, etc. and I find that it isn't really super clear to me which I'm in, especially if I'm in the middle of a long page of discussion.

Am I the only one that has a hard time differentiating when browsing?

Any simple ways to change the color / look of conversations so they aren't an exact copy of threads?

Thanks!
 

Shelley

Well-known member
#2
you could always try using the .conversation_view class to style conversations. So for example: the following css would be as follows:

Code:
.conversation_view .messageList .message {background-color: #ffcfcf; padding: 10px; border-radius: 5px; border: 1px solid #c79494; margin-bottom: 10px;}
.conversation_view .messageInfo {background-color: #ffcfcf;}
And the output of that would be as follows. It's just a simple change but it gives you an understanding to what class you should use and all this code and styling would go into your EXTRA.CSS template.

Screenshot_36.png
 

HWS

Well-known member
#3
Conversations should be styled very simple and very condensed. There is no need for a large postbit for example.

Also new messages should be inserted via AJAX automatically when viewing a conversation.
 

ProCom

Active member
#4
Great points @HWS ! I'd actually love to remove signatures, most of the postbit, etc. from conversations, but that's a lot of editing that is over my payscale. :)
 

Shelley

Well-known member
#6
Great points @HWS ! I'd actually love to remove signatures, most of the postbit, etc. from conversations, but that's a lot of editing that is over my payscale. :)
here's a somewhat condensed down version.

Message userinfo styling removed.
avatars lowered in dimension
signatures removed
Messageuserinfo/avatar removed from conversation editor

You would only need to style to your preference with the colours you want etc.

Code:
.conversation_view .messageList .message {background-color: #ffcfcf; padding: 10px; border-radius: 5px; border: 1px solid #c79494; margin-bottom: 10px;}
.conversation_view .messageInfo {background-color: #ffcfcf;}
.conversation_view .signature, .conversation_view .messageUserBlock .arrow span, .conversation_view .messageUserBlock .arrow {display:none;}
.conversation_view .messageUserInfo {width: 75px;}
.conversation_view .messageUserInfo .messageUserBlock .extraUserInfo {display:none;}

.conversation_view .messageUserBlock div.avatarHolder {
  background-color: transparent;
  border-radius: 0;
  padding: 0;}

.conversation_view .messageUserBlock {
  background: none transparent;
  border: 0 solid #D7EDFC;
  border-radius: 0;}
  
.conversation_view .avatar img { width: 75px; height: 75px;}
.conversation_view .message .messageInfo { margin-left: 100px;}
.conversation_view .message .messageContent {min-height: 70px;}
.conversation_view #QuickReply {margin-left: 0;}
.conversation_view .quickReply .messageUserInfo  {display: none;}
Output of all that is as follows
Screenshot_39.png
 

Shelley

Well-known member
#9
Zebra like display where each conversation entry alternates in colour. CSS Below (though some of the css has some of my styles css and css to hide certain add-ons)

Code:
.conversation_view .messageList .message:nth-child(even) {background-color: #ffcfcf; padding: 10px; border-radius: 5px; border: 1px solid #c79494; margin-bottom: 10px;}
.conversation_view .messageList .message:nth-child(odd) {background-color: #cadce7; padding: 10px; border-radius: 5px; border: 1px solid #96adbb; margin-bottom: 10px;}
.conversation_view .messageInfo {background-color: #ffcfcf;}
.conversation_view .signature, .conversation_view .messageUserBlock .arrow span, .conversation_view .messageUserBlock .arrow {display:none;}
.conversation_view .messageUserInfo {width: 75px;}
.conversation_view .messageUserInfo .messageUserBlock .extraUserInfo {display:none;}

.conversation_view .messageUserBlock div.avatarHolder {
  background-color: transparent;
  border-radius: 0;
  padding: 0;}

.conversation_view .messageUserBlock {
  background: none transparent;
  border: 0 solid #D7EDFC;
  border-radius: 0;}
   
.conversation_view .avatar img { width: 75px; height: 75px; display:none;}
.conversation_view .message .messageInfo { margin-left: 80px; background-color: transparent;}
.conversation_view .message .messageContent {min-height: 20px;}
.conversation_view #QuickReply {margin-left: 0;}
.conversation_view .quickReply .messageUserInfo  {display: none;}

.conversation_view .userMood img, .conversation_view  .admin-ribbon {display: none; }
.conversation_view .username .style3, .conversation_view .username .style4 {
  background: none transparent; padding-left: 0;}
Output of that is:
Screenshot_41.png
 

ProCom

Active member
#10
Wow, I'm loving xF more and more with every expert post like those!

Ok, one quick request. What's the line needed to also remove the user title?
 

Shelley

Well-known member
#11
Wow, I'm loving xF more and more with every expert post like those!

Ok, one quick request. What's the line needed to also remove the user title?
You'll adore the xf styling system it's simply outstanding.

Add the following to extra.css will remove that
Code:
.conversation_view .messageUserBlock .userTitle {display:none;}
Screenshot_42.png Screenshot_43.png
 

HWS

Well-known member
#13
@Shelley thank you! <3

If you now can provide us a javascript that inserts new messages into the page automatically without reloading the page it would be just PERFECT. :D
 

HWS

Well-known member
#14
And, just for me as a super-perfectionist: The different colored messages should be one (and the same) color per participant. But this would need a template modification, I assume.
 

Shelley

Well-known member
#15
@Shelley thank you! <3

If you now can provide us a javascript that inserts new messages into the page automatically without reloading the page it would be just PERFECT. :D
haha that is best left for the adavance coders/developers of this forum (way out of my league) :LOL:

And, just for me as a super-perfectionist: The different colored messages should be one (and the same) color per participant. But this would need a template modification, I assume.
Yeah, I think this would entail a template modification of some sort. But I think this is better than nothing though I suppose atleast for staff you could use the staff class to make it colour specific for them atleast.