• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Move postbit horizontally above posts

Trombones13

Well-known member
This modification, consisting merely of a few template edits, will move the postbit above the post, similar to many vB forums.

1. Open template message_user_info
1a. Replace template as follows:
Code:
<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope itemtype="http://data-vocabulary.org/Person">
	<div class="messageUserBlock">
<xen:if is="!{$isQuickReply}"><xen:if hascontent="true">
		<div class="extraUserInfo">
<xen:contentcheck>
<xen:if is="@messageShowMessageCount">
				<xen:if is="@messageShowRegisterDate">
					<dl class="pairsInline">
						<dt>{xen:phrase member_since}:</dt>
						<dd>{xen:date $user.register_date}</dd>
					</dl>
				</xen:if>
				<xen:if is="@messageShowGender AND {$user.gender}">
					<dl class="pairsInline">
						<dt>{xen:phrase gender}:</dt>
						<dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
					</dl>
				</xen:if>
				<xen:if is="@messageShowOccupation AND {$user.occupation}">
					<dl class="pairsInline">
						<dt>{xen:phrase occupation}:</dt>
						<dd itemprop="role">{xen:string censor, $user.occupation}</dd>
					</dl>
				</xen:if>
				<xen:if is="@messageShowLocation AND {$user.location}">
					<dl class="pairsInline">
						<dt>{xen:phrase location}:</dt>
						<dd><a href="http://maps.google.com/maps?q={xen:urlencode {xen:string censor, $user.location}}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
					</dl>
				</xen:if>
				<xen:if is="@messageShowHomepage AND {$user.homepage}">
					<dl class="pairsInline">
						<dt>{xen:phrase homepage}:</dt>
						<dd><a href="{$user.homepage}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
					</dl>
				</xen:if>
				<xen:comment>
				<xen:foreach loop="{$user.identities}" key="$service" value="$account">
					<dl class="pairsInline">
						<dt>{$service}</dt>
						<dd>{$account}</dd>
					</dl>
				</xen:foreach>
				</xen:comment></xen:if>
			</xen:contentcheck>
		</div>
<div class="extraUserInfo2">
<xen:contentcheck>
<xen:if is="@messageShowMessageCount">
					<dl class="pairsInline">
						<dt>{xen:phrase message_count}:</dt>
						<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a></dd>
					</dl>
				</xen:if>
				<xen:if is="@messageShowTotalLikes">
					<dl class="pairsInline">
						<dt>{xen:phrase likes_received}:</dt>
						<dd>{xen:number $user.like_count}</dd>
					</dl>
				</xen:if>
				<xen:if is="@messageShowTrophyPoints">
					<dl class="pairsInline">
						<dt>{xen:phrase trophy_points}:</dt>
						<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
					</dl>
				</xen:if>
			</xen:contentcheck>
		</div>
	</xen:if></xen:if>
		<div class="avatarHolder"><xen:avatar user="$user" size="m" itemprop="photo" /><xen:if is="!{$isQuickReply}"><h3 class="userText"><a {xen:if $user.user_id, 'href="{xen:link members, $user}" '}class="username" itemprop="name">{xen:helper richUserName, $user}</a><xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if></h3></xen:if></div>




	</div>
</div>

2. Open (or switch tab from the other template) template message_user_info.css
2a. Replace template as follows:
Code:
.messageUserInfo
{
	float: top;
	width: {xen:calc '@property "pageWidth";
margin: 0 35px;
min-width: {xen:calc '{$pageWidth'}px;
_width: {xen:calc '{$pageWidth'}px;
_margin: 0 auto;
/*width: 976px;
	margin: 0 auto;*/
@property "/pageWidth";'}px;
}

	.messageUserBlock
	{
		@property "messageUserBlock";
		background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
		border: 1px solid @primaryLighterStill;
		border-radius: 5px;
		@property "/messageUserBlock";
		position: relative;
	}
		.messageUserBlock div.avatarHolder
		{
			@property "messageAvatarHolder";
			background-color: @primaryLightest;
			padding: 10px;
			border-radius: 4px;
			@property "/messageAvatarHolder";
		}
			.messageUserBlock div.avatarHolder a
			{
				display: block;
			}
		.messageUserBlock h3.userText
		{
			@property "messageUserText";
			padding: 6px;
			@property "/messageUserText";
		}
		.messageUserBlock a.username
		{
			@property "messageUsername";
			font-weight: bold;
			display: block;
			overflow: hidden;
			@property "/messageUsername";
		}
		.messageUserBlock .userTitle
		{
			@property "messageUserTitle";
			font-size: 11px;
			display: block;
			@property "/messageUserTitle";
		}

.messageUserBlock .extraUserInfo2
		{
			@property "messageExtraUserInfo2";
			font-size: 11px;
			background-color: @primaryLightest;
			padding: 10px;
			border-radius: 4px;
			float: right;
			@property "/messageExtraUserInfo2";
		}
			.messageUserBlock .extraUserInfo2 dl
			{
				margin: 2px 0;
			}
				.messageUserBlock .extraUserInfo2 dt
				{
					font-size: 9px;
					display: block;
				}
		.messageUserBlock .extraUserInfo
		{
			@property "messageExtraUserInfo";
			font-size: 11px;
			background-color: @primaryLightest;
			padding: 10px;
			border-radius: 4px;
			float: right;
			@property "/messageExtraUserInfo";
		}
			.messageUserBlock .extraUserInfo dl
			{
				margin: 2px 0;
			}
				.messageUserBlock .extraUserInfo dt
				{
					font-size: 9px;
					display: block;
				}

		.messageUserBlock .arrow
		{
			position: absolute;
			top: 10px;
			right: -10px;
			display: block;
			width: 0px;
			height: 0px;
			line-height: 0px;
			border: 10px solid transparent;
			border-left-color: @messageUserBlock.border-color;
			border-right: none;
			/* Hide from IE6 */
			_display: none;
		}
			.messageUserBlock .arrow span
			{
				position: absolute;
				top: -10px;
				left: -11px;
				display: block;
				width: 0px;
				height: 0px;
				line-height: 0px;
				border: 10px solid transparent;
				border-left-color: @messageAvatarHolder.background-color;
				border-right: none;
			}

3. Now that the postbit is moved to the top, Quick Reply looks odd with a big margin on the left side, so let's open template quick_reply.css.
3a. Find this snippet of code:
Code:
#QuickReply
{
	margin-left: 140px;
}
3b. Replace it with:
Code:
#QuickReply
{
	padding-top: 10px;
}
Note that the "padding-top: 10px;" is optional, but I felt it looked better to add some space between the "blank" postbit and the Quick Reply box.

4. In message.css, change
Code:
.message .messageInfo
{
margin-left: 140px;
}
to
Code:
.message .messageInfo
{
margin-top: 20px;
}

I should also note that I split the "extra info" (post count, likes count, etc.) into two columns (see attachment below) so it wouldn't become too lengthy; that can be changed at your discretion by moving the different parts of .extraUserInfo and .extraUserInfo2.

Let me know if you find any problems or have suggestions to improve the code/design. :) Thanks; hope you enjoy!

