Avatars/message info width at the side of posts

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.webp 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.webp 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)
 
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.
 
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.
 
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 :)
 
Top Bottom