Niedawno pokazaliśmy, jak stylizować twój układ komentarzy i jak stylizować formularz komentarza. Jeden z naszych użytkowników wysłał do nas e-mail z pytaniem “jak sprawiłeś, że twoje obrazki gravatar są okrągłe? Czy przechowujesz obrazki gravatar lokalnie, aby były okrągłe?”. W tym artykule pokażemy, jak wyświetlić okrągłe obrazki gravatar w WordPress. Wykorzystamy właściwość border-radius CSS3 do stworzenia okrągłych obrazków gravatar.
Pierwszą rzeczą, którą musisz zrobić, to edytować plik style.css twojego motywu. Możesz to zrobić za pomocą programu FTP lub przechodząc do Wygląd ” Edytor w twoim panelu administracyjnym WordPress. Następnie dodaj następujący kod do twojego pliku CSS:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.
To powinno działać na większości motywów WordPress. Jeśli jednak nie działa to na twoim motywie, prawdopodobnie jakaś wtyczka lub funkcja twojego motywu zakłóca domyślne klasy używane dla gravatara w WordPress. Aby dowiedzieć się, jakiej klasy css używają obrazy gravatar w twoim motywie, musisz otworzyć wpis na blogu, który zawiera komentarze. Przewiń w dół do sekcji komentarzy i kliknij prawym przyciskiem myszy obrazek gravatar, aby wybrać opcję Inspect Element. Zostanie wyświetlony kod źródłowy twojego gravatara, jak poniżej:
Jeśli obrazek gravatar ma coś innego niż awatar, użyj tego zamiast .awatar w powyższym kodzie css.
Mamy nadzieję, że ten artykuł pomógł ci wyświetlić okrągłe obrazki gravatar na twoim blogu WordPress. Daj nam znać, jeśli masz jakieś pytania lub uwagi, zostawiając komentarz poniżej.
Rex
Very timely. Thank you so much.
WPBeginner Support
You’re welcome
Admin
pujara
How to add comment image automatically like in your comment system?
Nataly
hello, It worked, thank you, but, the description appear to high. over the pic, do you know to make it appear at the side of the pic?
Therese
I can’t make it work.
I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.
WPBeginner Support
Did you add the CSS in your theme’s stylesheet?
Admin
ERFmama
Yes I did. I have the Twenty Twelve theme.
Is there a specific place it has to go? In the style.css
Edit: Never mind it suddenly worked now!
Can I ask how to change the size of the avatars please? Or have you already written that down somewhere?
Thank you so much for this!
Daniel
It worked, thank you
Chrissy
Fantastic! Exactly what I was looking for! Thanks you guys rock!
Jacky
THANK YOU so much for this, spent hours trying to accomplish. You provided the most straightforward solution!
Abdul Samad
Bro Thanks For This Code I’m New In WP and I really Enjoying Your Blog Man Thanks For THis And All Tutorials ….
Richie
I was going to pass along this tip and of course tried it first on one of my sites.
Worked like a champ I simply changed my CSS from px to % for the border moz and webkit.
Here’s where it got interesting.
I went to another site, did the same tweak and it didn’t work. After a little head scratching I remembered that I had the plugin WP User Avatar installed on the site that it worked on and didn’t have it installed on the site it didn’t work on.
I installed the plugin and whalah, works like a champ.
For both sites I’m using a custom theme built on the Presswork framework.
Bottom line, I got it to work but only with the plugin.
Any ideas?
Editorial Staff
It is possible that your theme wasn’t using the css class .avatar, and the plugin added that.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Hi there, thanks for this tutorial! It’s working great on chrome and Firefox, but for Safari, I’m getting this same problem: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Editorial Staff
It seems that the border width is where the issue seems to be in safari.
Admin
RW
I agree and I only use IE about 4% of the time but several of my customers are still on 8.
Thanks,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Great tip. Please note that IE8 doesn’t natively render round corners (border-radius). You’d need to use javascript, pie, etc… for this but not worth the trouble. Luckily IE9 recognizes current standards…
Thanks.
Jim Burnett
I remember the days we were trying to keep IE6 support in the loop. Not it’s IE 8 for rounded corners. Lucky us, IE9 is picking up.
Then again, FF 3.0 doesn’t support any HTML 5. *sad face*
Cool CSS trick though!