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

Avatars/message info width at the side of posts

Discussion in 'Styling and Customization Questions' started by Drae, Sep 18, 2012.

  1. Drae

    Drae Active Member

    I've been working on two skins. In one of them, I managed to get the avatar to show on the left side of members' posts how I wanted. For the second one, I can't remember how I did it and am slowly breaking it bit by bit trying to get the width right...

    So please take a look at the uploaded files.

    avatar example.png Avatar Example is the one which I can't get the avatars (and avatar area/post side bar info bit) to look how I want width-wise.

    avatar example - wanted result.png Avatar Example - Wanted Result is how I want it to look width-wise when I am done.

    I've tried the Google Chrome Inspect Element you guys are so fond of but it's only making the situation worse as I've now fiddled with things I'm pretty sure I wasn't supposed to.

    So, to fix this, which bits should I be tweaking in the style properties and where in which templates?

    (Both my skins uses the Xenforo Default as the parent style)
     
  2. Iversia

    Iversia Well-Known Member

    These are the CSS template files you want to be looking at:

    message_user_info.css
    Code:
    .messageUserInfo {width:176px}
    message.css
    Code:
    .message .messageInfo {margin-left:195px}
    For the most part you want to be tweaking the Message Layout style property. I believe you'll also have to change the margin on the quick reply box as well.
     
    Drae likes this.
  3. MagnusB

    MagnusB Well-Known Member

    Moving the post profile to the right (or left) is easy, but you need to clean it up allot of places afterwards.

    1. Style properties -> Message Layout -> User Info Container:
    Change float:left to right.
    2. Same property, content container. Move the margin from left to right (note, if you increase the width of the post profile, you need to update this margin as well, to reflect the new width).

    You should not use extra.css for this, use style properties. From what I can see of your screenshots, you have increase the width of the post profile, but not change the margin. For example, if you increase the width of the post profile by 20px, you should increase the margin by 20px. You don't have to be exact, as it includes a small buffer as well.
     
    Drae likes this.
  4. Drae

    Drae Active Member

    Thank you for your help guys!

    I'll try this out later today and will let you know/reply here if I hit and roadblocks or if it is a success :)
     

Share This Page