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

Discussion in 'Styling and Customization Questions' started by ProCom, Nov 6, 2013.

  1. ProCom

    ProCom Active Member

    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!
     
  2. Shelley

    Shelley Well-Known Member

    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
     
    Jeremy likes this.
  3. HWS

    HWS Well-Known Member

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

    ProCom Active Member

    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. :)
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

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

    Shelley Well-Known Member

    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
     
    HWS and ProCom like this.
  7. ProCom

    ProCom Active Member

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

    Thanks!!
     
  8. Shelley

    Shelley Well-Known Member

    Condensed even further.

    Screenshot_40.png
     
  9. Shelley

    Shelley Well-Known Member

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

    ProCom Active Member

    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?
     
  11. Shelley

    Shelley Well-Known Member

    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
     
    ProCom likes this.
  12. ProCom

    ProCom Active Member

    BRILLIANT, thanks so much!!
     
  13. HWS

    HWS Well-Known Member

    @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
     
    Shelley likes this.
  14. HWS

    HWS Well-Known Member

    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 likes this.
  15. Shelley

    Shelley Well-Known Member

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

    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.
     

Share This Page