[Code] Làm đẹp khung chứa ảnh bài viết mới , bài viết bị khóa ,....

Áp dụng với punBB . Và Các Forum Có Những Hình Ảnh Bài Viết Mới , Bài Viết bị khóa như thế này :



Miễn là nó ngang như cua như trên là đc . Những forum nào mà dọc thì hơi xấu óa ( Theo ý kiến mình thôi nhá , còn các bạn thích thì thêm thôi )!
Chúng ta sẽ sửa lại nó như sau :



Nhìn gọn nhẹ ha , Thêm cái tooltip khi di chuột nhìn càng sành điệu hơn !
Bắt đầu vào code nào !
ACP => DiSplay => Index_body
Làm mẫu cho skin FMVI V2

Tìm :

Code:

  <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}   
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}   
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}

Thay Thế Bằng :

Code:

<a class="tooltip" title="{L_NEW_POSTS}"><img src="{FORUM_NEW_IMG}" class="danhmuccss"/></a>   
<a class="tooltip" title="{L_NO_NEW_POSTS}"><img src="{FORUM_IMG}" class="danhmuccss"/></a>   
<a class="tooltip" title="{L_FORUM_LOCKED}"> <img src="{FORUM_LOCKED_IMG}" class="danhmuccss"/></a>

Còn những bạn có skin khác hay cấu trúc khác như thế này , thì các bạn lần lượt tìm những đoạn như :
{FORUM_NEW_IMG} , {FORUM_IMG} , {FORUM_LOCKED_IMG} , {L_NEW_POSTS} , {L_NO_NEW_POSTS} , {L_FORUM_LOCKED}
Để thay thế nhé ! Sorry vì forum mình xài skin FMVi nên mình cũng chỉ nghiên cứu skin này thôi , không nghiên cứu những skin khác nhiều ! .

Tiếp tục :
Chèn vào cuối index_body đoạn :

Code:


<script src="http://dl.dropbox.com/u/47626020/01/main.js"></script>
<style>
/*  */

#tooltip{

position:absolute;

border:5px solid #333;

opacity: 0.8;

background:#FFFFFF;

padding:2px 5px;

color:#000;

display:none;

border-radius:10px;

box-shadow:0 0 20px #222;

text-shadow: 1px 1px 2px #FFFFFF;

font-weight:bold;

height:auto;

width:auto;

padding: 8px 13px;

z-index:999999999999999999;

} 

/*  */
  </style>

ACP => Display -> Color => CSS StyleSheet
Chèn Vào Đầu Đoạn Code :

Code:


/* Code Danh Mục Chứa Ảnh Bài Viết Mới - CSS-Style.forumvi.com */
.danhmuccss{
  border:2px solid #000;
  box-shadow:1px 2px 3px #222;
  border-radius: 5px;
  padding: 3px;
  transition:all 1s ease;
}
.danhmuccss:hover{
  box-shadow: 0 0 15px #222;
}

Xong !