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

 

Catégories : Atelier numérique

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.

2 Comments

Serrurerie aulnay · 31 juillet 2014 à 17 h 30 min

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

Atelier numérique

Définir DuckDuckGo moteur de recherche par défaut sur Google Chrome

Ce n’est plus un secret : nos échanges sur la grande toile du Net sont à la merci des grandes oreilles des services secrets et des entreprises du Net. La NSA a mis sur pied Lire la suite…

Atelier numérique

Comment installer PrestaShop chez OVH ?

Nous allons voir dans ce billet comment installer simplement le moteur de boutique en ligne PrestaShop sur un serveur mutualisé OVH Cette méthode ne requiert aucune connaissance technique pour mettre en place PrestaShop puisque tout Lire la suite…

Atelier numérique

Coût pour faire un site internet de Photographie avec WordPress

Dans cet article je vais m’attacher à vous présenter les différents éléments dont vous aurez besoin pour créer un site Web utilisant WordPress. Le coût pour faire un site de photographie est approximativement de 100 Lire la suite…