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

Changing width of user info container

Discussion in 'Styling and Customization Questions' started by Divvens, Aug 6, 2011.

  1. Divvens

    Divvens Well-Known Member

    Our forums will be having custom group tags, the size of the tag will be 147x50.

    If I go to style properties and try to edit user info container's width, it messes up things (attached image removed). How do I extend the width, without messing it up? Like I want to extend it and keep it same as how it was before extending (where elements were, etc)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You also need to update Style Properties -> Message Layout -> Content Container -> Margin: Left

    Make it 10-20px wider than the user info container width.
     
    CapnLuffy likes this.
  3. Divvens

    Divvens Well-Known Member

    Thanks Brogan, another question maybe its silly and already answered >.<
    How do i center the avatar, username, user title and whatever I add below the user title (custom group image)?

    Edit: One more thing...I changed the width, and want to change the avatar size as well to something a little bit more bigger. Since the width changed the small avatar looks out of place xD How can I change the avatar size in the postbit?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You can add a text-align: center to the message user block.
    Style Properties -> Message Layout -> User Info Block

    Add it to the miscellaneous field.

    I knew that was coming ;)
    See this post: http://xenforo.com/community/threads/how-do-i-change-avatar-size.6817/#post-109103
     
  5. Divvens

    Divvens Well-Known Member

    Thanks Brogan, I'll change the ava size as mentioned there :p

    Btw, the center worked for text, but isn't working for avatar and the custom user group image. I tried align:center; but then it doesn't center anything!
    (avatar is to the left, and the custom image is idk why to the right. It's a test image I made for seeing if everything is fine)
     

    Attached Files:

  6. Brogan

    Brogan XenForo Moderator Staff Member

    The avatar will center automatically once you increase the size.

    Likewise for the user group image, just make it the same width as the container.
     
    CapnLuffy likes this.
  7. Divvens

    Divvens Well-Known Member

    Sorry for troubling you with my questions :p but,
    The width set for the container is 147px, the width for the image is 147px, when The container width is 147px this is what happens to the custom group image.
    Untitled-2.png
    I'm using the following code in message_user_info
    Code:
    <xen:require css="message_user_info.css" />
    
    <div class="messageUserInfo" itemscope itemtype="http://data-vocabulary.org/Person">
        <div class="messageUserBlock">
            <div class="avatarHolder"><xen:avatar user="$user" size="m" itemprop="photo" /></div>
    
    <xen:if is="!{$isQuickReply}">
        <h3 class="userText">
            <a {xen:if $user.user_id, 'href="{xen:link members, $user}" '}class="username" itemprop="name">{xen:helper richUserName, $user}</a>
            <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>
    
                    <xen:if is="{$user.user_group_id} == 2">
                <img src="PATH/TO/image.gif" />
                    </xen:if>
    
        </h3>
    
        <xen:if hascontent="true">
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    There is 6px of left and right padding in the message user block section, in the default style.

    You either need to remove the padding or make your image 12px narrower than the overall width.

    With my post above, I meant the same width as the inner container, not the overall outside width.
     
    CapnLuffy likes this.
  9. Divvens

    Divvens Well-Known Member

    Thanks Brogan, got it sorted out. ^^
     
  10. Divvens

    Divvens Well-Known Member

    Ok one more thing! We had 150x300 avatars on our previous board. Here, the 150x300 avatar works fine on the profile page, but on the post-bit and username drop down it doesn't show the full height. (attached images) How can I make it show its full 300px height there?
     

    Attached Files:

  11. Brogan

    Brogan XenForo Moderator Staff Member

    Did you change the avatar css?

    .avatar .img.m {
    height: 96px;
    width: 96px;
    }
     
  12. Divvens

    Divvens Well-Known Member

    .avatar .img.m { width: 150px; height: 300px; }

    Do you mean in the main xenforo.css? I have that there. The avatar is shown the same way as the image above.
     
  13. Divvens

    Divvens Well-Known Member

    Never mind, I've decided to go 150x150 on posts and 150x300 on profile pages.
    Thanks for the help Brogan
     
  14. Divvens

    Divvens Well-Known Member

    Brogan for the avatar change, to avoid making all the changes again after an update can I add this code to the extra.css?
    Code:
    .avatar .img.s { width: 48px;  height: 48px;  }
        .avatar .img.m { width: 150px;  height: 150px !important;  }
        .avatar .img.l { width: 150px; height: 300px !important; }
    
    #AccountMenu .menuHeader .links .fl
        {
            position: absolute;
            bottom: 10px;
            left: {xen:calc '10 + 10 + 150'}px !important;
        }
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    If it works then yes, that's the way to do it.
     
  16. Dubbed Navigator

    Dubbed Navigator Active Member

    This is really annoying me, adjusting the sizes has made no difference for me whatsoever

    Im just trying to get it so usernames fit on one line?
    upload_2013-12-18_18-48-27.png
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Have you considered reducing the font size of the user name?

    However, if you have e.g. 30 characters allowed for user names, then you're going to have the same issue with even longer user names.
     
  18. Dubbed Navigator

    Dubbed Navigator Active Member

    Oh i fully accept that, and the example above is a fairly lengthy username. Just irritated me a little that the changes i made to the width seemed to do nothing

    I have reduced it before but thought it a little small
     
  19. Shelley

    Shelley Well-Known Member

    You can calculate by setting a minimal font-size and setting a max character limit for usernames which works well and what I did at my site to stop usernames breaking onto a second line.
     
  20. Tracy Perry

    Tracy Perry Well-Known Member

    You mean I can't get you to change my username to "The little knowing, always wanting, frequently pestering Tracy Perry" at your site then? :p

    I personally limit my users to 15 characters in their name and use a font-size of 9 on MOST of my forums.
     

Share This Page