[CSS] Member info box

  Bài viết hay nhất1
THÔNG TIN
*Mô tả: Khi rê chuột đến nick thành viên, một khung thông tin hiện ra ở góc trái trên forum.
*Demo: https://i.servimg.com/u/f44/15/64/85/86/cp14110.png
*Tác giả: handsomevip007 - A14 Tôi yêu
*Tự đánh giá: Tương đối khó cài đặt

CÀI ĐẶT
*B1: Chèn vào CSS
Code:
/*1*/{position:fixed;top:0;z-index:999;right:0;margin-right:314px;border:4px solid #DDD}
/*2*/{white-space:normal!important;font-weight:normal;line-height:124%;font-size:12px;position:fixed;right:0;padding:5px;top:0;width:300px;height:100px;background:rgba(0, 0, 0, 0.85);border:4px solid #DDD;color:white;text-shadow: 1px 1px 2px white;z-index:999;text-align:justify}
*B2: Thay đổi link thành viên trong code sau rồi thay vào vị trí /*1*/ trong code B1
Code:
a[href="/u6290"]:hover strong::before
*B3: Thay đổi link thành viên trong code sau rồi thay vào vị trí /*2*/ trong code B1
Code:
a[href="/u6290"]:hover strong::after
*Lưu ý 1: Khi muốn thêm nhiều thành viên bạn thay đổi link như ở B2 và B3 rồi chèn code như trên, mỗi thành viên cách nhau bằng một dấu phẩy (,)
*B4: Chèn code sau vào tiếp bên dưới những code trên, thay link thành viên, và avatar cho phù hợp, kích thước avatar chiều cao khoảng 105px~110px là đẹp
Code:
a[href="/u6290"]:hover  strong::before{content:url(http://i44.servimg.com/u/f44/12/24/45/65/13-9811.jpg)}
*B5: Chèn tiếp code sau dưới những code trên, thay thông tin thành viên cho phù hợp
Code:
a[href="/u6290"]:hover  strong::after{content:"-X-- THÔNG TIN -------X-------X------X-------- @handsomevip007 là một trong những thành viên xuất sắc của Chinh Phục nắm giữ các trọng trách quan trọng như: CPContributor, CPDeveloper, CPSecurity. Hoạt động chính trong các lĩnh hỗ trợ, sửa lỗi code, phát triển các mods trang trí và làm đẹp cho diễn đàn."}
*Lưu ý 2: Nếu làm cho nhiều thành viên, thì lập lại B4B5.
Bạn cần kiên nhẫn để cài đặt code này @};- Mọi thắc mắc để lại dưới topic này

Viết bởi handsomevip007 - A14 Tôi yêu
  Bài viết hay nhất2
like rùi ==
+ Đã sử dụng
codes rất tốt :)
Bạn không có quyền trả lời bài viết