1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Widen User Info

Discussion in 'Styling and Customization Questions' started by AndreaMarucci, Nov 19, 2013.

  1. AndreaMarucci

    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!
     
  2. Shelley

    Shelley Well-Known Member

    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
     
  3. Sheldon

    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
     
  4. AndreaMarucci

    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?
     
  5. AndreaMarucci

    AndreaMarucci 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"?
     
  6. Sheldon

    Sheldon Well-Known Member

    Code:
    .messageUserInfo .messageUserBlock .avatarHolder .avatar > img {
        height: 145px;
        width: 145px;
    }
    Change values to suit...
     
  7. AndreaMarucci

    AndreaMarucci Well-Known Member

    Awesome, thanks Sheldon!
     
  8. AndreaMarucci

    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...
     
  9. Jeremy

    Jeremy XenForo Moderator Staff Member

    How is the rank added?
     
  10. AndreaMarucci

    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
     
  11. Jeremy

    Jeremy XenForo Moderator Staff 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?
     
  12. AndreaMarucci

    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...
     
  13. psTubble27

    psTubble27 Well-Known Member

    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.
     

Share This Page