Tuyền Choắt iTV
Ngày tham gia : 24/11/2011
| Tiêu đề: Code Đóng khung avatar đẹp nhất Fri Apr 06, 2012 2:42 pm | |
| | | | | Dạo web 1 vòng kiếm được đoạn code hay thế là chia sẻ anh em ngay kẻo ội mất. Cơ bản chỉ dùng cho version nào thay đổi được template.
Bước 1: Vào ACP >> Template >> view topic body tìm chỗ AVATAR thêm : - Code:
-
<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span> Bước 2: Vào ACP >> Display >> Colors >> CSS thêm đoạn code sau: - Code:
-
span.avatarcp img { max-width:110px; background-color:beige; border:1px solid #FFCC33; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:8px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2); -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2); box-shadow:2px 2px 10px rgba(0,0,0,0.2); } Code gốc không có max-width, mình thêm vô. Còn bên dưới là các thuộc tính mà các bạn có thể thay đổi được để ra cái khung hoành tráng hơn .
Bạn nào chế ra được khung đẹp thì post lên để mọi người cùng xài nhé ;)) @};-
Khi rê chuột vào thì nó ngay ngắn lại - Code:
-
span.avatarcp img:hover { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } Và để nó hiện trong forum dạng blog thì thêm .blog_comment-avatar img Cụ thể như sau:
- Code:
-
.blog_comment-avatar img, span.avatar1 img { max-width:110px; background-color:beige; border:1px solid #FFCC33; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:8px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2); -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2); box-shadow:2px 2px 10px rgba(0,0,0,0.2) } .blog_comment-avatar img:hover, span.avatar1 img:hover{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg)} | | | | |
|
|