• 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

Drae

Active member
#1
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)
 

Iversia

Well-known member
#2
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.
 

MagnusB

Well-known member
#3
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

Active member
#4
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 :)