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

Admin

Administrator
Nhân viên
Tham gia
17/5/23
Bài viết
13
Điểm tương tác
0
Điểm
1
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.
 
Chỉnh sửa lần cuối:
Back
Bên trên