• 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

Divvens

Well-known member
#1
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)
 

Brogan

XenForo moderator
Staff member
#2
You also need to update Style Properties -> Message Layout -> Content Container -> Margin: Left

Make it 10-20px wider than the user info container width.
 

Divvens

Well-known member
#3
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?
 

Brogan

XenForo moderator
Staff member
#4
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
 

Divvens

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

Brogan

XenForo moderator
Staff member
#6
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.
 

Divvens

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

Brogan

XenForo moderator
Staff member
#8
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.
 

Divvens

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

Divvens

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

Divvens

Well-known member
#14
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;
    }
 

Brogan

XenForo moderator
Staff member
#17
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
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
 

Shelley

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

Tracy Perry

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