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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 11/01/2020.

  1. PVS

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

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

    1578700464548.png

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


    Nguồn: xenforo.com​
     

Chia sẻ trang này