Changing width of user info container

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)
 
You also need to update Style Properties -> Message Layout -> Content Container -> Margin: Left

Make it 10-20px wider than the user info container width.
 
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?
 
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)?
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.

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?
I knew that was coming ;)
See this post: http://xenforo.com/community/threads/how-do-i-change-avatar-size.6817/#post-109103
 
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)
 

Attachments

  • Untitled-1.webp
    Untitled-1.webp
    6.3 KB · Views: 126
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.webp
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">
 
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.
 
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?
 

Attachments

  • fine.webp
    fine.webp
    16.3 KB · Views: 108
  • notfine.webp
    notfine.webp
    77.2 KB · Views: 109
.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.
 
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;
    }
 
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.
 
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
 
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

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.
 
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.
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.
 
Top Bottom