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 : [You must be registered and logged in to see this link.]
Vài mẫu mình làm sẵn cho các bạn sử dụng :
1.
Demo:
PHPbb3:
Invision :
PunBB :
PHPbb2 :
2.
Demo:
PHPbb3:
Invision :
PunBB :
PHPbb2 :
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 : [You must be registered and logged in to see this link.]
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;
}