Récemment, nous vous avons montré comment styliser la mise en page de vos commentaires et comment styliser votre formulaire de commentaire. L'un de nos utilisateurs nous a envoyé un e-mail et nous a demandé : « comment avez-vous rendu vos images gravatar rondes ? Stockez-vous les images gravatar localement pour les rendre rondes ? » Dans cet article, nous vous montrerons comment afficher des images gravatar rondes dans WordPress. Nous utiliserons la propriété border-radius de CSS3 pour créer des images gravatar circulaires.
La première chose à faire est de modifier le fichier style.css de votre thème. Vous pouvez le faire en utilisant un programme FTP ou en allant dans Apparence » Éditeur dans votre administration WordPress. Ensuite, vous voudrez ajouter le code suivant dans votre fichier CSS :
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Cela devrait fonctionner sur la plupart des thèmes WordPress. Cependant, si cela ne fonctionne pas sur votre thème, il y a probablement un plugin ou une fonction de votre thème qui interfère avec les classes par défaut utilisées pour les gravatars dans WordPress. Afin de découvrir quelle classe CSS les images gravatar utilisent dans votre thème, vous devez ouvrir un article de blog qui a des commentaires. Faites défiler jusqu'à la section des commentaires, et faites un clic droit sur l'image gravatar pour sélectionner Inspecter l'élément. Cela vous montrera le code source de votre gravatar, comme ceci :
Si l'image gravatar a quelque chose d'autre que avatar, utilisez-le à la place de .avatar dans le code CSS ci-dessus.
Nous espérons que cet article vous a aidé à afficher des images gravatar rondes sur votre blog WordPress. Faites-nous savoir si vous avez des questions ou des commentaires en laissant un commentaire ci-dessous.
Rex
Très opportun. Merci beaucoup.
Support WPBeginner
You’re welcome
Admin
pujara
Comment ajouter une image de commentaire automatiquement comme dans votre système de commentaires ?
Nataly
bonjour, ça a marché, merci, mais la description apparaît trop haut. par-dessus l'image, savez-vous comment la faire apparaître à côté de l'image ?
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.
Support WPBeginner
Avez-vous ajouté le CSS dans la feuille de style de votre thème ?
Admin
ERFmama
Oui, je l'ai fait. J'ai le thème Twenty Twelve.
Y a-t-il un endroit spécifique où il doit aller ? Dans le style.css
Edit: Never mind it suddenly worked now!
Puis-je demander comment changer la taille des avatars s'il vous plaît ? Ou l'avez-vous déjà écrit quelque part ?
Merci beaucoup pour cela !
Daniel
Ça a marché, merci
Chrissy
Fantastique ! Exactement ce que je cherchais ! Merci, vous assurez !
Jacky
MERCI beaucoup pour cela, j'ai passé des heures à essayer d'y parvenir. Vous avez fourni la solution la plus simple !
Abdul Samad
Frère Merci pour ce code, je suis nouveau sur WP et j'apprécie vraiment ton blog, mec. Merci pour ça et pour tous les tutoriels...
Richie
J'allais partager cette astuce et bien sûr, je l'ai d'abord essayée sur l'un de mes sites.
Ça a marché comme sur des roulettes, j'ai simplement changé mon CSS de px en % pour la bordure moz et webkit.
C'est là que ça devient intéressant.
Je suis allé sur un autre site, j'ai fait le même ajustement et ça n'a pas marché. Après avoir un peu gratté ma tête, je me suis souvenu que j'avais le plugin WP User Avatar installé sur le site où ça a marché et je ne l'avais pas installé sur le site où ça n'a pas marché.
J'ai installé le plugin et voilà, ça marche comme sur des roulettes.
Pour les deux sites, j'utilise un thème personnalisé construit sur le framework Presswork.
En résumé, j'ai réussi à le faire fonctionner mais seulement avec le plugin.
Des idées ?
Personnel éditorial
Il est possible que votre thème n'utilisait pas la classe CSS .avatar, et que le plugin l'ait ajoutée.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Salut, merci pour ce tutoriel ! Ça marche très bien sur Chrome et Firefox, mais pour Safari, j'ai le même problème : http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Personnel éditorial
Il semble que la largeur de la bordure soit le problème sur Safari.
Admin
RW
Je suis d'accord et je n'utilise IE que 4 % du temps, mais plusieurs de mes clients sont encore sur la version 8.
Merci,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Super astuce. Veuillez noter qu'IE8 ne rend pas nativement les coins arrondis (border-radius). Vous auriez besoin d'utiliser du javascript, pie, etc... pour cela, mais ça ne vaut pas la peine. Heureusement, IE9 reconnaît les normes actuelles...
Merci.
Jim Burnett
Je me souviens des jours où nous essayions de maintenir le support d'IE6. Maintenant, c'est IE 8 pour les coins arrondis. Heureusement pour nous, IE9 progresse.
D'un autre côté, FF 3.0 ne supporte aucun HTML 5. *visage triste*
Super astuce CSS cependant !