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

PVS

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
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:
Bài viết liên quan
Lỗi Nội dung không mong muốn bởi muabandalat,
Trường "url" bị thiếu (nằm trong "author") bởi muabandalat,
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
Hiện bài viết trên thống kê. bởi maichi111,
Nội Dung Chỉ Hiển Thị Vị Trí Trang categories bởi muabandalat,
Xin hỏi addon thêm nội dung từng chuyên mục ( rút gọn ) - ( mở rộng ) ? bởi nhuttran913,
Bài viết mới
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
vậy niếu mình muốn thay đổi màu của thông tin đó thì sau nhỉ
 
  • Like
Reactions: THB
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
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ỉ
Nhấn để mở rộng...
thì sửa css chứ sao bạn jhgjdl;gdfgl;d

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
Nhấn để mở rộng...

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
 
ismartcom005 nói:
mình thấy bên phải mà :confused:, bạn muốn như vầy hả :D

View attachment 2047
Nhấn để mở rộng...
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
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
 
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 :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
Nhấn để mở rộng...
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
7,314 27 5
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố (Troubleshooting)

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Khám phá AI cùng người Việt
Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

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