Ribbon Banner

Just add to extra.less.
1589226218276.png

Less:
.userBanner {
    &.message-userBanner {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        position: relative;

        &.userBanner--staff {
            span {
                background-color: rgb(63, 81, 106);
            }
        }

        span {
            position: absolute;
            top: -3px;
            background-color: inherit;
            width: 5px;
            height: 3px;

            @media (max-width: (@xf-responsiveMedium)) {
                display: none;
            }

            &.userBanner-after {
                border-top-right-radius: 3px;
                right: 0;
            }

            &.userBanner-before {
                border-top-left-radius: 3px;
                left: 0;
            }
        }
    }
}
Also, you can slightly adjust and get this.
1589226306114.png

Less:
.message:not(.message--simple) {
    .message-user {
        border: 1px solid #e7e7e7;
        padding: 9px 3px 3px;
        @media (max-width: (@xf-responsiveMedium)) {
            border: none;
            padding: 0;
        }
    }

    .userBanner {
        &.message-userBanner {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            position: relative;
            margin-right: -9px;
            margin-left: -9px;

            &.userBanner--staff {
                span {
                    background-color: rgb(63, 81, 106);
                }
            }

            span {
                position: absolute;
                top: -3px;
                background-color: inherit;
                width: 5px;
                height: 3px;
                
                @media (max-width: (@xf-responsiveMedium)) {
                    display: none;
                }

                &.userBanner-after {
                    border-top-right-radius: 3px;
                    right: 0;
                }

                &.userBanner-before {
                    border-top-left-radius: 3px;
                    left: 0;
                }
            }
        }
    }
}
 
Back
Top