Đặt dọc thông tin người dùng với phương nằm ngang

vnxf - Mẫu sửa đổi này sẽ cho phép bạn đặt các thông tin người dùng với phương nằm ngang.

​

Đi đến các mẫu style của bạn và tìm kiếm "message_user_info.css". Thay thế nội dung của nó với mã dưới đây:
​

Mã:

.messageUserInfo
{
	@property "messageUserInfo";
	margin-bottom: 20px;
	@property "/messageUserInfo";
}

	.messageUserBlock
	{
		@property "messageUserBlock";
		background: @primaryLighterStill url('@imagePath/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/gradients/tab-selected-light.png') repeat-x bottom;
		border: 1px solid @primaryLighterStill;
		border-radius: 5px;
		height: 122px;
		@property "/messageUserBlock";

		position: relative;
	}

		.messageUserBlock div.avatarHolder
		{
			@property "messageAvatarHolder";
			background-color: @primaryLightest;
			padding: 10px;
			margin-right: 15px;
			border-radius: 4px;
			float: left;
			@property "/messageAvatarHolder";

			position: relative;
		}

			.messageUserBlock div.avatarHolder .avatar
			{
				display: block;
				font-size: 0;
			}

			.messageUserBlock div.avatarHolder .onlineMarker
			{
				position: absolute;
				top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
				left: {xen:calc '@messageAvatarHolder.padding-right - 1'}px;

				@property "messageOnlineMarker";
				border: 7px solid transparent;
				border-top-color: rgb(127, 185, 0);
				border-left-color: rgb(127, 185, 0);
				border-top-left-radius: 5px;
				border-top-right-radius: 3px;
				border-bottom-left-radius: 3px;
				@property "/messageOnlineMarker";
			}

		.messageUserBlock h3.userText
		{
			@property "messageUserText";
			padding: 6px;
			@property "/messageUserText";
		}

		.messageUserBlock .userBanner:last-child
		{
			margin-bottom: 0;
		}
		.messageUserBlock a.username
		{
			@property "messageUsername";
			font-weight: bold;
			display: inline;
			overflow: hidden;
			line-height: 16px;
			@property "/messageUsername";

		}

		.messageUserBlock .userTitle
		{
			@property "messageUserTitle";
			font-size: 11px;
			margin-bottom: 16px;
			display: block;
			@property "/messageUserTitle";
		}

		.messageUserBlock .extraUserInfo
		{
			@property "messageExtraUserInfo";
			font-size: 10px;
			background-color: @primaryLightest;
			padding: 10px 10px 7px;
			margin: -58px 0;
			border-radius: 4px;
			float: right;
			height: 105px;
			@property "/messageExtraUserInfo";
		}

			.messageUserBlock .extraUserInfo img
			{
				max-width: 100%;
			}

		.messageUserBlock .arrow
		{
			position: absolute;
			top: 123px;
			left: 10px;

			display: block;
			width: 0px;
			height: 0px;
			line-height: 0px;

			border: 10px solid transparent;
			border-top-color: @messageUserBlock.border-color;
			-moz-border-top-colors: @messageUserBlock.border-color;

			/* Hide from IE6 */
			_display: none;
		}

			.messageUserBlock .arrow span
			{
				position: absolute;
				top: -11px;
				left: -10px;

				display: block;
				width: 0px;
				height: 0px;
				line-height: 0px;

				border: 10px solid transparent;
				border-top-color: @messageAvatarHolder.background-color;
				-moz-border-top-colors: @messageAvatarHolder.background-color;
			}


@media (max-width:@maxResponsiveNarrowWidth)
{
	.Responsive .messageUserInfo
	{
		float: none;
		width: auto;
	}

	.Responsive .messageUserBlock
	{
		margin-bottom: 5px;
		position: relative;
		height: 64px;
	}

	.Responsive .messageUserBlock div.avatarHolder
	{
		float: left;
		padding: 5px;
	}

		.Responsive .messageUserBlock div.avatarHolder .avatar img
		{
			width: 48px;
			height: 48px;
		}

		.Responsive .messageUserBlock div.avatarHolder .onlineMarker
		{
			top: 4px;
			left: 4px;
			border-width: 6px;
		}

	.Responsive .messageUserBlock h3.userText
	{
		margin-left: 64px;
	}
	.Responsive .messageUserBlock .userBanner
	{
		max-width: 150px;
		margin-right: 0;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		position: static;
		display: inline-block;
	}
		.Responsive .messageUserBlock .userBanner span
		{
			display: none;
		}

	.Responsive .messageUserBlock .extraUserInfo
	{
		display: none;
	}
	.Responsive .messageUserBlock .arrow
	{
		top: 65px;
	}
}

Sau đó thực hiện tìm kiếm cho "EXTRA.css" và thêm mã này:

Mã:

.messageUserBlock .pairsJustified
{
	line-height: inherit;
	margin-top: -5px;
	padding-bottom: 7px;
}

.message .messageInfo
{
	margin: 0 !important;
}

.quickReply .messageUserBlock .arrow
{
	top: 10px;
	left: 123px;
	border: 10px solid transparent;
	border-left-color: @messageUserBlock.border-color;
	-moz-border-left-colors: @messageUserBlock.border-color;
	border-right: none;
}

.quickReply .messageUserBlock .arrow span
{
	top: -10px;
	left: -11px; 
	border: 10px solid transparent;
	border-left-color: @messageAvatarHolder.background-color;
	-moz-border-left-colors: @messageAvatarHolder.background-color;
	border-right: none;
}

.quickReply .messageUserInfo
{
	float: left !important;
}

.quickReply .messageUserBlock div.avatarHolder
{
	margin-right: 0 !important;
}

.messageUserBlock .userBanner
{
	position: absolute !important;
	top: 40px;
}

.messageUserBlock .userBanner.wrapped span
{
	display: none;
}

.messageUserBlock .userBanner.wrapped
{
	border-radius: 3px !important;
	margin-left: 80px;
}

.messageUserBlock .userBanner.bannerStaff
{
	margin-left: 0 !important;
}

Demo

​

 

các reply cũng như vậy luôn

 

bài này chỉ hướng dẫn để cho đồng bộ thôi , sẽ có 1 bài hướng dẫn khác để ưu tiên cho post nha

 

bác xem cái này thử: http://vnxf.vn/threads/huong-dan-minh-cach-lay-custom-field-cua-user.782.html