Tutorial 2x vBulletin 3.x style postbit - Giao diện postbit giống vBulletin 3.x cho XenForo 2

[PVS]

vBulletin 3.x style postbit - Giao diện postbit giống vBulletin 3.x cho XenForo 2

Đặt đoạn code CSS sau vào cuối template "Extra.less":

.block--messages .message {
    &.is-mod-selected {border-color: transparent; border-bottom-color: @xf-inlineModHighlightColor;}
}
.blockMessage {box-shadow: none;
    &.blockMessage--none {box-shadow: none;}
}

.block--messages {.block-container {box-shadow: none;}}

.message-inner {display: block;}
.message-cell {
    .m-clearFix();
    &.message-cell--user {
        width: auto;
        border-right: none;
        border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
    }
    &.message-cell--main {padding-left: @xf-messagePadding;}
    &.message-cell--extra {
        width: auto;
        border-left: none;
    }
    .message--quickReply {}
}
.message--quickReply .message-cell--user {display:none;}

.message-userArrow {
    top: auto;
    right: auto;
    bottom: -1px;
    left: ((@avatar-s));
    content: "";
    border: none;
    .m-triangleLeft(@xf-contentBg, @xf-messagePadding - 1px);
    .m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);

    &:after {
        top: auto;
        right: auto;
        left: -(@xf-messagePadding - 1px);
        bottom: -@xf-messagePadding;
        border: none;
        .m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px);
    }
}

.message-avatar {margin-bottom: 0; .avatar {& + .message-avatar-online {left: auto; right: 0;}}}
.message-name {font-size: @xf-fontSizeLarge; text-align: left;}
.message-user {display: flex;}
.message-userTitle {display: inline-block; text-align: left;}
.message-userBanner.userBanner {
    width: -moz-fit-content;
    width: fit-content;
    text-align: left;
    margin: 3px 0 0 0;
}
.message-userDetails {
    flex: 1;
    min-width: 0;
    padding-left: @xf-messagePadding;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.message--deleted {display: block;}

@media (max-width: @xf-messageSingleColumnWidth) {.message:not(.message--forceColumns) {.message-name {font-size: inherit;}}}

Kết quả:

​

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

Nguồn: xenforo.com​

 

[donquaca]

cảm ơn nhé