XF 1.2 Demarcate Conversations Style From Threads

[ProCom]

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]

you could always try using the .conversation_view class to style conversations. So for example: the following css would be as follows:

.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.

 

[HWS]

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]

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.

 

[Paul B]

It can all be done with EXTRA.css and display:none on the relevant classes.

 

[Shelley]

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.

.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

 

[ProCom]

Dang @Shelley , that's incredible!! You really have mad skillz with this stuff!

Thanks!!

 

[Shelley]

Condensed even further.

 

[Shelley]

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)

.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:

 

[ProCom]

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]

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

.conversation_view .messageUserBlock .userTitle {display:none;}

 

[ProCom]

BRILLIANT, thanks so much!!

 

[HWS]

@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.

 

[HWS]

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]

@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.

haha that is best left for the adavance coders/developers of this forum (way out of my league)

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.