模板修改 vBulletin 3.x 帖文单元风格(用户资讯在帖文正文上方)

  • 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件、模板主题售前、售后问题请联系QQ:5916171
UID
573
注册
2020/01/08
消息
14
反馈评分
8
黄金
253.4G
修改「Extra.less」范本,在该范本的末尾插入下文:

CSS:
.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;}}}

完工。
效果图我就不传了,各位直接试就行。注意别忘了开启帖文单元当中的用户资料直接显示,否则用户资料右边空荡荡的也不好。

1578700464548.png1578700432137.png
 
最后编辑:
  • 爱心
反馈: 香草大叔

香草大叔

联合国秘书长
UID
48
注册
2017/11/27
消息
74
反馈评分
22
黄金
2,809.8G
    Windows 10 Chrome 79.0.3945.117
  • #2
这个不错,我试一下