XF 2.1 170x250 avatar sizes

[kray]

So how can i enlarge my avatar size to 170x250 without the picture covering stuff it shouldn't.

An example:

 

[kray]

I just used this code and replaced the dimensions with the ones I wanted to use and replaced height with auto and it works like gangbusters!

Thank you so much @XenArabia! I really appreciate your help!

.avatar.avatar--o {
    max-width: 150px;
    width: 150px;
    height: auto;
    max-height: 200px;
}

@kray if you use auto on the height and fill in the max-height to whatever you want there's no stretching.

It works!

I've got this

.avatar.avatar--o {
    max-width: 150px;
    width: 150px;
    height: auto;
    max-height: 350px;
}

<xf:avatar user="$user" size="o" defaultname="{$fallbackName}" itemprop="image" />

yet nothing changes. Did I miss something?

 

[Brandon K]

Did you replace this line in message_macros?

<xf:avatar user="$user" size="o" defaultname="{$fallbackName}" itemprop="image" />

 

[kray]

Did you replace this line in message_macros?

<xf:avatar user="$user" size="o" defaultname="{$fallbackName}" itemprop="image" />

I did yeah. Could it be because the style (flatawesome+) im using is preventing it from doing so?


Edit: It works on default style, but flatawesome+ is preventing the code to go through

 

[Brandon K]

I did yeah. Could it be because the style (flatawesome+) im using is preventing it from doing so?


Edit: It works on default style, but flatawesome+ is preventing the code to go through

I got it to work on Pixel's Core style. So there may be something blocking you, but it's hard to say.

 

[kray]

I got it to work on Pixel's Core style. So there may be something blocking you, but it's hard to say.

It must be this

 

[Brandon K]

Core has a similar property page and I was able to get it. As long as you swapped l for o in the message macros that style option doesn’t matter. Because after selecting Large there your style will swap it with the o css you put in extra.less.

If you changed the height to auto there should be no more stretching.

 

[kray]

Core has a similar property page and I was able to get it. As long as you swapped l for o in the message macros that style option doesn’t matter. Because after selecting Large there your style will swap it with the o css you put in extra.less.

If you changed the height to auto there should be no more stretching.

It works perfectly on the default style. Would you mind trying it on flatawesome+, or be willing to fix it on my site?

 

[Brandon K]

It works perfectly on the default style. Would you mind trying it on flatawesome+, or be willing to fix it on my site?

I don’t have flat awesome, but I am perfectly willing to help fix it on your site. Send me a PM if you want to talk in private.

 

[Ahmad Fahad]

Increase the size of the avatar in the version 2.2

extra.less :

.avatar.avatar--o {
max-width: 165px;
width: auto;
height: auto;
max-height: 310px;
}

message_macros :
Look for :

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

on line 8

Change character "m" to "o"
To be as

<xf:avatar user="$user" size="o" defaultname="{$fallbackName}" itemprop="image" />

Then go
-
Style settings - Messages - Message user info block width :
Change 120px to 160px
save

Attached example

 

[HonchoNSX]

Bumping this thread, since I am having the same issue. I tried adding the code from the above post, but the avatar remains the same. I'm looking to keep the same height as below, but make it more of a horizontal rectangle.


Here is the code I added to extra.less:

And to message_macros:

And this is what happened!


Can someone help? Not sure what is going on. If I remove the "auto" fields and replace them with pixels, the image goes back to the default size.