Làm thế nào để tạo avatar hình tròn trong WordPress?
Một khách truy cập đã gửi email cho tôi và hỏi: “Làm thế nào để hình ảnh đại diện (avatar) của bạn có hình tròn như vậy? Có phải bạn đã sử dụng một hình ảnh được bo tròn để làm avatar không?”. Câu trả lời là không. Trong bài viết này, tôi sẽ hướng dẫn cho các bạn cách để hiển thị avatar có dạng hình tròn trong WordPress. Tôi sẽ sử dụng thuộc tính border-radius (biên giới-bán kính) của CSS3 để tạo ra avatar hình tròn một cách đơn giản và nhanh chóng.
Tham khảo thêm:
- Sử dụng colored boxes, color buttons và highlight menu
- Top 5 plugin miễn phí giúp chỉnh sửa CSS trong WordPress
Tạo avatar hình tròn trong WordPress
Điều đầu tiên bạn cần làm là chỉnh sửa file style.css của theme mà bạn đang dùng. Bạn có thể làm điều này thông qua phần mềm FTP hoặc bằng cách truy cập vào Appearance => Editor trong bảng quản trị WordPress. Tiếp theo, hãy thêm đoạn code sau vào file style.css:
Code này sẽ hoạt động tốt với hầu hết theme WordPress. Tuy nhiên, nếu nó không có tác dụng trên trên theme của bạn thì có lẽ do một số plugin hoặc chức năng của theme đã làm đảo lộn các class mặc định được sử dụng cho avatar trong WordPress. Để tìm ra các CSS class của avatar được sử dụng trong theme, bạn cần phải click chuột phải vào hình ảnh avatar và chọn Inspect Element. Nó sẽ hiển thị mã nguồn avatar của bạn, trông giống như thế này:
Nếu CSS class của hình ảnh avatar có một cái gì đó khác so với avatar thì hãy sử dụng nó thay cho .avatar trong code CSS ở trên. Đơn giản vậy thôi.
Lưu ý: xóa cache web và cache trình duyệt trước khi xem kết quả.
Hy vọng rằng bài viết này sẽ giúp bạn tạo được avatar hình tròn trên blog/ website của mình. Hãy cho chúng tôi biết nếu bạn có bất kỳ câu hỏi hoặc ý kiến nào bằng cách sửa dụng khung bình luận dưới đây.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Giờ thì dùng WPdiscuz khá đơn giản và hiệu quả.
Cái này mình dùng CSS bo hình ảnh thành hình tròn. Tuy nhiên có cách nào sửa ảnh gốc thành ảnh tròn luôn không bạn, mình muốn 1 tấm hình avatar tròn để up khắp mọi nơi chứ ko riêng gì website
Cái này thiếu gì công cụ chỉnh sửa ảnh nó hỗ trợ bạn. Chỉ cần để phần rìa bên ngoài transparent (trong suốt) là được mà. :P
Anh cho em hỏi là genesis theme magazine pro có cái widget user profile, làm sao hiện avatar to, bó tròn, với lại hiện ở giữa giống minhnhat. org vậy, anh hd em với, thank anh…
Cái này chỉnh bằng CSS trong style.css thôi bạn. Click chuột phải vào cái avatar rồi chọn Inspect Element là thấy nhé. :P
Cái này là thủ thuật CSS…khá dễ thương, cảm ơn bạn nhé.
Mong bạn thường xuyên ghé thăm và ủng hộ blog của mình. :)
Hiếu ơi bạn có cách nào làm cho avatar chuyển thành hình tròn, nhưng khi rê chuột lên avatar đó nó lại hình vuông không. Giống một kiểu của trang nhaccuatui này : http://www.nhaccuatui.com/nghe-si-khanh-phuong.html
Như trong Nhạc của tui thì mình chịu. Nhưng bạn có thể thử modul Gravatar Hovercards trong Jetpack plugin. :)
Hi bạn !
Xin phép Hiếu trả lời bạn như sau:
Bạn chỉ cần thêm CSS sau vào là được nhé (để ý css của class avatar bạn có thể dùng !important) ! Lưu ý bạn là CSS phiên bản cũ không hỗ trợ radius nhé !
img.avatar {
border-radius: 53px;
height: 100px;
width: 100px;
cursor:pointer;
}
img.avatar:hover {
border-radius: 0;
height: 100px;
transition: all 0.2s ease-out 0s;
width: 100px;
}
Thím Ngọc thật là nguy hiểm :D
Hehe thích bài này nè, đúng ngay cái e cần luôn, tròn đẹp hơn vuông :P
Chuẩn rồi :) !