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

PVS

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

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

sukoro

Corporal
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

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

MasterCorporal
Tham gia
27/06/2015
Bài viết
336
Được Like
151
@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.
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom