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

NDK

MasterSergeant
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
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.
staff-ribbon-posted-red-small.png

Sau đó, các bạn tìm template message_user_info.css, tìm đoạn code:
PHP:
.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:
PHP:
.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 :
12313805_573337779488749_6890620589436334803_n.jpg

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 inlove~~:*
 
Back
Top