admin [—»Sói™~]-[Ðại Ma Ðầu]
Giới tính : Chinese zodiac : Bài viết : 1042 Xu : 158 Thanked : 650 Sinh Nhật : 20/09/1990 Tham Gia : 15/07/2011 Tuổi : 33 Yahoo : Hà Nội Nghề Nghiệp : Giáo Sư Status : hgfggggggggggggg
Character sheet Tài Sản:
| Tiêu đề: Đóng khung avatar bằng css Fri Aug 26, 2011 8:17 pm | |
| Dạo web 1 vòng kiếm được đoạn code hay thế là chia sẻ anh em ngay kẻo nguộ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:CHỌN NỘI DUNG <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é Nhờ phutu và code đã được cải tiến : 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)} | |
|