Tutorial 2x Horizontal Postbit Design - Thiết kế Postbit nằm ngang cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,977
Được Like
11,316
Horizontal Postbit Design - Thiết kế Postbit nằm ngang cho XenForo 2

Thiết kế postbit đơn giản này sử dụng thiết kế nằm ngang thay vì thiết kế postbit theo chiều dọc của Xf2 bao gồm bố cục dựa vào css.

xftr-xenforo-2-yatay-postbit.png

Tất cả bạn phải làm cho điều này là thêm đoạn code bên dưới vào template extra.less:
Mã:
.message-avatar {
    float: left
}

@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }
}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    background: azure;
    margin-right: -10px
}

.message-userArrow {
    top: 0px !important;
    right: 0px !important;
    border: 0px solid transparent !important
}

.message-userArrow:after {
    border: 0px solid transparent !important
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: left !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    border: 1px solid rgba(11,76,91,0.2);
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: 50%;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}

Lưu lại là xong.

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Được Like
278
Thank bác, đúng lúc đang cần :D
 

sukoro

Thượng Đế
Tham gia
02/04/2015
Bài viết
183
Được Like
107
Horizontal Postbit Design - Thiết kế Postbit nằm ngang cho XenForo 2

Thiết kế postbit đơn giản này sử dụng thiết kế nằm ngang thay vì thiết kế postbit theo chiều dọc của Xf2 bao gồm bố cục dựa vào css.

Tất cả bạn phải làm cho điều này là thêm đoạn code bên dưới vào template extra.less:
Mã:
.message-avatar {
    float: left
}

@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }
}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    background: azure;
    margin-right: -10px
}

.message-userArrow {
    top: 0px !important;
    right: 0px !important;
    border: 0px solid transparent !important
}

.message-userArrow:after {
    border: 0px solid transparent !important
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: left !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    border: 1px solid rgba(11,76,91,0.2);
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: 50%;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}

Lưu lại là xong.

Chúc các bạn thành công.


Nguồn: xenforo.com​
Còn hiện thêm thông tin như ngày nhập, nơi ở ... sang bên phải thì làm thế nào bạn?
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,977
Được Like
11,316
Còn hiện thêm thông tin như ngày nhập, nơi ở ... sang bên phải thì làm thế nào bạn?
Vào Style Properties > Message > kéo xuống tích vào các ô bên dưới
 

dakhucquan.net

Thượng Đế
Tham gia
27/06/2015
Bài viết
337
Được Like
152
@PVS Hi bác, cho e hỏi chút, Chỉ post #1 nằm ngang được không bác? tks bác nhiều.
 

đình hoàng

Thượng Đế
Tham gia
15/04/2015
Bài viết
69
Được Like
47
Cho xuống dưới bài viết thì như nào bác nhỉ?
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom