• 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 said:
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... :)
Click to expand...

Nonstopname said:
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.
Click to expand...

Hey :)

Yes, I know. And my flavor is: no clutter! it's in the member card, which should be enough.
I like the philosophy of having the members focus on the content posted, the quality of it, rather than reply to someone based on their postcount or trophy points listing.
 
thats it flo, thats it.
the quality in post, rather than someone catch up postcount,
i agree, but for new forum, quantity win over quality :)
 
blahblah.webp

latest problem,
i will show my code
message_user_info
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>


<span class="arrow"><span></span></span>

	</div>
</div>

message_user_info.css
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;
			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;
			}

thank you
 
Nonstopname said:
what is that trombones?
Click to expand...
In our private conversation, send me your message.css template, because I think I edited that one too and forgot to include it here (originally, I was thinking that edit was used for another mod, but I'm pretty sure it was for this one). Thanks. :)
 
of course,

fresh install message.css
Code: 
.messageList .message
{
	border-bottom: 1px solid @primaryLighterStill;
	
	/*margin: 10px auto;
	padding-bottom: 20px;*/
	
	/* note this change does offset quote/bbcode boxes by their top margin... maybe that doesn't matter? */
	padding-top: 10px;
	padding-bottom: 30px;
}

{xen:helper clearfix, '.messageList .message'}

/*** Message block ***/

.message .messageInfo
{
	margin-left: 140px;
}

	.message .newIndicator
	{		
		display: block;
		float: right;
		margin-right: -{xen:calc '@content.padding-right + 5'}px;
		margin-top: -5px;
		margin-left: 5px;
		margin-bottom: 5px;
		position: relative;
		
		/*position: absolute;
		top: 7px;
		right: -{xen:calc '@content.padding-right + 5'}px;*/
		
		background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
		border: 1px solid @primaryLight;
		color: @contentBackground;
		font-size: 10px;
		font-weight: bold;
		padding: 1px 5px;
		border-radius: 3px;
		border-top-right-radius: 0px;
		box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
	}
	
		.message .newIndicator span
		{
			position: absolute;
			top: -4px;
			right: -1px;
			width: 5px;
			height: 4px;
			background: @primaryLight;
			border-top-right-radius: 3px;
		}

	.message .messageContent
	{
		min-height: 100px;
	}

		.message .messageText,
		.message .signature
		{
			@property "messageText";
			font-size: 11pt;
			font-family: Georgia, "Times New Roman", Times, serif;
			line-height: 1.4;
			@property "/messageText";
		}

		.message .signature
		{
			font-size: 9pt;
			margin-top: 5px;
			border-top: 1px dashed @primaryLighterStill;
			padding: 5px 0 0;
		}

	.message .messageMeta
	{
		font-size: 11px;
		margin: -5px;
		padding: 15px 5px 5px;
		overflow: hidden; zoom: 1;
	}

		.message .privateControls
		{
			float: left;
		}

			.message .privateControls .item
			{
				float: left;
				margin-right: 10px;
			}

		.message .publicControls
		{
			float: right;
		}

			.message .publicControls .item
			{
				float: left;
				margin-left: 10px;
			}

				.message .publicControls .reply .MultiQuote
				{
					visibility: hidden;
				}

					.message .publicControls .reply:hover .MultiQuote
					{
						visibility: visible;
					}
	
	.message .messageNotices
	{
		background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
		padding: 5px;
		font-size: 11px;
		border-radius: 5px;
		border: 1px solid @secondaryLight;
		margin: 10px 0;
	}
	
	.message .likesSummary
	{
		padding: 5px;
		border-radius: 5px;
		border: 1px solid @primaryLighterStill;
		margin-top: 10px;
	}
	
	.message .messageText > *:first-child
	{
		margin-top: 0;
	}

/* inline moderation changes */

.InlineModChecked .messageUserBlock,
.InlineModChecked .messageInfo,
.InlineModChecked .messageNotices,
.InlineModChecked .bbCodeBlock .type,
.InlineModChecked .bbCodeBlock blockquote,
.placeholder.InlineModChecked .placeholderContent
{
	@property "inlineModChecked";
	background: rgb(255,255,200) url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
	@property "/inlineModChecked";
}

.InlineModChecked .messageUserBlock div.avatarHolder
{
	background: transparent;
}

.InlineModChecked .messageUserBlock .finisher .inner
{
	border-left-color: rgb(255,255,200);
}

/* message list */

.messageList .newMessagesNotice
{
	margin: 10px auto;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid @primaryLighter;
	background: @primaryLighterStill url(@imagePath/xenforo/gradients/category-23px-light.png) repeat-x top;
	font-size: 11px;
}

/* deleted / ignored message placeholder */

.messageList .message.placeholder
{
	border: none;
	margin: 10px 0;
	padding: 0;
}

.messageList .placeholder .placeholderContent
{
	overflow: hidden; zoom: 1;
	border: 1px solid @primaryLighterStill;
	background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
	padding: 5px;
	border-radius: 5px;
	color: @primaryLightish;
	font-size: 11px;
}

	.messageList .placeholder a.avatar
	{
		float: left;
		margin-right: 5px;
		display: block;
	}
		
		.messageList .placeholder a.avatar img
		{
			width: 24px;
			height: 24px;
			display: block;
		}
	
	.messageList .placeholder .privateControls
	{
		margin-top: 2px;
	}

/* messages remaining link */

/*.postsRemaining
{
	margin: 5px 0 10px;
	text-align: right;
}*/

	.postsRemaining a,
	a.postsRemaining
	{
		font-size: 11px;
		color: @mutedTextColor;
	}
 
Aha; yup.

Change
Code: 
.message .messageInfo
{
	margin-left: 140px;
}
to
Code: 
.message .messageInfo
{
	margin-top: 20px;
}
and let me know if that fixes it. :)
 
Nonstopname said:
fixed!
last problem, after edit the template, my style from fixed to fluid, how to bring back to fixed?
Click to expand...
Appearance->Style Properties->General
Try editing the code under "Miscellaneous" to a constant (i.e. 976px) instead of pageWidth and let me know if that works. If not, try editing the width (lines 6 and 7) of message_user_info.css.
 
Floris said:
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.
Click to expand...

It only breaks the flow of reading if the posts are all fairly long - if you've got a lot of short posts, horizontal is actually easier to read. If you keep all the information like username and title to the right of the av, then the username area (what's the technical name? Info holder?) is never taller than the height of the av, no matter how much information you cram into it.
 
Shelley (or anyone else), when you have some time (doesn't need to be immediately), could you send examples/screen caps of the display issues you were having?
 
Can it be done so the username and usertitle are placed on the right of the avatar instead of underneath as in this pic:
img1.webp
 
Yeah, but some people may need it for certain situations...as I do...just wish I could find a way to have the username and title beside the avatar and not below it
 
It's all good. The first forum I ever joined used horizontal postbit. I'm not hating. It just doesn't look like it fits xenforo.
 
You must log in or register to reply here.
Top Bottom