• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • 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
#1
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.png
 
#6
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
 

Trombones13

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

Trombones13

Well-known member
#13
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). :/
 

Shelley

Well-known member
#15
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. :)
 
F

Floris

Guest
#18
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.
 

Trombones13

Well-known member
#19
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... :)
 
#20
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.