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

PVS · 28/02/2015

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/xenforo/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;
			}
 
 
 
 
<xen:if is="@enableResponsive">
@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;
	}
}
</xen:if>

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

Jindo_Katori · 01/03/2015

Còn các reply còn lại cũng như vậy hay mặc định xếp ?

PVS · 01/03/2015

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

phamxuanphucuong · 01/03/2015

PVS nói:
các reply cũng như vậy luôn

nên làm cái #1 thôi !

Jindo_Katori · 02/03/2015

PVS nói:
các reply cũng như vậy luôn

Nhờ xếp edit chỉ cho post là nằm ngang thôi được huk xếp (để ưu tiên cho người mở chủ đề á mà)

PVS · 02/03/2015

Jindo_Katori nói:
Nhờ xếp edit chỉ cho post là nằm ngang thôi được huk xếp (để ưu tiên cho người mở chủ đề á mà)

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

Jindo_Katori · 02/03/2015

PVS nói:
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

Lót dép hóng xếp

PVS · 02/03/2015

Lê Thanh Giảng · 03/03/2015

vậy niếu mình muốn thay đổi màu của thông tin đó thì sau nhỉ

tieuquyphuongnam · 16/03/2015

Like .

luat.ngo · 02/04/2015

Bác cho em hỏi . cho nó hiển thị số điện thoại và địa chỉ lên luôn thì ntn ???

THB · 02/04/2015

luat.ngo nói:
Bác cho em hỏi . cho nó hiển thị số điện thoại và địa chỉ lên luôn thì ntn ???

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

sukoro · 24/04/2015

cái này chỉ dùng ở style mặc định mà thôi, và các thông tin thành viên sao nó ko hiện lên ở bên phải mà chỉ có avata, username và staff hiện lên ở bên trái thôi

ismartcom005 · 25/04/2015

Lê Thanh Giảng nói:
vậy niếu mình muốn thay đổi màu của thông tin đó thì sau nhỉ

thì sửa css chứ sao bạn

sukoro nói:
cái này chỉ dùng ở style mặc định mà thôi, và các thông tin thành viên sao nó ko hiện lên ở bên phải mà chỉ có avata, username và staff hiện lên ở bên trái thôi

bạn vào đúng style sửa lại file template theo như @PVS đã đề cập là được. bạn nên xem bạn sửa trên style nào

, mình nghĩ vậy

sukoro · 28/04/2015

ismartcom005 nói:
thì sửa css chứ sao bạn

bạn vào đúng style sửa lại file template theo như @PVS đã đề cập là được. bạn nên xem bạn sửa trên style nào , mình nghĩ vậy

Mình sửa nó vẫn không hiện thông tin bài viết, ngày tham gia, lượt thích bên tay phải
demo: http://ketoanclub.vn/forums

ismartcom005 · 28/04/2015

mình thấy bên phải mà

, bạn muốn như vầy hả

sukoro · 28/04/2015

ismartcom005 nói:
mình thấy bên phải mà , bạn muốn như vầy hả

View attachment 2047

Mỉnh sửa được rồi, nhưng nó lại có 1 vấn đề là khi mình chỉnh nhỏ cái block thông tin thành viên và avatar nhỏ lại rồi, nhưng cái ảnh nó vẫn to đùng, bây giờ mình muốn chỉnh cái ảnh avatar nó nhỏ lại nằm trong khung avatar thì làm sao bạn?
@bcat95 @ismartcom005

ismartcom005 · 28/04/2015

bạn tìm trong template xenforo.css sửa thử xem , xenforo nó quy định kích cỡ avatar như vầy :

library/XenForo/Model/Avatar.php bạn vào đó sửa m lại thành nhiêu tùy bạn

Mã:

 protected static $_sizes = array(
        'l' => 192,
        'm' => 96,
        's' => 48
    );

sau đó vào xenforo.css sửa :

Mã:

.avatar .img.m { width: 96px;  height: 96px;  }

sửa 96 thành kích cỡ bạn sửa ở trên

rồi navigation.css

Mã:

 #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }

thay 96 thành kích cỡ bạn sửa

chắc là vậy đó bạn thử xem

sukoro · 28/04/2015

Ca

ismartcom005 nói:
bạn tìm trong template xenforo.css sửa thử xem , xenforo nó quy định kích cỡ avatar như vầy :

library/XenForo/Model/Avatar.php bạn vào đó sửa m lại thành nhiêu tùy bạn

Mã:

protected static $_sizes = array( 'l' => 192, 'm' => 96, 's' => 48 );

sau đó vào xenforo.css sửa :

Mã:

.avatar .img.m { width: 96px; height: 96px; }

sửa 96 thành kích cỡ bạn sửa ở trên

rồi navigation.css

Mã:

#AccountMenu .menuHeader .links .fl { position: absolute; bottom: 10px; left: {xen:calc '10 + 10 + 96'}px; }

thay 96 thành kích cỡ bạn sửa

chắc là vậy đó bạn thử xem

Cảm ơn cậu nhiều, nó vẫn còn một cái nữa là cái mũi tên chỉ xuống ấy làm sao xóa nó hả bạn?

sukoro · 28/04/2015

Mình fix được rồi chỉ cần xóa mấy cái dòng arow và span đi là được

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
	Help Không thể đặt background full trang	Template Modifications	3	15/01/2018
	Other Đặt Banner quảng cáo chỉ hiện trên mobile	Template Modifications	2	19/10/2016
K	Help Cần người chỉ cách đặt banner	Template Modifications	6	26/08/2015
K	Help Giúp hướng dẫn đặt banner cho website !!! em thử tạo widgets để đặt mà ko đc ? ?	Template Modifications	2	19/08/2015
	Hướng dẫn cài đặt Chatbox giống Vnxf	Template Modifications	12	25/04/2015

XenForo 1	XenForo 2
Translate by PVS

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

Super Moderator

FirstSergeant

Super Moderator

Private

FirstSergeant

Super Moderator

FirstSergeant

Super Moderator

Lê Thanh Giảng

Khách VNXF

Corporal

Private

Founder

Corporal

MasterSergeant

Corporal

MasterSergeant

Corporal

MasterSergeant

Corporal

Corporal

Chủ đề tương tự

Hướng dẫn sử dụng

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