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

XF 1.4 MessageUserInfo Block min-height 100%

Discussion in 'Styling and Customization Questions' started by wRolf, Jun 25, 2015.

  1. wRolf

    wRolf Member

    I want the user info block to stretch 100% all the way in a post. I have attached an example of what I mean. I want the user info blocks background to stretch all the way down. Can't seem to figure this out.

    Thanks.

    PS. Not sure if you guys would prefer me to post in my same thread or create a new one, sorry for so many threads.
     

    Attached Files:

  2. Anarchy Scape

    Anarchy Scape New Member

    can you give a link to your current site? Might be able to give you a hand with this one.
     
  3. wRolf

    wRolf Member

    Unfortunately I don't have a website at the moment. I'm just trying everything through local.

    Anybody try and got this before?
     
  4. wRolf

    wRolf Member

    Bump. Anybody?
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    It would likely require editing the template to move the divs/elements around.

    I don't believe it can be done with CSS with the current structure.
     
  6. wRolf

    wRolf Member

    Yea, I tried editing the template "message_user_info" I believe it was by moving the divs around and adding some in, but couldn't quite get it to work. I guess I'll try again when I get home later tonight.
     
  7. empire

    empire Well-Known Member

    You can't do exactly that, but you can approximate a similar effect. In extra.css, remove padding from the message content and set the background colour to light blue. You might also want to add some space between messages:

    .messageList .message {
    padding: 0;
    background-color: #d7edfc;
    margin-bottom: 10px;
    }​

    Then make the background of the message content white and pad it. You'll also want to set the minimum height to be around the same height as your postbit:

    .message .messageInfo {
    background-color: #fff;
    padding: 10px;
    min-height: 165px;
    }​

    You'll need to play around with the avatar and arrow styling to get that how you want.
     
  8. wRolf

    wRolf Member

    The only bad thing about this is that you can't really have an auto height for avatars as you need to use a min-height to approximate and an avatar with an auto height would just ruin it. Also need to set all the custom fields you would want beforehand.

    I see the guys at http://xf1.artodia.com/demo.php?demo=xf&id=digi did it in a way where they auto calculate the min-height, but I can't replicate it. Guess I'll have to settle with this for the time being. :( Thanks though, I appreciate the help.
     
    Last edited: Jun 26, 2015
  9. wRolf

    wRolf Member

    Okay, this feels like one of the dumbest ways I've done something but it kind of works for me. There's definitely a better way to do it but I can't figure it out. Anyways, for anybody else that might for some reason be interested in this as well, the way I ended up doing it is:

    Open "message" template and look for:
    Code:
          <xen:include template="message_user_info">
             <xen:map from="$message" to="$user" />
           </xen:include>
    
    Include the following red text:
    Look for:
    Code:
      <xen:hook name="message_below" params="{xen:array 'post={$message}','message_id={$messageId}'}" />
    
    Add closing div right above it:
    Open "message_user_info.css" OR "extra.css" template and add:
    Code:
    .container1 {
       width: 100%;
       background-color: #f7f7f7;
    }
    
    .col1 {
       float: left;
       position: relative;
    }
    
    In "message_user_info.css" template, look for:
    Code:
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
    
    Add the following css code after it:
    Code:
      .Responsive .container1 {
         background-color: #ffffff;
       }
    
       .Responsive .col1 {
         float: none;
         position: relative;
       }
    
     
    Last edited: Jun 27, 2015

Share This Page