Oº°‘¨ [C]hia [S]ẻ [O]nline ¨‘°ºO
♥️Chào Mừng Các Bạn Ghé Thăm Forum Chia Sẻ Online♥️
Rất mong các bạn đăng ký làm thành viên để cùng
nhau chia sẻ mọi nỗi buồn vui
Chúc các bạn có những phút thư giãn vui vẻ
♥️Welcome to forum Chia Sẻ Online♥️
Welcome Guest, is this your first visit? Register
All times are GMT. The time now is 07:28 AM.

You are not connected. Please login or register

[Codes] Khung avatar cho mọi phiên bản

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

avatar
Administrators
Administrators
Sử dụng CSS3 border-image làm viền cho avatar ,thích hợp cho những phiên bản không edit dc temp của Forumotion mà không cần dùng Script phức tạp , tuy nhiên CSS3 không hiển thị ở < IE9
Dùng dược cho mọi phiên bản Fm.
Với PHPbb2 và punBb code tác dụng với viewtopic mặc định , với những viewtopic đã chỉnh sửa mà code không hiển thị được bạn cần đặt lại class cho phù hợp :d .
Bạn có thể tuỳ biến nhiều kiểu viền bằng Border-image khác bằng cách sử dụng website này : http://border-image.com

Vài mẫu mình làm sẵn cho các bạn sử dụng :

1.
Demo:


PHPbb3:
Code:
.postprofile dl dt a[href*="/u"] img, .blog_comment-avatar img {
border-width: 15px 15px 15px;
-moz-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-webkit-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-o-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
max-height: 90px;
}

Invision :
Code:
.postprofile-details.postdetails a[href*="/u"] img, .blog_comment-avatar img  {
border-width: 15px 15px 15px;
-moz-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-webkit-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-o-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
max-height: 90px;
}

PunBB :
Code:
.user-basic-info a[href*="/u"] img, .blog_comment-avatar img {
border-width: 15px 15px 15px;
-moz-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-webkit-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-o-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
max-height: 90px;
}

PHPbb2 :
Code:
.postdetails.poster-profile a[href*="/u"] img, .blog_comment-avatar img {
border-width: 15px 15px 15px;
-moz-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-webkit-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
-o-border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
border-image: url(http://i46.servimg.com/u/f46/16/76/15/68/nav_av10.png) 15 stretch;
max-height: 90px;
}

2.
Demo:


PHPbb3:
Code:
.postprofile dl dt a[href*="/u"] img, .blog_comment-avatar img {
border-width: 7px;
-moz-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-webkit-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-o-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
}

Invision :
Code:
.postprofile-details.postdetails a[href*="/u"] img, .blog_comment-avatar img  {
border-width: 7px;
-moz-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-webkit-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-o-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
}

PunBB :
Code:
.user-basic-info a[href*="/u"] img, .blog_comment-avatar img {
border-width: 7px;
-moz-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-webkit-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-o-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
}

PHPbb2 :
Code:
.postdetails.poster-profile a[href*="/u"] img, .blog_comment-avatar img {
border-width: 7px;
-moz-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-webkit-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
-o-border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
border-image: url(http://i46.servimg.com/u/f46/17/46/69/50/ava110.png) 7 repeat;
}
Nguồn : http://www.skin4fm.com/t2302-css-khung-avatar-cho-moi-phien-ban



Xem lý lịch thành viên http://chiaseonline.forumvi.com/

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết