XF 1.2 Widen User Info

AndreaMarucci

Well-known member
This is my user info now
before.jpg
but I'd like to have it that way (maybe with the avatar larger should be better)
after.jpg

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

Well-known member
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/

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

Sheldon

Well-known member
Change your message_user_info template. Replace the "m" avatar with "l".

Code:
<xen:avatar user="$user" size="m" img="true" />
Then designate the exact size you want your avatar.

Screenshot_2.png
 

AndreaMarucci

Well-known member
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

Well-known member
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

Well-known member
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"?
Code:
.messageUserInfo .messageUserBlock .avatarHolder .avatar > img {
    height: 145px;
    width: 145px;
}
Change values to suit...
 

AndreaMarucci

Well-known member
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...
 

AndreaMarucci

Well-known member
I'm using TMS with this code added
Code:
<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

Well-known member
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

Well-known member
Find this one
Code:
<xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
And replace with the one above...
 

psTubble27

Well-known member
Change your message_user_info template. Replace the "m" avatar with "l".

Code:
<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.
 
Top