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

Avatar sizing

Discussion in 'Styling and Customization Questions' started by Lilie, Aug 9, 2012.

  1. Lilie

    Lilie Member

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

    MagnusB Well-Known Member

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

    Lilie Member

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

    MagnusB Well-Known Member

    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.
  5. Shelley

    Shelley Well-Known Member

    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 and Chris D like this.
  6. Lilie

    Lilie Member

    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?
    Adam Howard likes this.
  7. MagnusB

    MagnusB Well-Known Member

    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 likes this.
  8. Lilie

    Lilie Member

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

    Lilie Member

    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?
  10. MagnusB

    MagnusB Well-Known Member

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

    Lilie Member

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

    MagnusB Well-Known Member

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

    Lilie Member

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

    Lilie Member

    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?
  15. MagnusB

    MagnusB Well-Known Member

    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:
    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.

    Doh, I just realized my change would change the avatars several places. Corrected it so it only applies to the menu.
    Lilie likes this.
  16. Will

    Will Active Member

    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 likes this.
  17. Lilie

    Lilie Member

    Thank you! That fixed that problem.
    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.

Share This Page