XF 1.4 MessageUserInfo Block min-height 100%

[wRolf]

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.

 

[Anarchy Scape]

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

 

[wRolf]

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

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

Anybody try and got this before?

 

[wRolf]

Bump. Anybody?

 

[Paul B]

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.

 

[wRolf]

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.

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.

 

[empire]

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.

 

[wRolf]

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.

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.

 

[wRolf]

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:

      <xen:include template="message_user_info">
         <xen:map from="$message" to="$user" />
       </xen:include>

Include the following red text:

<div class="container1">
<div class="col1">
<xen:include template="message_user_info">
<xen:map from="$message" to="$user" />
</xen:include>
</div>

Look for:

  <xen:hook name="message_below" params="{xen:array 'post={$message}','message_id={$messageId}'}" />

Add closing div right above it:

</div>
<xen:hook name="message_below" params="{xen:array 'post={$message}','message_id={$messageId}'}" />

Open "message_user_info.css" OR "extra.css" template and add:

.container1 {
   width: 100%;
   background-color: #f7f7f7;
}

.col1 {
   float: left;
   position: relative;
}

In "message_user_info.css" template, look for:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{

Add the following css code after it:

  .Responsive .container1 {
     background-color: #ffffff;
   }

   .Responsive .col1 {
     float: none;
     position: relative;
   }