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

XF 1.2 Increasing Extra User Info Box Size

Discussion in 'Styling and Customization Questions' started by Amaury, Dec 19, 2013.

  1. Amaury

    Amaury Well-Known Member

    How do I increase its size? I want the location to be on the same line as Location.

    Extra User Info.png
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Edit the width of messageUserInfoBox. I believe there is a style property for it.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    There is indeed a style property for it: User Info Block. By default, the width box is blank, so I made the width 175px. Additionally, I had to, of course, increase the left margin in Content Container to accommodate that.

    The only problem is that now the avatar isn't centered in the highlighted areas. How do I center it?


    [​IMG]
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    .messageUserInfo .avatar should allow you to apply CSS.
     
    Amaury likes this.
  5. Amaury

    Amaury Well-Known Member

    That would be in EXTRA.css, right? I don't think there's a style property for it.
     
  6. Jeremy

    Jeremy XenForo Moderator Staff Member

    Yes.
     
    Amaury likes this.
  7. Amaury

    Amaury Well-Known Member

    Would this be right?

    Code:
    .messageUserInfo .avatar {
        position: center;
    }
     
  8. Amaury

    Amaury Well-Known Member

    I'm having no luck.
     
  9. Jeremy

    Jeremy XenForo Moderator Staff Member

    That's because position: center isn't valid CSS. Use an auto left margin.
     
  10. Amaury

    Amaury Well-Known Member

    left-margin; something px?
     
  11. Jeremy

    Jeremy XenForo Moderator Staff Member

    Use an auto margin.
     
  12. Amaury

    Amaury Well-Known Member

    What's an auto margin? (Sorry.)
     
  13. Jeremy

    Jeremy XenForo Moderator Staff Member

    left-margin: auto;

    margin: auto 0;
     
  14. Amaury

    Amaury Well-Known Member

    Sorry, I should have known that.

    Anyway, I tried this, and it isn't working:
    Code:
    .messageUserInfo .avatar {
        left-margin: auto;
        margin: auto 0;
    }
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    Try:
    Code:
    .messageUserBlock div.avatarHolder .avatar
    {
    text-align: center;
    }
    That works on the default style for me.
     
  16. Amaury

    Amaury Well-Known Member

    That did it!

    Thanks, Paul!
     
    Adam Howard likes this.
  17. Amaury

    Amaury Well-Known Member

    Hm.

    @Brogan: I'm curious. Why wasn't @Jeremy's code working for me?
     
    Adam Howard likes this.

Share This Page