Bài mới nhất

Sửa Đóng

Hiệu ứng cho Avartar của Friendlist Module
sau đây là cách làm nhé




1/Thay nền bên ngoài (bạn nào đã thay nền ở bài "thay nền cho các module thì phần này bỏ qua và chỉ thêm code ở phần hai là oke )

#friendlist_module .rc_bd {background:url(link hình,đây là nền cho tiêuđề) #653e16 top right repeat;}
#friendlist_module .bd {background:url(linh hình của bạn ) #653e16 bottom right no-repeat;}
2/Thêm viền cho mỗi avatar :

Code:

#friendlist_module .rc_bd .rc_bc .hd{height:auto;}
#friendlist_module .rc_bd .rc_bc .bd ul li{border-top:2px dotted #fff;border-right:2px dotted #fff;border-left:2px dotted #fff;}
#friendlist_module .rc_bd .rc_bc .bd ul li:hover{border-top:2px dotted #000;border-right:2px dotted #000;border-left:2px dotted #000;}

Chú ý :

  • #fff là mã màu trắng, #000 là màu đen, các bạn có thể thay đổi cho phù hợp với theme của mình nhé .
  • #friendlist_module .rc_bd .rc_bc .bd ul li là thuộc tính của viền lúc ban đầu
  • #friendlist_module .rc_bd .rc_bc .bd ul li:hover là thuộc tính của viền khi rê chuột vào.
2> Thêm ảnh nền cho các avatar :

Các bạn thay link ảnh nền vào nhé :

Code:

#friendlist_module .rc_bd .rc_bc .hd{height:auto;}
#friendlist_module .rc_bd .rc_bc .bd ul li{background:transparent url(Link ảnh nền);}
#friendlist_module .rc_bd .rc_bc .bd ul li:hover{background:transparent url(Link ảnh nền);}

Có thể sử dụng 2 ảnh nền khác nhau:

  • Link màu xanh là ảnh ban đầu
  • Link màu đỏ là ảnh xuất hiện khi rê chuột vào

nguồn từ cộng đồng blog