XF 2.0 Almost got my perfect horizontal postbit but now I'm stuck, can you help me get it right?

[Cannabis Ape]

As I want a horizontal postbit instead of vertical I used @mysimsek guide to achieve that.

Although It send me in the right path how I want it is slightly different and I achieved a couple mods that I want but as I'm a newbie now I'm stuck.

Currently it looks like this:

And this is the code:

Spoiler

.message-avatar {
    float: left
}
@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }

}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    margin-right: auto
}

.message-userArrow {
    display: none !important;
}

.message-userArrow:after {
    display: none !important;
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: right !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: auto;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}
.messageUserBlock .extraUserInfo {
    font-size: 11px;
    padding: 4px 6px;
    float: right;
}

Now I need that part to be above each other and the url space to be wider than it currently allows.

Probably easy fixes but I learn as I go so hopefully someone can help out.

Cheers.
Edit: so like this basically. See how the right side is above each other.

 

[Brad Padgett]

@Cannabis Ape I believe this will be your solution but I haven't tested it so bear with me.

This is the default code set for the class given on my own style. I believe it's lower for default styles:

.message-cell.message-cell--user {
flex: 0 0 200px;
}

What you'll need to do is increase the 200px and add an !important flag and it should give more height in the upper part of the forum post. That will allow for that area to expand and should fix the issue.

So if you wanted to make it 275px it would look like this:

.message-cell.message-cell--user {
flex: 0 0 275px !important;
}

Let me know how that works out for you

 

[Brad Padgett]

Also as an update that was meant to change the width of that area, not the height but with your setup it will do one of 2 things either change the width or work like it's supposed to and change the height. Let me know which it does. Should change the height since it's setup that way but not 100% sure.

EDIT: Nevermind. I have you the perfect code to do this. The correct and responsive way.

First save that code somewhere so you don't lose it but use this code instead it will make it perfect.

.message-inner {
flex-direction: column !important;
align-items: flex-end !important;
}

I tested it on the default style and it works perfectly without a single issue. It works like a charm and is the best way for it to stay responsive.

Be sure to change the colors of the user-extras to your choosing but this is the correct and perfect way to do this. Disregard my code above

 

[Cannabis Ape]

@Cannabis Ape I believe this will be your solution but I haven't tested it so bear with me.

This is the default code set for the class given on my own style. I believe it's lower for default styles:

.message-cell.message-cell--user {
flex: 0 0 200px;
}

What you'll need to do is increase the 200px and add an !important flag and it should give more height in the upper part of the forum post. That will allow for that area to expand and should fix the issue.

So if you wanted to make it 275px it would look like this:

.message-cell.message-cell--user {
flex: 0 0 275px !important;
}

Let me know how that works out for you

Also as an update that was meant to change the width of that area, not the height but with your setup it will do one of 2 things either change the width or work like it's supposed to and change the height. Let me know which it does. Should change the height since it's setup that way but not 100% sure.

Aight, going to check it out straight away Cheers.

 

[Brad Padgett]

Aight, going to check it out straight away Cheers.

Check my edited post. The code i just edited is the best way. Should work perfectly

 

[Cannabis Ape]

Check my edited post. The code i just edited is the best way. Should work perfectly

Yeah just saw it.

I did the first thing and it did nothing now going to check the other one.

 

[Brad Padgett]

Yeah just saw it.

I did the first thing and it did nothing now going to check the other one.

I have tested the other one on the default style myself so will most definitely work if you did it right. The first one I didn't test.

 

[Cannabis Ape]

Also as an update that was meant to change the width of that area, not the height but with your setup it will do one of 2 things either change the width or work like it's supposed to and change the height. Let me know which it does. Should change the height since it's setup that way but not 100% sure.

EDIT: Nevermind. I have you the perfect code to do this. The correct and responsive way.

First save that code somewhere so you don't lose it but use this code instead it will make it perfect.

.message-inner {
flex-direction: column !important;
align-items: flex-end !important;
}

I tested it on the default style and it works perfectly without a single issue. It works like a charm and is the best way for it to stay responsive.

Be sure to change the colors of the user-extras to your choosing but this is the correct and perfect way to do this. Disregard my code above

Aight, tested it but this didn't had the result you had.

We are still talking about the extra.less right? I added it:

It had no results :

These guys have it also on their forum although they run XF1x but tried to inspect element to see if I saw something useful that would help me solve it but the code looks slightly different.

 

[Brad Padgett]

Aight, tested it but this didn't had the result you had.

We are still talking about the extra.less right? I added it:

It had no results :

You'll need to take out the other code for it to work. It will achieve the same thing you have achieved with the given code but responsively. As for the links being cluttered like that I haven't tested if that will fix it but I'm in a good mood today and I feel like helping people so let me logon my default style and see what it does by itself. In the mean time you can try it and put the code you have in a notepad file and save it. If it doesn't fix the clutter I will provide a fix in a moment.

And yes you put the code in extra.less

 

[Brad Padgett]

Okay @Cannabis Ape it has been tested in extra.less with 4 different fields shown in the post bit. Considering it's flexbox it should work perfect with the others too. You'll just need to save your code and replace it with what I gave you. I tested it and it works.

 

[Brad Padgett]

Here's a screenshot of what's it's showing for me. You'll just need to get the user extras background color to be the same as the header area.

 

[Cannabis Ape]

Okay @Cannabis Ape it has been tested in extra.less with 4 different fields shown in the post bit. Considering it's flexbox it should work perfect with the others too. You'll just need to save your code and replace it with what I gave you. I tested it and it works.

