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 fait vos images de gravatar ? Stockez-vous les images gravatar localement pour qu’elles soient rondes ? » Dans cet article, nous allons vous montrer 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 sur Apparence » Éditeur dans votre administrateur WordPress. Ensuite, vous souhaitez 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 la fonction de votre thème qui perturbe les classes par défaut utilisées pour gravatar dans WordPress. Afin de savoir quelles images gravatar de classe CSS utilisent dans votre thème, vous devez ouvrir un article de blog contenant 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. Il vous montrera le code source de votre gravatar, comme ceci :
Si l’image du gravatar a autre chose que avatar alors utilisez-le au lieu 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.