Aide blog "commentaire-réponse-couleur-encadrement"

01.12.2009

Bonjour à vous !

Commentaire et réponse lisible, coloré, encadré

Vous le constatez, je passe mon temps dans le CSS, j’adore.

Le résultat n’est pas toujours conforme à mes souhaits, mais je

fais le maximum avec mes moyens.

J’ai remarqué, au cours de mes visites, que les commentaires et réponses, ne sont pas toujours faciles à lire :

¤ Écriture trop petite,
¤ Difficulté à différencier, les commentaires et les réponses,
¤ Impossibilité de retrouver le commentaire laissé, surtout quand on n’autorise pas les gravatars, ¤ Etc.

Alors, voilà, je vais vous donner un tuyau pour les distinguer, en leur donnant une couleur différente.

C'est hyper facile, mais évidemment, il faut oser aller faire un tour dans le CSS

Je vous rappelle, bien sur, que je ne suis pas une « Pro », ce que je vous dis est, ce que j’expérimente.

Vous allez dans le CSS Accueil

/*Commentaires-Reponses*/

J’utilise cette méthode, mais il en existe d'autres...

.commentMessage {} représente le commentaire que les blogpotes vous laissent,

et .responseMessage {} représente les réponses que vous faites.

Vous souhaitez mettre une couleur :

Voici le logiciel dont je me sers, pour mes couleurs, alors si vous voulez le télécharger, CLIC dessus!

1) Vous recherchez dans le CSS si vous le trouvez, sinon vous écrivez :

".commentMessage" sans oublier le « . point » devant

et vous ouvrez les accolades {}...

Pour ouvrir l'accolade touche Alt Gr à droite de la barre espace du clavier, et la touche 4 apostrophe du haut du clavier, pour ouvrir, puis à nouveau Alt Gr et la touche plus et égal à droite en haut du clavier.

Vous mettez tout ce que vous rajoutez entre ces accolades.

2) Ensuite vous choisissez le code couleur que vous voulez et vous inscrivez à l’intérieur des accolades :

background-color:#db7093; J’ai mis le rose en exemple, mais à chacun de mettre la couleur voulue. Il est important, de bien les placer, comme ceci pour suivre l’alignement du CSS et de ne pas oublier le point virgule « ; » qui sépare toutes les informations et sans quoi, ça ne fonctionnera pas :

.commentMessage {

background-color:#db7093;

}

III - Et ensuite vous faite la même chose avec

.responseMessage {

background-color:#f5deb3;

}

A ce moment là, vous prévisualiser pour voir si c’est conforme. Et si c’est bon, vous enregistrez et vous faites la même chose dans le CSS Article.

Pensez ensuite à faire F5 pour nettoyer le cache, et voir s’afficher les modifications.

Quand vous aurez obtenu la couleur, peut-être voudrez-vous encadrer vos commentaires. Rien de plus facile, il suffit de rajouter :

border:2px solid #f5deb3; entre les accolades, à la suite du reste.sans oublier le point virgule, et de replacer l’accolade si besoin est., comme ceci :

.commentMessage {

background-color:#db7093; border:2px solid #f5deb3;

}

2px, est l’épaisseur du trait de contour, vous pouvez l’augmenter, ou le réduire, et solid#f5deb3 est la couleur et la structure du trait.

Et ensuite de la même façon, vous prévisualisez, vous enregistrez, et vous faites la même chose dans l'autres CSS.

Puis F5 !

Et voilà, cette méthode permet de différencier les commentaires des réponses.

Voici ce que ça donne chez moi...