I'm using techknowledgy

J’avais dit à Gazelle que je le ferais, alors allons-y. Comment je m’y suis prise exactement pour mettre des fonds de couleurs à mes commentaires et faire en sorte que la couleur soit différente si il s’agit de réponses que je fais à vous, mes visiteurs préférés, qui osez laisser des messages ici? Accrochez vous, c’est long, c’est technique et ce sera peut-être la seule fois que je ferais ça… ou pas…


Comme dit précédemment je me suis inspirée de l’article de Blogger au bout du doigt sur le sujet. Mais ma formule diffère puisque le code récupéré sur ce blog ne permettait que de changer la couleur de la police.

Bref quoi qu’il en soit voici les étapes à faire:

[1.] Pour ceux qui utilisent blogger, il faut aller dans son interface blogger > mise en page > modifier le code html et cocher la case "développer des modèles de gadget"
Pour les autres et bien aller dans ce qui vous semble équivalent. Bref ce qui permet de modifier les codes HTML en profondeur…


- - - - - - - - - -

[2.] Cherchez la partie de code qui s’occupe de la gestion des commentaires.

Il doit ressembler à quelque chose comme ça:

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Là il va falloir que l’on définisse la différence entre les commentaires de l’auteur et les commentaires des visiteurs. Pour ça il faut encadrer le code d'au dessus comme suit

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>


- - - - - - - - - -

[3.] Maintenant occupons nous du look et de la mise en page des commentaires. Pour ça il va falloir trafiquer dans toute la partie de code qui se trouve sous cette "entête":

/* Comments
----------------------------------------------- */


● Si vous voulez changer la couleur de la police

Cherchez le code:

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

Et collez juste en dessous

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#ee6a7f;
text-decoration:bold;
}

Vous pouvez bien sur changer le code exadécimal de la couleur (première ligne mise en rose) pour l’adapter à la couleur de votre blog.
C’est dans ce même code que vous pouvez trafiquer si par exemple vous voulez que vos réponses soient toujours en itallique (ajoutez la ligne: font-style:italic;) ou en gras (ajoutez la ligne: font-style:bold;) ou plus gros ou plus petit en changeant le pourcentage de la ligne "font-size".

Si vous avez bien fait attention le code est en 2 parties constituées chacune de 2 sous-parties:
- la première partie du code s’occupe de la mise en page et du look des commentaires des visiteurs alors que la deuxième partie s’occupe des réponses de l’auteur.
- à l’intérieur de ces parties la première sous-partie touche à la mise en page et la deuxième sous-partie touche au style du texte.

Si vous voulez changer le style, la couleur, la taille de la police des commentaires de vos visiteurs il suffit donc de faire la même démarche dans la deuxième sous-partie de la première partie du code:

.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

Vous pouvez aussi vous amusez avec les espaces.
La ligne "margin" correspond à la marge depuis le bord de la partie texte et "padding" à l’espace entre le texte et le bord de la partie commentaire.
Le nombre le plus à gauche gère l’espace en HAUT et puis ça tourne dans le sens des aiguilles d’une montre. Le suivant gère l’espace de DROITE, puis du BAS et en fin le dernier celui de GAUCHE.


● Si vous voulez changer la couleur du fond

Il vous faut d’abord créer des images de fond de la couleur que vous souhaitez - moi j’ai choisi gris clair pour les commentaires des visiteurs et rose pour mes réponses – puis les déposer sur un hébergeur en ligne.



Pour le code puisque nous travaillons sur la mise en page nous allons maintenant travailler dans les premières sous-parties.
On commence par la même démarche que pour la couleur de police. On cherche le code:

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

et on colle juste dessous le code suivant (qui est le même code que pour la police mais sans les lignes roses qui servaient à modifier le style de la police)

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
}

Maintenant il faut ajouter le code des images créées pour faire le fond. On ajoutera donc le code du fond "commentaire des visiteurs" dans la première partie du code et celui des "réponses de l’auteur" dans la deuxième partie du code.

Ce qui nous donne au final:

.comment-body {
background:url("url-de-limage-commentaire-visiteur.gif") repeat 2px .3em;
margin:0 0 1.25em;
padding:10px 0 15px 10px;
}
.comment-body p {
font-size:100%;
margin:0 0 .5em 0;
}
.comment-body-author {
background:url("url-de-limage-reponse-auteur.gif") repeat 2px .3em;
margin:0 0 1.25em;
padding:10px 0 15px 10px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .5em 0;
}

Là il vous faudra jouer avec les marges et le padding en function de la configuration de votre template. Le code entier proposé ci-dessus est celui qui correspond à ma configuration.

Vous pouvez aussi faire la différence entre commentaires et réponses en ne mettant le fond qu’à l’un des 2 et vous pouvez évidemment conjuguer le style de la police et la couleur de fond.

Voilà je crois que c’est tout. J’espère que ce n’était pas trop compliqué et que ça peut être adaptable également à d’autres éditeurs de blogs. D’ailleurs si vous avez un hic vous pouvez m’envoyer un mail (lilotink @ gmail.com) et on peut regarder ça ensemble après avoir bossé 3 mois sur les codes du site de la fac d’Auckland j’arrive à m’adapter un peu à tout.


- - - - - - - - - -

Ha et puis puisque c’est Gazelle qui en a fait la demande je tiens à rappelé que Gazelle a changer d’adresse de blog (ouais mieux vaut tard que jamais pour l’annoncer) et que donc maintenant pour lire tous ses petits exos de sport et les aventures de Pimpin, il faut aller à l’adresse suivante: http://unefilleordinaire.net/

Dans la même catégorie

Widget by Hoctro | Jack Book