To add the "speech bubble" arrow back, click here for directions.

XF Postbit at top 3.webp
 
*makes another*
Not sure what you're looking for by "comforting," but how's that, haha? :D *grumbles at smaller-than-desired image and goes to bed*
 
hey this is good, however dont forget to add the " > " to \/

you know what i mean right? just like in Xenforo avatar using >
so it would be good if you put it \/ under the avatar
just my 2cents
 
hey this is good, however dont forget to add the " > " to \/

you know what i mean right? just like in Xenforo avatar using >
so it would be good if you put it \/ under the avatar
just my 2cents
Sure--I left it off originally, but that can be added back fairly easily:

1. In message_user_info:
Above the final two </div> codes, add this code (note: it's already there in the original):
Code:
<span class="arrow"><span></span></span>

2. In message_user_info.css:
Replace everything below .messageUserBlock .arrow with this (just changing directions here):
Code:
		.messageUserBlock .arrow
		{
			position: absolute;
			left: 10px;
			bottom: -10px;
			display: block;
			width: 0px;
			height: 0px;
			line-height: 0px;
			border: 10px solid transparent;
			border-top-color: @messageUserBlock.border-color;
			border-bottom: none;
			/* Hide from IE6 */
			_display: none;
		}
			.messageUserBlock .arrow span
			{
				position: absolute;
				right: -10px;
				top: -11px;
				display: block;
				width: 0px;
				height: 0px;
				line-height: 0px;
				border: 10px solid transparent;
				border-top-color: @messageAvatarHolder.background-color;
				border-bottom: none;
			}

XF Postbit at top arrow.webp
 
in admincp

Style Properties: General
Page width controller
set to width 976px
View attachment 4798
Hmm; this seems to fix it:

In message_user_info.css, edit lines 6 and 7:
Code:
min-width: {xen:calc '{$pageWidth'}px;
_width: {xen:calc '{$pageWidth'}px;
I'll edit the code in the original post. Thanks for alerting me to it.

Quick Reply seems to go with whatever size you're at when you load the page (for example, when I have the window smaller, QR doesn't resize when I maximize the window). :/
 
edit, and it works, but in my attachment
testing code testing isnt under avatar, but stays in the middle.

4798
 
It's a nice idea but it still needs a bit of work. After testing it on my local hosting there are padding/size issues (code box) was one I noticed. I'll re-visit this template modification at a later date though. :)
 
  • Like
Reactions: D37
I really don't like this. I can't imagine why people want this. Unless they want to throw in a huge banner in that whitespace it creates on every post. It breaks the flow of reading dramatically.
 
I really don't like this. I can't imagine why people want this. Unless they want to throw in a huge banner in that whitespace it creates on every post. It breaks the flow of reading dramatically.
Thanks so much! Some people do prefer this layout, and there was no way I was going to attempt it myself.
I quite like the way XF handles the postbit on the left side, but some people (see quote) will want to continue using the style they're used to in vB, and this would provide that option if they so choose to use it. *shrug* To each his own, I suppose... :)
 
Hey Flo, we need info about message count, trophy, likes, and if it stay like xf default, you will see one post will take too much space, if using this postbit, then messagecount,trophy will stay on the right, and save space.
 
Top Bottom