Personnaliser les avatars des commentaires sous Blogger

Tout d'abord... Bonne année à tous ! J'espère que vous avez passé des très bonnes fêtes, et que cette nouvelle année vous apporte encore plus de joie que l'année dernière :)

On commence 2015 avec des nouveaux tutoriels pour personnaliser les commentaires de son blog ! Ils seront en plusieurs parties vu la quantité de choses que l'on peut changer. Je vous propose de commencer avec les avatars des commentaires, ensuite on verra comment changer les fonds et la forme de commentaires, puis les polices des différentes parties.
Si vous ne l'avez pas vu, j'ai également fait un tutoriel pour changer les liens et les titres Commentaires ;)

C'est parti pour les explications !

Faire une sauvegarde du blog

Attention : Si vous utilisez le système de commentaires Google+ ce tutoriel ne fonctionnera pas car il n'est pas possible de modifier l'apparence des commentaires Google+.

Premièrement faites, comme toujours, une sauvegarde de votre thème avant d'y apporter des modifications. Vous pourrez ainsi revenir en arrière si vous faites une erreur.

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier :)Personnaliser les avatars
Il est possible de changer les forme des avatars, ou d'ajouter une bordure par exemple, en changeant un peu de code CSS.

Cliquez sur Modifier le code HTML :

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte. Passez à l'étape suivante.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.

Donner une forme ronde aux avatars

Pour donner une forme ronde aux avatars, collez le code suivant dans la boîte de code :

#comments .avatar-image-container img {

Et appuyez sur Entrer.
Vous devrez tomber sur :

Remplacez le code par ceci :

#comments .avatar-image-container img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

Ce qui donne :

Ajouter une bordure aux avatars

Pour ajouter une bordure aux avatars, ajouter les lignes suivantes au même code :

border-style: solid;   /* Style de la bordure */
border-color: #EEEEEE;   /* Couleur de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */

Comme ceci :

#comments .avatar-image-container img {
border-style: solid;   /* Style de la bordure */
border-color: #EEEEEE;   /* Couleur de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
}

/!\ Attention ! Si vous ajoutez une bordure, il faut ajouter un autre code pour agrandir la taille des avatars. Sinon une partie de la bordure sera coupée.
Cherchez le code suivant :

.avatar-image-container {

Il devrait se trouver juste au-dessus du premier code :

Ajoutez les lignes suivantes :

max-height: 44px !important; /* Hauteur final de l'avatar avec la bordure */
width: 44px !important;   /* Largeur final de l'avatar avec la bordure */

Comme ceci :

.comments .avatar-image-container {
margin: .2em 0 0;
max-height: 44px !important; /* Hauteur final de l'avatar avec la bordure */
width: 44px !important;   /* Largeur final de l'avatar avec la bordure */
}

Dans mon exemple, j'ai ajouté une bordure de 4 pixels autour de l'image. Par défaut les avatars font 36 pixels de large et 36 pixels de haut. En ajoutant 4 pixels de bordure de chaque coté, elle fait maintenant 4+36+4=44 pixels de haut et 44 pixels de large. Vous me suivez ?

Il suffira de changer la valeur en pixels (44px) en fonction de la taille de l'avatar avec la bordure, en suivant la petite formule :

36 + (2 x taille de la bordure) = taille finale en pixels
36 + (2 x 4) = 44 pixels

En plus de cela, ajoutez la ligne suivante :

margin-left: -4px;

Comme ceci :

.comments .avatar-image-container {
margin: .2em 0 0;
max-height: 44px !important;
width: 44px !important;
margin-left: -4px;   /* Décalage à gauche */
}

Ceci permet de rectifier le décalage de l'image vers la droite quand on ajoute une bordure.
Changer la valeur (-4px) par la largeur de votre bordure en négatif (important !).

Ce qui donne :

N'oubliez pas de sauvegarder en cliquant sur Enregistrer le modèle.
Et voilà pour les avatars !

Rendez-vous au prochain tutoriel pour savoir comment changer la couleur de fond et la forme des commentaires ;)
Bon blogging !