Comment améliorer en 3 étapes les commentaires WordPress grâce au CSS3

analytics-projet-digital

Je me demandais comment donner plus de relief à l’espace commentaire sur mon blog WordPress aussi, je profite de ce samedi matin pour revoir le style graphique de ce coin d’échange et de partage avec les visiteurs.

Alors j’ouvre mon éditeur CSS favori du moment et je me lance. Je partage avec vous le fruit de ces quelques minutes de mise en œuvre.

Avant de décrire les différentes modifications qui permettent d’améliorer les commentaires d’un site web utilisant WordPress, je vous glisse une capture avant modification :

commentaire-wordpress-style-avant

Nous allons voir comment améliorer en 3 étapes l’espace commentaire d’un blog WordPress grâce au CSS3. Tout va se faire coté style CSS sans avoir à modifier le code PHP du thème FLATO que j’utilise et modifie au gré de mon inspiration.

Première étape : le re-design des avatars

Je commence par agrandir l’image de l’avatar puis je rajoute une bordure très fine et pour finir j’arrondis l’ensemble grâce à la propriété border-radius.

Seconde étape : mise en avant du commentaire

Je poursuis par la mise en place d’un fond et d’une bordure pour délimiter le commentaire. J’en profite pour rapprocher le commentaire de l’avatar. (Idée à ajouter à ma todo-list : ajouter une extension pointue pointant du commentaire vers l’image de la personne qui a déposé le commentaire comme dans les bandes dessinées).

Dernière étape : le bouton Répondre

Pour susciter les réactions et les échanges (en plus de la pertinence des discussions), il faut que le bouton Répondre puisse se voir. Aussi, ce dernier a été agrémenté d’un fond rouge et une police blanche pour bien contraster. Puis je l’ai glisser à droite juste en dessous du commentaire.

Et voilà le résultat : qu’en pensez-vous ?

commentaire-wordpress-style-apres

 

Claude BUENO

About Claude BUENO

Je suis passionné par les technologies de l'information et de la communication. Ma mission : accompagner les clients dans leur transformation digitale. Je blogue depuis 2008 sur les sujets numériques. Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite à Tours.

  • C’est simple et facile. Merci pour ces conseils mais je serai toujours curieux de savoir quel est votre editeur css favori 😀