Avatar sizing

[Lilie]

I just finished reading this thread.

I replicated the edits, to make a 200x200 avatar size... but it's messed up. How would I fix this problem?

Now, this is making me think 200x200 is a bit much haha, I might go back to 150x150 avatars, but 200x2oo is what we use on the current forum. It would still be nice to be able to fix this! (also is it possible to use the small avatar in the reply box? Or the large avatar in the post box/medium in reply?

Please and thank you!

 

[MagnusB]

The entire postbit stuff are fixed width, and to top it off, the message is placed with a margin of that width + 20 px or something. . If you change the width of one, you need to edit the width of the message and postbit to make sure everything is OK. I am pretty sure you can do this all via style properties...

 

[Lilie]

The entire postbit stuff are fixed width, and to top it off, the message is placed with a margin of that width + 20 px or something. . If you change the width of one, you need to edit the width of the message and postbit to make sure everything is OK. I am pretty sure you can do this all via style properties...

Thank you for the reply! But what part of the style properties, if you don't mind me asking?
Apologies for sounding a little less bright than I should be, I'm used to being able to insert a value and boom done avatar sizes are okay. Call me spoiled, but my old forum software made it easy.
I would just keep it to default but my members like the 200x200 avatars.

 

[MagnusB]

Message Layout -> User Info Container and Content Container. For content container, you need to edit the margin left property, with some simple math. If you increase the width of the user info container by 150px (example) then you need to add 150 to the number in the margin left property in content container.

 

[Shelley]

I remember somebody had a issue similiar to this and here is what I had in my extra.css You'll have to adjust the sizes accordingly as your sizes are different.

.messageUserInfo {
    width: 154px !important;
}

.message .messageInfo {
    margin-left: 167px !important;
}

#QuickReply {
    margin-left: 167px !important;
}

 

[Lilie]

I remember somebody had a issue similiar to this and here is what I had in my extra.css You'll have to adjust the sizes accordingly as your sizes are different.

.messageUserInfo {
    width: 154px !important;
}
 
.message .messageInfo {
    margin-left: 167px !important;
}
 
#QuickReply {
    margin-left: 167px !important;
}

Thank you, that's what I was asking for.
I didn't know which properties to change, I guess I should invest in downloading firebug huh?

 

[MagnusB]

The style properties I referred to you find in the admin CP - Appearance - Style properties. I just recommended that route, since I hate defining CSS in doubles (I am OCD about that stuff).

If you are working on a site and intend to do some editing in the style, getting firebug is definitely worth your time. It is a life saver, I would be next to helpless without it (or developer tools in Chrome).

 

[Lilie]

The style properties I referred to you find in the admin CP - Appearance - Style properties. I just recommended that route, since I hate defining CSS in doubles (I am OCD about that stuff).

If you are working on a site and intend to do some editing in the style, getting firebug is definitely worth your time. It is a life saver, I would be next to helpless without it (or developer tools in Chrome).

Ah, thank you. Everyone is so helpful here!
I don't regret buying this.

 

[Lilie]

Ah, thank you. Everyone is so helpful here!
I don't regret buying this.

I remember somebody had a issue similiar to this and here is what I had in my extra.css You'll have to adjust the sizes accordingly as your sizes are different.

.messageUserInfo {
    width: 154px !important;
}
 
.message .messageInfo {
    margin-left: 167px !important;
}
 
#QuickReply {
    margin-left: 167px !important;
}

I can't find this in extra.css, using Xenforo. Should I go through FTP to do this?If so, what's the directory?
Another thing.

The quick reply box is pushed over now, would I need to make it smaller or adjust some overflow property?

 

[MagnusB]

This is most definately a spacing issue. xF doesn't have templates stored in file system, you need to edit them via the admin CP - Appearance - Templates. I am not 100% sure about this, but about 99% sure, if you follow my suggestion, the margin should be updated to the quickreply editor as well.

 

[Lilie]

Ah, thanks.
How would I nudge the message itself over? The little > thing is running into the text.

 

[MagnusB]

It's difficult for me to say just by looking at the picture, but your margins are off by a few px, I would say bump it up about 10px and try from there.

 

[Lilie]

It's difficult for me to say just by looking at the picture, but your margins are off by a few px, I would say bump it up about 10px and try from there.

Bump which margins? I've tried everything.
I know it's possible to do and looks good too but...

 

[Lilie]

Here I drew on it to show what I mean.

Oh, and...

How do I make that avatar show up as the one that says Aimiiyuki?

 

[MagnusB]

Yeah, the 200 by 200 avatars are too big, you need to make some adjustments. For one, I really suggest you follow my suggestion above:

Message Layout -> User Info Container and Content Container. For content container, you need to edit the margin left property, with some simple math. If you increase the width of the user info container by 150px (example) then you need to add 150 to the number in the margin left property in content container.

You will find those style properties in the admin CP -> Appearance -> Style Properties.

As for the menu, you need to do some redesigning. By default, that menu has the avatar floating at the left, and the user name and title to the right of that, as well as the link to your profile page absolutely positioned. You will need to change it so that the avatar is first, then the username and title and stuff is below that. It can probably be done with a few simple CSS edits, though there might be some unforeseen issues with your site, so I can't really recommend a method of doing this.

EDIT: Or, if I would read your post correctly, just resize the avatar using CSS:

.Menu .avatar .img.m { width: 96px; height: 96px; background-size: 96px 96px }

Note, the background-size isn't fully supported by all browsers, so expect varying results.

EDIT:
Doh, I just realized my change would change the avatars several places. Corrected it so it only applies to the menu.

 

[Will]

For the message area, you can add a little padding which should do it. You can do something like this:

.message .messageInfo { padding-left: 10px !important; }
#QuickReply { padding-left: 5px !important; }

You can obviously set those numbers to the way you like.

As for the menu, you would have to increase the width first on it. I will look at it in a bit to see if I can come up with something.

 

[Lilie]

For the message area, you can add a little padding which should do it. You can do something like this:

.message .messageInfo { padding-left: 10px !important; }
#QuickReply { padding-left: 5px !important; }

You can obviously set those numbers to the way you like.

As for the menu, you would have to increase the width first on it. I will look at it in a bit to see if I can come up with something.

Thank you! That fixed that problem.

EDIT: Or, if I would read your post correctly, just resize the avatar using CSS:

.Menu .avatar .img.m { width: 96px; height: 96px; background-size: 96px 96px }

Note, the background-size isn't fully supported by all browsers, so expect varying results.

EDIT:
Doh, I just realized my change would change the avatars several places. Corrected it so it only applies to the menu.

Oh! Figured it out!


Thank you all SO much! I'm sorry I have so many questions, I just don't wanna mess things up.