I must be missing something because I can't get it to work.

Tried several things before I had to ask you to specify what you exactly what you mean cause i don't want to sound like a total noob but still.

I replaced the .message-inner } with yours but no changes.

Replaced the whole code with yours no changes.

Edit: Now seeing your photo it's completely different of what I mean

Added photo to first post.

 

[Brad Padgett]

I must be missing something because I can't get it to work.

Tried several things before I had to ask you to specify what you exactly what you mean cause i don't want to sound like a total noob but still.

I replaced the .message-inner } with yours but no changes.

Replaced the whole code with yours no changes.

Edit: Now seeing your photo it's completely different of what I mean

Added photo to first post.

Okay I got you just needed to know what you needed. It took me a bit but I got you the perfect code. Now be aware that the important flags aren't needed on every single one but I have a habit of using it often since half the xenforo classes won't work without it. I would use this exact code. I tested it myself and have provided a screenshot below.

.message-inner {
flex-direction: column !important;
align-items: flex-end !important;
}

.message-cell.message-cell--user {
    width: 100% !important;
}

.message-avatar {
    float: left !important;
}

.message-userDetails {
    float: left !important;
    
}

.message-userExtras {
    float: right !important;
}

I didn't position the [bd] medal awards as you don't have that but it wouldn't take much to fix that one too... anyways let me know how that goes.

 

[Brad Padgett]

Yeah you can leave out align-items: flex-end; for this one I forgot to take that out. Essentially making that class a flex-direction: column; does all the heavy lifting, then you just need to float the items correctly. The flexbox part should fix the clutter

 

[Cannabis Ape]

Okay I got you just needed to know what you needed. It took me a bit but I got you the perfect code. Now be aware that the important flags aren't needed on every single one but I have a habit of using it often since half the xenforo classes won't work without it. I would use this exact code. I tested it myself and have provided a screenshot below.

.message-inner {
flex-direction: column !important;
align-items: flex-end !important;
}

.message-cell.message-cell--user {
    width: 100% !important;
}

.message-avatar {
    float: left !important;
}

.message-userDetails {
    float: left !important;
 
}

.message-userExtras {
    float: right !important;
}

View attachment 176287

I didn't position the [bd] medal awards as you don't have that but it wouldn't take much to fix that one too... anyways let me know how that goes.

You are the man!!

You should also add this to guides because with all respect to mysimsek this works faster and looks better.

If I add custom details will they popup there automatically or would I have to do something else?

Hope you can give me one final small css thing. My name and badge stick directly to my avatar, what do I need to add to put 1-2px between them?

Again thanks man!

 

[Brad Padgett]

No problem. Glad to help.

You'll need to go to appearance > style properties > messages > message user info elements > enable custom fields

That will get them to appear as long as you have them.

To put pixels between them you'll just need a bit of css padding. You'll need to find the class for the userbanner (I don't have any myself at the moment. I use user rank banners). But inspect element right click the banner and you'll see it's class. You can test it in inspect element to make sure its how you want it and it should update automatically until you refresh. But yeah that's all you need.

I'd rather not post it as a resource myself but you should post it yourself that would be great if you did. A lot of people would appreciate it.

padding-top: 3px;

 

[Cannabis Ape]

No problem. Glad to help.

You'll need to go to appearance > style properties > messages > message user info elements > enable custom fields

That will get them to appear as long as you have them.

To put pixels between them you'll just need a bit of css padding. You'll need to find the class for the userbanner (I don't have any myself at the moment. I use user rank banners). But inspect element right click the banner and you'll see it's class. You can test it in inspect element to make sure its how you want it and it should update automatically until you refresh. But yeah that's all you need.

I'd rather not post it as a resource myself but you should post it yourself that would be great if you did. A lot of people would appreciate it.

padding-top: 3px;

Ok cheers for everything man. Found the last thing also, had to add margin-left to the .message-userBanner.userBanner { but the main thing was the layout so very happy about it.

About posting the guide, could I tag you? Don't like to take credits for something I didn't do.

 

[Brad Padgett]

Ok cheers for everything man. Found the last thing also, had to add margin-left to the .message-userBanner.userBanner { but the main thing was the layout so very happy about it.

About posting the guide, could I tag you? Don't like to take credits for something I didn't do.

Yeah sure sounds good. Tag away!

I'm about to start working on a reputation bar for my site but I will head over to the resource and like it when you post it. Now that I think about it. I believe this is the best way to achieve that effect. Be sure to take out the align-items part, it's not needed. Anyways thanks.

 

[Cannabis Ape]

Yeah sure sounds good. Tag away!

I'm about to start working on a reputation bar for my site but I will head over to the resource and like it when you post it. Now that I think about it. I believe this is the best way to achieve that effect. Be sure to take out the align-items part, it's not needed. Anyways thanks.

Cool will do so.

Hoping you're still in your good mood I noticed one thing I'm missing in mobile view.

Now vertical you don't see the details which is logical as there is no room but based on BHW I know it's possible when you hold your mobile horizontal you can see the details.

You might happen to know how to achieve that?

 

[Brad Padgett]

Cool will do so.

Hoping you're still in your good mood I noticed one thing I'm missing in mobile view.

Now vertical you don't see the details which is logical as there is no room but based on BHW I know it's possible when you hold your mobile horizontal you can see the details.

You might happen to know how to achieve that?

Yeah sure just add this code:

@media screen and (max-width: 768px) {
    .message-userExtras {
        display: block !important;
    }
}