[Hỏi đáp] Avatar Dop Menu cho PunBB

Diễn đàn của mình có sử dụng Avatar Dop Menu cho PunBB tương tự như hình dưới đây:


Mặc dù mình không chỉnh sửa code, nhưng thời gian gần đây chức năng này bị lỗi:

1- Không hiển thị nick của thành viên mà chỉ hiển thị thời gian post bài.

2- Không hiển thị thông tin thành viên khi rê chuộc lên ảnh đại diện.

3- Mất nút Thích và Báo xấu.


Rất mong các bạn chỉ giúp mình cách khắc phục lỗi trên. Xin chân thành cảm ơn.

Cám ơn các bạn đã quan tâm giúp đỡ. Mình cũng nghĩ là link js die nhưng không thể tự sửa. Rất mong các bạn sửa giúp hoặc hướng dẫn mình cách thức để làm cái Avatar khác vì với lỗi như hiện nay, khi vào forum, chẳng biết bài viết đó của ai.

Mình đã tạo 1 js mới trong ACP > Modules > HTML & JAVASCRIPT > Javascript codes management với đoạn mã của Zero cho. Kết quả, thông tin thành viên đã hiển thị trở lại. Tuy nhiên, Status không ẩn mà lại xuất hiện cùng lúc với Phương châm:


Rất mong các bạn chỉ giúp mình cách làm ẩn từ Status, chỉ để lại cụm từ Phương châm. Xin chân thành cảm ơn.

Mình đã sửa theo gợi ý của Zero. Kết quả, Status đã biến mất. Tuy nhiên, Phương châm bị lỗi rớt hàng:


Rất mong các bạn chỉ giúp mình cách khắc phục lỗi trên. Xin chân thành cảm ơn.

Thay CSS cũ bằng:

Code:

.dropRight,.dropRight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.pun .post .user{overflow:visible;margin-left:-13em;width:12em}
.pun .postmain{margin-left:13em}
.postfoot{margin-left:-13em}
.pun .post:hover{border-left:1px solid #359bed;margin-left:-1px}
.dropRight{z-index:10;position:relative;background:transparent;border:1px solid transparent;width:1px;margin-left:-3px;white-space:nowrap;transition:width .2s;-webkit-transition:width .2s;overflow:hidden;padding:10px 0 10px 13em !important}
.dropRight:hover{background:#fff;width:542px;border-color:#359bed #359bed #359bed #FFF}
.dropRight .poster-avatar{float:left;margin-left:-12em}
.dropRight .poster-avatar a{background:url(http://i56.servimg.com/u/f56/18/59/49/93/noavat10.jpg) no-repeat center #FFF;border:1px solid #DDD;min-height:122px;display:block;width:132px}
.dropRight .poster-avatar img{background:#FFF;min-height:122px;max-height:155px;width:130px;padding:5px}
.dropRight .poster-info{white-space:normal;padding-right:10px;display:none;width:380px}
.dropRight:hover .poster-info{display:block}
.poster-info .poster-field{border:1px dashed #DDD;border-width:1px 0;margin:5px 0;padding:5px 0}
.poster-info .poster-field p{line-height:20px;color:#999;width:180px;display:inline-block}
.poster-info .poster-field p.status{font-style:italic;width:100%;color:#0085FF}
.poster-info .poster-field p.status .label{font-weight:700}
.poster-connect{display:inline-block;width:27px;height:16px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/icon_u11.gif) no-repeat transparent}
.poster-connect img{background:#fff}
.poster-rank{float:right;margin-top:-7px}
.poster-link a{padding-right:13px}

Vào viewtopic_body tìm:

Code:

<div class="user-ident">
   <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
   <div class="user-basic-info">
      {postrow.displayed.POSTER_AVATAR}<br />
      {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
   </div>
</div>
<div class="user-info">
   {postrow.displayed.ONLINE_IMG}
   <!-- BEGIN profile_field -->
   {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
   <!-- END profile_field -->
   {postrow.displayed.POSTER_RPG}
</div>

Thay bằng:

Code:

<div class="user-ident dropRight">  
   <div class="poster-avatar">
      {postrow.displayed.POSTER_AVATAR}
   </div>  
   <div class="poster-info">      
      <div>        
         <span class="poster-name">
            {postrow.displayed.POSTER_NAME}
         </span>        
         <span class="poster-connect">
            {postrow.displayed.ONLINE_IMG}
         </span>        
         <span class="poster-rank">
            {postrow.displayed.RANK_IMAGE}
         </span>
      </div>      
      <div class="poster-field">        
         <!-- BEGIN profile_field -->        
         <p>
            {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}
         </p>        
         <!-- END profile_field -->
      </div>      
      <div class="poster-link">        
         <a target="_blank" href="/profile.forum?mode=viewprofile&u=POSTER_NAME&page_profil=messages">            
            <img alt="Tường nhà" src="http://i48.servimg.com/u/f48/16/58/89/73/profil10.png" /> Tường nhà
         </a>        
         <a target="_blank" href="/spa/POSTER_NAME">            
            <img alt="Xem bài viết" src="http://i48.servimg.com/u/f48/16/58/89/73/total_10.gif" /> Bài viết                              </a>        
         <a target="_blank" href="/profile?friend=POSTER_NAME&mode=editprofile&page_profil=friendsfoes">            
            <img alt="Kết bạn" src="http://i48.servimg.com/u/f48/16/58/89/73/friend10.png" /> Kết bạn
         </a>        
         <a target="_blank" href="/profile?foe=POSTER_NAME&mode=editprofile&page_profil=friendsfoes">            
            <img alt="Chặn người này" src="http://i57.servimg.com/u/f57/17/05/17/70/button10.png" /> Ngăn cấm
         </a>
      </div>
   </div>
</div>

Thêm vào cuối viewtopic_body:

Code:

<script type="text/javascript">
$(".poster-info .label:contains('Status')").parent().addClass("status");
$(".poster-link a").attr("href", function () {
   return this.href.replace(/POSTER_NAME/, encodeURI($.trim($(this).closest(".poster-info").find(".poster-name").text())));
});
</script>

Xin chân thành cám ơn sự giúp đỡ của tất cả các bạn và diễn đàn.