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

Thảo luận trong 'Template Modifications' bắt đầu bởi PVS, 28/02/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,779
    Đã được thích:
    7,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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/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

    Screenshot_3.png

    Screenshot_4.png
     
    Last edited by a moderator: 28/02/2015
  2. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Còn các reply còn lại cũng như vậy hay mặc định xếp ?
     
    THB thích bài này.
  3. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,779
    Đã được thích:
    7,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    các reply cũng như vậy luôn :D
     
    THB and Jindo_Katori like this.
  4. phamxuanphucuong

    phamxuanphucuong Thượng Đế

    Tham gia:
    26/02/2015
    Bài viết:
    17
    Đã được thích:
    18
    Điểm thành tích:
    3
    Giới tính:
    Nam
    nên làm cái #1 thôi !
     
    THB thích bài này.
  5. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    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à)
     
    THB thích bài này.
  6. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,779
    Đã được thích:
    7,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    bài này chỉ hướng dẫn để cho đồng bộ thôi :D, sẽ có 1 bài hướng dẫn khác để ưu tiên cho post nha :)
     
    THB, spham and Jindo_Katori like this.
  7. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Lót dép hóng xếp
     
    THB thích bài này.
  8. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,779
    Đã được thích:
    7,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    :D
     
    THB thích bài này.
  9. Lê Thanh Giảng

    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ỉ
     
    THB thích bài này.
  10. tieuquyphuongnam

    tieuquyphuongnam Thượng Đế

    Tham gia:
    11/03/2015
    Bài viết:
    101
    Đã được thích:
    53
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Web:
    Like .
     
    THB thích bài này.
  11. luat.ngo

    luat.ngo Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    35
    Đã được thích:
    21
    Điểm thành tích:
    8
    Giới tính:
    Nam
    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 thích bài này.
  12. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
  13. sukoro

    sukoro Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    141
    Đã được thích:
    90
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    Hà Nội
    Web:
    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
     
    THB thích bài này.
  14. ismartcom005

    ismartcom005 Thượng Đế

    Tham gia:
    14/04/2015
    Bài viết:
    839
    Đã được thích:
    794
    Điểm thành tích:
    93
    Giới tính:
    Nam
    thì sửa css chứ sao bạn jhgjdl;gdfgl;d

    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
     
    THB and Lê Thanh Giảng like this.
  15. sukoro

    sukoro Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    141
    Đã được thích:
    90
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    Hà Nội
    Web:
    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
     
    THB thích bài này.
  16. ismartcom005

    ismartcom005 Thượng Đế

    Tham gia:
    14/04/2015
    Bài viết:
    839
    Đã được thích:
    794
    Điểm thành tích:
    93
    Giới tính:
    Nam
    mình thấy bên phải mà :confused:, bạn muốn như vầy hả :D

    2x.png
     
    sukoro thích bài này.
  17. sukoro

    sukoro Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    141
    Đã được thích:
    90
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    Hà Nội
    Web:
    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
     
    Chỉnh sửa cuối: 28/04/2015
    THB thích bài này.
  18. ismartcom005

    ismartcom005 Thượng Đế

    Tham gia:
    14/04/2015
    Bài viết:
    839
    Đã được thích:
    794
    Điểm thành tích:
    93
    Giới tính:
    Nam
    bạn tìm trong template 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.css sửa thử xem , 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 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 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.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
     
    THB and sukoro like this.
  19. sukoro

    sukoro Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    141
    Đã được thích:
    90
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    Hà Nội
    Web:
    Ca
    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?
     
    THB thích bài này.
  20. sukoro

    sukoro Thượng Đế

    Tham gia:
    02/04/2015
    Bài viết:
    141
    Đã được thích:
    90
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nơi ở:
    Hà Nội
    Web:
    Mình fix được rồi chỉ cần xóa mấy cái dòng arow và span đi là được
     
    THB thích bài này.

Chia sẻ trang này