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

Help with margins

Neil E.

Active member
#1
I've been adjusting the userbit to regain some page height. I'd like to reduce some empty space as per this image. The idea is to make it look a bit more uniform because I get a lot of one-line postings.
xenforo41.jpg
 

Jake Bunce

XenForo moderator
Staff member
#2
Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code:
.messageList .message
{
	padding-bottom: 10px !important;
}

.message .messageInfo .messageContent
{
	min-height: 180px !important;
}
I just used a min-height for the message area. You may have to adjust it for your style.
 

Neil E.

Active member
#3
Thanks Jake, it worked fine.
The total amount of content in the signature has a bigger impact on positioning; I might not be able to achieve the reduced space I want.
I need to try the signature restriction addon.
 

MagnusB

Well-known member
#5
You have min-height: 300px !important on .message .messageInfo .messageContent, this will cause the message body to be 300px, at least. A standard post profile on your site is about 280px tall, that leaves 20px of nothing, as well as any padding or margins or whatever.
 

Neil E.

Active member
#6
I decided to set up the userbit so the distance above and below the userbit matched up. So all minimal content posts will have the same spacing and not consume too much real estate. I hate scrolling through big amounts of blank page. Similar to what is done on this forum by having only the avatar and description. I just added a small bit of "extra info".

xenforo72.jpg
 

MagnusB

Well-known member
#7
Code:
messageUserInfo {
float: left;
width: 124px;
margin: 10px 0;
}
Something like that will make set the top and bottom margin to 10px of the post profile.

EDIT:
The margin part, the rest is default xF CSS.
 

Neil E.

Active member
#8
I did a few things to get the layout I wanted (following Jake's recommendations).

.messageList .message
{
padding-bottom: 10px !important;
}
.message .messageContent
{
min-height: 170px !important;
}
You might want to consider using the Signature Restriction add-on. This lets you control various aspects of the signature area so users can't go wild adding stuff that makes it huge or look really wierd.
 

kkm323

Well-known member
#9
Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code:
.messageList .message
{
padding-bottom: 10px !important;
}
 
.message .messageInfo .messageContent
{
min-height: 180px !important;
}
I just used a min-height for the message area. You may have to adjust it for your style.
Thanks Jake