Récemment, nous vous avons montré comment styliser la mise en page de vos commentaires et comment styliser votre formulaire de commentaire. 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
De rien
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
Je n'arrive pas à le faire fonctionner.
Je ne trouve pas exactement où le mettre, rien ne semble changer. J'ai regardé le code source et il a un avatar comme le code source de l'exemple.
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 : Laissez tomber, ça a marché tout d'un coup !
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
Je vais vérifier. Merci
Roselle Celina
Salut, merci pour ce tutoriel ! Ça fonctionne très bien sur Chrome et Firefox, mais pour Safari, j'ai le même problème : http://jsfiddle.net/2UT8v/2/
Merci d'avance pour votre aide
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
Si quelqu'un utilise IE8, il ne mérite pas une image ronde
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 !