Thêm ruy băng Staff vào Message info

[NDK]

Hướng dẫn làm ruy băng Staff như bác @PVS trong bài viết Hiển thị ruy băng Staff bắt chéo ở Message User Info 1.4.0. Mình cũng xin được góp 1 chút hướng dẫn cách làm kiểu này bằng code:
Các bạn tải về hình ảnh ruy băng về, upload lên host theo đường dẫn /styles/style bạn đang dùng/xenforo.

Sau đó, các bạn tìm template message_user_info.css, tìm đoạn code:

.messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
          
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
          
            border: 10px solid transparent;
            border-left-color: @messageUserBlock.border-color;
            -moz-border-left-colors: @messageUserBlock.border-color;
            border-right: none;
          
            /* Hide from IE6 */
            _display: none;
        }
      
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
              
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
              
                border: 10px solid transparent;
                border-left-color: @messageAvatarHolder.background-color;
                -moz-border-left-colors: @messageAvatarHolder.background-color;
                border-right: none;
            }

<xen:if is="@enableResponsive">

Thay toàn bộ bằng:

.messageUserBlock .arrow
        {
            position: absolute;
            top: 45px;
            right: -10px;
          
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
          
            border: 10px solid transparent;
            border-left-color: @messageUserBlock.border-color;
            -moz-border-left-colors: @messageUserBlock.border-color;
            border-right: none;
          
            /* Hide from IE6 */
            _display: none;
        }
      
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
              
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
              
                border: 10px solid transparent;
                border-left-color: @messageAvatarHolder.background-color;
                -moz-border-left-colors: @messageAvatarHolder.background-color;
                border-right: none;
            }

/*Staff Ribbon */
.message.staff .messageUserInfo .helper  {
  display: block;
  position: absolute;
  top: -6px;
  right: -56px;
  content: "";
background: url("@imagePath/xenforo/staff-ribbon-posted-red-small.png") no-repeat  transparent;
  height: 107px;
  width: 107px;

}

<xen:if is="@enableResponsive">

Lưu lại và tận hưởng thành quả nhé.
Đây là thành quả của mình :

Chúc các bạn thành công !
Xin cám ơn bác @PVS đã cung cấp thông tin về add-on