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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,706
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.

Screenshot_1.png


Screenshot_2.png


Đ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

Screenshot_3.png


Screenshot_4.png
 
Sửa lần cuối bởi điều hành viên:

Jindo_Katori

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,454
Được Like
1,193
Còn các reply còn lại cũng như vậy hay mặc định xếp ?
 
  • Like
Reactions: THB

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,706
L

Lê Thanh Giảng

Khách VNXF
vậy niếu mình muốn thay đổi màu của thông tin đó thì sau nhỉ
 
  • Like
Reactions: THB

luat.ngo

Private
Tham gia
02/04/2015
Bài viết
35
Được Like
21
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 ???
 
  • Like
Reactions: THB

sukoro

Corporal
Tham gia
02/04/2015
Bài viết
183
Được Like
107
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
 
  • Like
Reactions: THB

ismartcom005

MasterSergeant
Tham gia
14/04/2015
Bài viết
839
Được Like
798
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 jhgjdl;gdfgl;d

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 :D, mình nghĩ vậy
 

sukoro

Corporal
Tham gia
02/04/2015
Bài viết
183
Được Like
107
mình thấy bên phải mà :confused:, bạn muốn như vầy hả :D

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
 
Sửa lần cuối:
  • Like
Reactions: THB

ismartcom005

MasterSergeant
Tham gia
14/04/2015
Bài viết
839
Được Like
798
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 :D

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 :D
 

sukoro

Corporal
Tham gia
02/04/2015
Bài viết
183
Được Like
107
Ca
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 :D

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 :D
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?
 
  • Like
Reactions: THB

sukoro

Corporal
Tham gia
02/04/2015
Bài viết
183
Được Like
107
Mình fix được rồi chỉ cần xóa mấy cái dòng arow và span đi là được
 
  • Like
Reactions: THB

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

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom