Styler les commentaires du blog

Avant de vous lancer, merci de lire le mode d'emploi des codelets.

Mode d'emploi des codes

Où insérer les codes ?

Les codes fournis doivent être insérés dans la fenêtre de saisie qui apparaît quand on clique, en mode "Admin", sur Paramètres > Insérer dans le header.

Modifier le header en admin

Il faut ensuite appuyer sur le bouton d'enregistrement situé sous la fenêtre de saisie pour que les codes soient enregistrés.

Pour voir les effets du code appliqué à votre site, il faut repasser en mode "Visiteur" pour rafraîchir la page.

Peut-on utiliser plusieurs codes ?

Oui, les codes peuvent être combinés, à condition que vous soyez cohérents dans votre choix : ainsi, si vous combinez le code qui empêche l'affichage du trackback des liens avec celui qui permet d'en changer la couleur, il y aura assurément un problème d'incompatibilité !

Que faire en premier ?

Peu importe le nombre de codes que vous comptez insérer ; vous devez commencer par noter ces deux déclarations dans la fenêtre de saisie. Vos codes seront copiés-collés entre ces deux éléments :

<style type="text/css">

/* C'est ici que vous insérez le(s) code(s) */

</style>

Il ne vous reste plus qu'à choisir les codes dont vous avez besoin et à les copier-coller entre ces deux balises.

Flèche vers le haut

Agrandir l'espace entre les commentaires

Si vous trouvez que les commentaires sont un peu trop "tassés" et que vous voulez agrandir l'espace entre eux :

Capture espace petit entre les comms

... copiez-collez ce code :

/* Agrandir l'espace entre les commentaires */ 

ul.com-list li, ul.com-list-noava li { 
padding: 20px 0px;  /* Remplacer 20 par un nombre plus grand pour augmenter davantage l'espace */ 
}

Résultat :

Espace agrandi entre les comms
Flèche vers le haut

Styler la ligne qui sépare les commentaires

Voici une liste de codes qui permettent de styler la ligne grise qui sépare les commentaires :

Barre qui sépare les comms

Ne pas afficher de séparation du tout

Pour ne pas afficher de séparation entre les commentaires :

Supprimer la séparation entre les comms

... copier-coller ce code :

/* Supprimer la barre qui sépare les commentaires */ 

ul.com-list li, ul.com-list-noava li { 
border-top-width: 0px;
}
Flèche vers le haut

Changer la couleur de la ligne

Pour changer la couleur de la ligne de séparation entre les commentaires :

Changer couleur de la ligne entre les comms

... copier-coller ce code :

/* Changer la couleur de la ligne de séparation des commentaires */

ul.com-list li, ul.com-list-noava li { 
border-top: 1px solid #FF8B3B;  /* Pour changer la couleur, remplacer #FF8B3B */
}

Pour ce code et les suivants, vous aurez besoin de choisir une couleur et d'obtenir son code hexadécimal (de la forme #efefef). Utilisez cet outil pour ce faire :

Flèche vers le haut

Epaissir la ligne de séparation

Pour afficher une ligne de séparation plus épaisse entre les commentaires :

Epassir la ligne entre les comms

... copier-coller ce code :

/* Epaissir la ligne de séparation entre les commentaires */

ul.com-list li, ul.com-list-noava li { 
border-top: 2px solid #FF8B3B;  /* Pour changer la couleur, remplacer #FF8B3B ; pour épaissir remplacer 2 par un chiffre plus grand */
}
Flèche vers le haut

Afficher une ligne en pointillés

Pour afficher entre les commentaires une discrète ligne en pointillés :

Ligne en pointillés entre les comms

... copier-coller ce code :

/* Mettre en pointillés la ligne de séparation entre les commentaires */

ul.com-list li, ul.com-list-noava li { 
border-top: 1px dotted #FF8B3B;  /* Pour changer la couleur, remplacer #FF8B3B - pour grossir les pointillés, remplacer 1 par un chiffre plus grand */
}
Flèche vers le haut

Afficher la ligne en tirets

Pour afficher entre les commentaires une ligne sous forme de pointillés :

Tirets entre les commentaires

... copier-coller ce code :

/* Afficher la ligne de séparation entre les commentaires sous forme de tirets */

ul.com-list li, ul.com-list-noava li { 
border-top: 1px dashed #FF8B3B;  /* Pour changer la couleur, remplacer #FF8B3B - pour grossir les tirets, remplacer 1 par un chiffre plus grand */
}
Flèche vers le haut

Styles combinés

J'ai indiqué dans chaque code comment le personnaliser en combinant plusieurs modifications. A titre d'exemple, voici deux codes "complexes" qui intègrent plusieurs modifications.

Exemple 1

Pour que la ligne entre les commentaires soit en pointillés assez épais et de couleur verte :

Ligne en gros pointillés verts

... copier-coller ce code :

/* Exemple 1 de styles combinés */

ul.com-list li, ul.com-list-noava li { 
border-top: 3px dotted #8FBF33;  /* Pour changer la couleur, remplacer #8FBF33 - pour diminuer les pointillés, remplacer 3 par un chiffre plus petit */
}

Exemple 2

Pour que la ligne de commentaires soit faites de larges tirets gris :

Gros tirets gris entre les comms

... copier-coller ce code :

/* Exemple 2 */

ul.com-list li, ul.com-list-noava li { 
border-top: 4px dashed #ccc;  /* Pour changer la couleur, remplacer #ccc - pour diminuer les tirets, remplacer 4 par un chiffre plus petit */
}
Flèche vers le haut

Supprimer la mention "Ecrire commentaire"

Nativement, la mention "Ecrire commentaire" apparaît en haut des commentaires :

Mention "Ecrire commentaire" présente

Mais il est possible de la cacher :

Supprimer "Ecrire commentaire"

... en copiant-collant ce code :

/* Supprimer la mention "Ecrire commentaire" */

p.skiptoform { 
visibility: hidden;
}

Notez que le formulaire pour poster des commentaires sera toujours présent et fonctionnel à la fin des commentaires.

Flèche vers le haut

Supprimer les #numéros associés aux commentaires

Chaque commentaire posté est numéroté ainsi sur la droite :

Mais il est possible d'enlever complètement ces numéros :

... en copiant-collant ce code :

strong.number { 
display: none !important;
}
Flèche vers le haut

Styler les #numéros associés aux commentaires

Enlever le gras du numéro

Les numéros associés aux commentaires apparaissent en gras :

Mais on peut dégraisser cet affichage pour le rendre un peu plus discret :

... en copiant-collant ce code :

strong.number { 
font-weight: normal !important;
}
Flèche vers le haut

Changer la taille du numéro

Les numéros des commentaires sont de la même taille que la police utilisée sur le reste du site :

Agrandir les numéros 

Mais on peut agrandir la taille de ces numéros pour créer un effet de "style" :

... en copiant-collant ce code :

strong.number { 
font-size: 20px !important;
}

Dans ce code, vous pouvez modifier la taille en pixels du numéro en remplaçant 20px par une valeur de votre choix.

Réduire la taille des numéros  

A l'inverse, on peut réduire la taille de ces numéros pour les rendre plus discrets :

... en copiant-collant ce code :

strong.number { 
font-size: 10px !important;
}

Dans ce code, vous pouvez modifier la taille en pixels du numéro en remplaçant 10px par une valeur de votre choix.

Flèche vers le haut

Changer la couleur du numéro

Les numéros des commentaires sont de la même couleur que la police utilisée sur le reste du site :

Mais on peut modifier leur couleur :

... en copiant-collant ce code :

strong.number { 
color: orange !important;
}

Pour ce code et les suivants, vous aurez besoin de choisir une couleur et d'obtenir son code hexadécimal (de la forme #efefef). Utilisez cet outil pour ce faire :

Flèche vers le haut

Encadrer le numéro

Pour faire ressortir le numéro associé au commentaire, on peut aussi l'encadrer.

Souligner le numéro 

On peut souligner le numéro d'un épais trait coloré :

... en copiant-collant ce code :

strong.number { 
border-bottom: 3px solid #607EDD !important;
}

Dans ce code, vous pouvez modifier :

  • l'épaisseur de la ligne en pixels (3px, 5px... )
  • le style de la ligne : solid (trait continu), dashed (traits discontinus) ou dotted (pointillés)
  • la couleur de la ligne en remplaçant le code hexadécimal #607EDD par celui de votre choix

"Bordurer" le numéro  

On peut signaler le numéro à l'aide d'une bordure colorée un peu épaisse :

... en copiant-collant ce code :

strong.number { 
border-left: 3px solid #607EDD !important;
padding: 2px 4px;
}

Dans ce code, vous pouvez modifier :

  • l'épaisseur de la bordure en pixels (3px, 5px... )
  • le style de la bordure : solid (trait continu), dashed (traits discontinus) ou dotted (pointillés)
  • la couleur de la bordure en remplaçant le code hexadécimal #607EDD par celui de votre choix

Faire un cadre rectangulaire

On peut faire un cadre rectangulaire de différentes couleurs et épaisseurs :

... en copiant-collant ce code :

strong.number { 
border: 1px dotted #efefef !important;
padding: 2px 4px;
}

Dans ce code, vous pouvez modifier :

  • l'épaisseur du cadre en pixels (3px, 5px... )
  • le style du cadre : solid (trait continu), dashed (traits discontinus) ou dotted (pointillés)
  • la couleur du cadre en remplaçant le code hexadécimal #efefef par celui de votre choix

Faire un cadre rond 

On peut également faire un encadré circulaire (qui ne s'affichera pas sur les anciennes versions d'Internet Explorer) :

... en copiant-collant ce code :

strong.number { 
border: 1px solid #ddd !important;
padding: 2px 4px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
}

Dans ce code, vous pouvez modifier :

  • l'épaisseur du cadre en pixels (3px, 5px... )
  • le style du cadre : solid (trait continu), dashed (traits discontinus) ou dotted (pointillés)
  • la couleur du cadre en remplaçant le code hexadécimal #ddd par celui de votre choix
  • l'angle des arrondis en remplaçant la valeur 17px par une autre valeur, supérieure ou inférieure.

 

Flèche vers le haut

Mettre un fond derrière le numéro

Pour mettre en valeur le numéro associé au commentaire, on peut le mettre sur un fond coloré :

... en copiant-collant ce code :

strong.number { 
background: #efefef !important;
padding: 2px 4px;
}

Dans ce code, vous pouvez modifier la couleur du fond en remplaçant le code hexadécimal #efefef par celui de votre choix.

 

Flèche vers le haut

Combiner les différents styles

Vous pouvez bien sûr combiner les différents codes proposés ci-dessus pour fabriquer "your own flavour". Il suffit d'empiler les codes fournis comme le montrent les 3 exemples suivants.

Exemple n°1  

Pour obtenir cet affichage (numéros agrandis en blanc, dans un encadré lavande sur fond violet-bleu) :

  ... copier-coller ce code :

strong.number {
font-size: 17px;
background: #607EDD;
color: #fff;
padding: 2px 4px;
border: 1px solid lavender;
}

Exemple n°2 

Pour obtenir cet affichage (numéros en gris, de taille réduite, soulignés d'une bordure grise) :

 ... copier-coller ce code :

strong.number {
color: #bbb;
font-size: 13px;
padding: 2px 4px;
border-bottom: 3px solid #efefef;
}

Exemple n°3  

Pour obtenir cet affichage (numéros en gris, dans un cadre arrondi grisé) :

 ... copier-coller ce code :

strong.number {
color: #bbb;
padding: 3px 5px;
background: #efefef;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
}

Plein de possibilités donc de personnaliser les commentaires du blog et ceux du "livre d'or" de votre site Jimdo !

Flèche vers le haut

Par ici les commentaires !

Écrire commentaire

Commentaires : 6
  • #1

    Marine (lundi, 26 septembre 2011 11:15)

    Merci pour toutes ces astuces, j'ai pu faire quelques petits changements :)
    Une fonction que je tente de trouver en vain depuis un petit moment : Pouvoir séparer les articles de blog par une simple ligne afin de les dissocier :/

  • #2

    JEANNOT Peggy (lundi, 09 janvier 2012 20:16)

    Une petite question d'une novice ....est-il possible de proposer une inscription au blog ( style inscription à la newsletter qu'on retrouve sur les blogs "classiques" ) ? Merci beaucoup !

  • #3

    Nicolas Andrès (dimanche, 30 décembre 2012 22:17)

    Je mets sa : mais rien ne se passe.

    <style type="text/css">

    /* strong.number {
    color: #bbb;
    padding: 3px 5px;
    background: #efefef;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    } */

    </style>

    J'ai besoin d'aide.

  • #4

    Isabelle (lundi, 31 décembre 2012 14:42)

    Bonjour,
    C'est normal : vous avez mis le code entre commentaires... Il n'est donc pas interprété. Il suffit de le recopier exactement (sans rien changer à la virgule près) comme je l'ai donné et de bien valider à la fin.
    Bon courage !
    Isa

  • #5

    Isabelle (lundi, 31 décembre 2012 14:43)

    Voici le code à copier-coller :

    <style type="text/css">

    strong.number {
    color: #bbb;
    padding: 3px 5px;
    background: #efefef;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    }

    </style>

  • #6

    testwebmaster (samedi, 30 mars 2013 10:07)

    Continue comme ça !

Ruban