XF 2.0 Custom avatar size help please

[JFKTheory]

Hello there!

I'm brand new to running a forum on my own and brand new to Xenforo. I was unable to figure out how to change the avatar size to the dimensions I need (250x500 preferably) and was told it could be changed with css. However, I'm not sure where to change the css or what to change it to. I've bumped up the avatars to the maximum size in settings (which is 120x120 I believe) but I'd still prefer bigger dimensions. The only place I really need them that big is in the actual posts themselves, otherwise I don't care.

Can anyone help a newbie out? Thank you for reading!

 

[KSA]

put this in EXTRA.less and adjust the number to whatever suits you but keep in mind you might need to adjust user info block.

for avatar size use this code

.avatar.avatar--m {
      width: 100px;

     height: 100px;

}

for user info block use this code

.message-cell.message-cell--user {

       flex:  100px;
}

Replace where it says 100px for both codes to whatever you like.

 

[JFKTheory]

Thank you very much for your reply, I really appreciate it! I just realized I forgot to mention that I'm using Themehouse's UI.X Dark Theme, though that doesn't seem to be causing the issue.

I put the code in EXTRA.less and while I could get the second code to work and it worked fine, the first code did nothing. I tried making sure that the size for avatars was "m" across the board, just to see if that was messing it up somewhere, and that didn't result in anything. Additionally, I tried the code in the default skin and the same issue occurred. I wanted to mention too that the avatar size changed everywhere but where I think is called the "postbit". Including the dropdown menu and profile view page.

 

[KSA]

Thank you very much for your reply, I really appreciate it! I just realized I forgot to mention that I'm using Themehouse's UI.X Dark Theme, though that doesn't seem to be causing the issue.

I put the code in EXTRA.less and while I could get the second code to work and it worked fine, the first code did nothing. I tried making sure that the size for avatars was "m" across the board, just to see if that was messing it up somewhere, and that didn't result in anything. Additionally, I tried the code in the default skin and the same issue occurred. I wanted to mention too that the avatar size changed everywhere but where I think is called the "postbit". Including the dropdown menu and profile view page.

post a link to your site so we can take a further look or if you don't feel like it PM the link. There must be a conflicting codes I believe. Try searching for the same code in your UI.X message.less template and do the editing there. As for the avatar size changing everywhere use this code instead.

Try this code first before digging in the message.less template. This code is only specific to messages/in thread post only and should work in your extra.less template.

.message--post .avatar.avatar--m {
      width: 100px;

     height: 100px;

}

 

[Brad Padgett]

You don't need CSS to make the post bit wider. Just go to appearance -> style properties -> messages -> message user info block width and increase the pixel size.

For avatars if your using UI.X you can go to your UI.X style and go the same place, appearance -> style properties -> messages and go to "post bit avatar size" and select "large" from the drop down menu.

If that's not big enough for you as you said you have already done that then your likely missing an !important flag that would lead it not to work.

You can try this and see if it does you any better.

.avatar.avatar--m {
      width: 160px !important;

     height: 160px !important;

}

Not sure if that would make a difference. However a lot of times I can't get styling to work without !important so it's worth a shot to see if that makes a difference. If you want to make the post bit avatar bigger by itself do the same thing but with the above code @ALMUSA just gave.

 

[KSA]

You don't need CSS to make the post bit wider. Just go to appearance -> style properties -> messages -> message user info block width and increase the pixel size.

For avatars if your using UI.X you can go to your UI.X style and go the same place, appearance -> style properties -> messages and go to "post bit avatar size" and select "large" from the drop down menu.

If that's not big enough for you as you said you have already done that then your likely missing an !important flag that would lead it not to work.

You can try this and see if it does you any better.

.avatar.avatar--m {
      width: 160px !important;

     height: 160px !important;

}

Not sure if that would make a difference. However a lot of times I can't get styling to work without !important so it's worth a shot to see if that makes a difference. If you want to make the post bit avatar bigger by itself do the same thing but with the above code @ALMUSA just gave.

UI.X is somewhat hard coded. For the avatar size they are using .avatar .avatar instead of .avatar .avatar--m posting in extra.less doesn't actually work because of codes conflicting in message.less template. The reason I prefer CSS over changing in style properties is that you can add your own comments so to refer to whenever necessary and not messing with default values.