XF 1.2 Widen User Info

[AndreaMarucci]

This is my user info now

but I'd like to have it that way (maybe with the avatar larger should be better)


There's someone willing to give me some instructions? I know that probably I've to do some template modifications or insert some code in Extra.css but I don't know CSS so really don't know what to insert and how...

Thanks!

 

[Shelley]

This is my user info now
View attachment 61470
but I'd like to have it that way (maybe with the avatar larger should be better)
View attachment 61471

There's someone willing to give me some instructions? I know that probably I've to do some template modifications or insert some code in Extra.css but I don't know CSS so really don't know what to insert and how...

Thanks!

The following should work. You are probably best going about re-sizing the avatar another way as the method here is distorting it.

Edit: here's jakes resource which could also be adapted to suit your needs http://xenforo.com/community/resources/avatars-big-tall.1741/

.message .messageUserInfo { width: 160px; }
.messageList .message .messageInfo { margin-left: 174px; }
.message .avatar img, .message .avatar .message .img, .avatarCropper { width: 132px;}

 

[Sheldon]

Change your message_user_info template. Replace the "m" avatar with "l".

<xen:avatar user="$user" size="m" img="true" />

Then designate the exact size you want your avatar.

 

[AndreaMarucci]

Wow, thanks! Now the best part. How can I put the rank (in that case the gold leaf) at the right of the name like in the mockup?

 

[AndreaMarucci]

Then designate the exact size you want your avatar.

I've tested the "l" but it's very big. What exactly do you mean with "designate the exact size"? There is a style property or something like that where I can input the size corresponding to "m" or "l"?

 

[Sheldon]

I've tested the "l" but it's very big. What exactly do you mean with "designate the exact size"? There is a style property or something like that where I can input the size corresponding to "m" or "l"?

.messageUserInfo .messageUserBlock .avatarHolder .avatar > img {
    height: 145px;
    width: 145px;
}

Change values to suit...

 

[AndreaMarucci]

Awesome, thanks Sheldon!

 

[AndreaMarucci]

Forgot to tell that my final scope was to put the rank at the right of the name so that I can reduce the height of that section...

 

[Jeremy]

How is the rank added?

 

[AndreaMarucci]

I'm using TMS with this code added

<xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

<xen:if is="{$user.message_count} > 20000">
    <dl class="pairsInline">
        <dt></dt>
        <dd><img src="http://xxxxxx/forum/rank/r20000.png"></dd>
    </dl>
<xen:elseif is="{$user.message_count} > 15000" />
    <dl class="pairsInline">
        <dt></dt>
        <dd><img src="http://xxxxxx/forum/rank/r15000.png"></dd>
    </dl>
<xen:elseif is="{$user.message_count} > 10000" />
    <dl class="pairsInline">
        <dt></dt>
        <dd><img src="http://xxxxxx/forum/rank/r10000.png"></dd>
    </dl>

and so on ....................

    <xen:else />
    <dl class="pairsInline">
        <dt></dt>
        <dd></dd>
    </dl>
</xen:if>

In message user info template

 

[Jeremy]

If you are using a template modification, what is your find (although the officially recommended method is direct editing of the template) and replace?

 

[AndreaMarucci]

Find this one

<xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

And replace with the one above...

 

[psTubble27]

Change your message_user_info template. Replace the "m" avatar with "l".

<xen:avatar user="$user" size="m" img="true" />

Then designate the exact size you want your avatar.

Problem with this solution is this: @Jeremy please correct me if I'm wrong: if you use the "l" avatar, XF feeds you an image that is not cropped.