Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Modifier l'apparence des textes des commentaires sous Blogger

Je vous avait promis de publier la suite de la personnalisation de la partie commentaires en fin de semaine, la voici !
Après avoir vu comment personnaliser l'avatar et modifier le fond des commentaires, aujourd'hui je vais vous expliquer comment modifier l'apparence des textes des commentaires : auteur, date, commentaire, et liens répondre.

PS : C'est mon 100e article !! Ça se fête !!

Modifier l'apparence des textes des commentaires sous Blogger

C'est parti pour les explications !

Sommaire

  1. Sauvegarde du thème
  2. Modifier l'apparence des textes
    1. Nom de l'auteur
    2. Date
    3. Commentaire
    4. Liens répondre / supprimer
    5. Lien afficher les réponses
    6. Lien répondre à l'article / au commentaire

Sauvegarde du thème

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+.

Comme d'habitude, première chose à faire avant de commencer : faire une sauvegarde du thème pour pouvoir revenir en arrière si besoin.

Cliquez sur Modèle à partir du 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 :

Modifier l'apparence des textes des commentaires sous Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier :)

Modifier l'apparence des textes

Cliquez maintenant sur Modifier le code HTML :

Modifier l'apparence des textes des commentaires sous Blogger

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

Modifier l'apparence des textes des commentaires sous Blogger

Si vous ne le trouvez pas, 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.

Nom de l'auteur

Collez le code suivant dans cette boîte :

#comments .comment-author {
Appuyez sur Entrer.
Vous devriez tomber sur ce code :

Modifier l'apparence des textes des commentaires sous Blogger

Remplacez les codes surlignés en bleu par ceux-ci :
/* ----- Nom de l'auteur  ----- */
.comments .comments-content .user a {
font-family: 'PT sans', sans-serif;   /* Police */
font-style: normal;
font-weight: normal;
font-size: 14px;   /* Taille de la police */
text-transform: uppercase;   /* Texte en majuscules | Minuscules = initial */
letter-spacing: 1px;   /* Espacement entre les caractères | Défaut = 0 */
color: #36D5D5;   /* Couleur du texte */
text-decoration: none;
}

/* ----- Nom de l'auteur quand survolé par la souris  ----- */
.comments .comments-content .user a:hover {
color: #000000;   /* Couleur du texte */
}
Comme ceci :

Modifier l'apparence des textes des commentaires sous Blogger

Vous pouvez changer la police, la taille de la police, la couleur du texte comme indiqué par les commentaires en orange.
Dans mon exemple, le texte est en majuscules. Pour supprimer cet effet, remplacez uppercase par initial à la ligne :
text-transform: uppercase;   /* Texte en majuscules | Minuscules = initial */
De plus, j'ai ajouté un espace de 1 pixel entre les caractères du texte. Pour remettre l'espacement par défaut, remplacez 1px par 0 à la ligne :

letter-spacing: 1px;   /* Espacement entre les caractères | Défaut = 0 */
Visuellement on obtient :
Modifier l'apparence des textes des commentaires sous Blogger

Date

Ajoutez le code suivant à la suite des 2 premiers :
/* ----- Date  ----- */
.comments .comments-content .datetime a {
font-family: 'Lora', serif;   /* Police */
font-size: 12px;   /* Taille de la police */
letter-spacing: 1px;   /* Espacement entre les caractères | Défaut = 0 */
margin-left: 20px;
padding-left: 20px;
border-left-size: 2px;   /* Epaisseur de la bordure à gauche */
border-left-style: solid;   /* Style de la bordure à gauche */
border-left-color: #888888;   /* Couleur de la bordure à gauche */
color: #525253;   /* Couleur du texte */
text-decoration: none;
}
Comme ceci :

Modifier l'apparence des textes des commentaires sous Blogger

De même, vous pouvez changer la police, la taille de la police, la couleur du texte, et l'espacement des caractères comme indiqué par les commentaires en orange.
Dans l'exemple, j'ai ajouté une bordure à gauche de la date pour la séparer du nom de l'auteur. Vous pouvez changer l'épaisseur de la bordure, sa couleur et son style.

Visuellement on obtient :

Modifier l'apparence des textes des commentaires sous Blogger

Commentaire

Collez le code suivant à la suite du précédent :
/* ----- Commentaire  ----- */
.comments .comments-content .comment-content {
text-align: justify;
font-family: 'PT sans', sans-serif;   /* Police */
font-size: 14px;   /* Taille de la police */
line-height: 1.5;
color: #525253;   /* Couleur */
}
Comme ceci :

Modifier l'apparence des textes des commentaires sous Blogger

Vous pouvez également changer la police, la taille de la police et la couleur du texte comme indiqué par les commentaires en orange.
Visuellement on obtient :

Modifier l'apparence des textes des commentaires sous Blogger

Liens répondre/supprimer

Collez les codes suivants à la suite des précédents :
/* ----- Liens Répondre/Supprimer  ----- */
.comments .comment .comment-actions a {
font-family: 'Lora', serif;   /* Police */
font-size: 12px;   /* Taille de la police */
letter-spacing: 1px;   /* Espacement entre les caractères | Défaut = 0 */
padding: 0 0 5px;
margin: 0 20px 0 0;
color: #36D5D5;   /* Couleur */
text-decoration: none !important;
}

/* ----- Liens Répondre/Supprimer quand survolés par la souris  ----- */
.comments .comment .comment-actions a:hover {
color: #000000;   /* Couleur */
}
Comme ceci :

Modifier l'apparence des textes des commentaires sous Blogger

De même, vous pouvez changer la police, la taille de la police, la couleur des liens, et l'espacement des caractères.
Visuellement on obtient :

Modifier l'apparence des textes des commentaires sous Blogger

Lien afficher les réponses

Collez les codes suivants à la suite des précédents :
/* ----- Lien Afficher les Réponses  ----- */

.thread-count a {
font-family: 'Lora', serif;   /* Police */
font-size: 12px;   /* Taille de la police */
letter-spacing: 1px;   /* Espacement entre les caractères | Défaut = 0 */
color: #525253;   /* Couleur */
text-decoration: none;
}

/* ----- Lien Afficher les Réponses quand survolé par la souris  ----- */
.thread-count a:hover {
color: #000000;   /* Couleur */
}
Comme ceci :

Modifier l'apparence des textes des commentaires sous Blogger

De même, vous pouvez changer la police, la taille de la police, la couleur des liens, et l'espacement des caractères en suivant les commentaires en orange.
Visuellement on obtient :

Modifier l'apparence des textes des commentaires sous Blogger

Lien répondre à l'article / au commentaire

Collez les codes suivants à la suite des précédents :
/* ----- Lien Répondre à l'article / au commentaire   ----- */
.comments .continue a {
display: block;
font-family: 'Lora', serif;   /* Police */
font-size: 12px;   /* Taille de la police */
font-weight: normal;
letter-spacing: 1px;   /* Espacement entre les caractères | Défaut = 0 */
padding: 0 0 5px;
margin: 0 20px 0 0;
color: #36D5D5;   /* Couleur */
text-decoration: none !important;
}

/* ----- Lien Répondre à l'article / au commentaire quand survolé par la souris  ----- */
.comments .continue a:hover {
color: #000000;   /* Couleur */
}
Comme ceci :

Modifier l'apparence des textes des commentaires sous Blogger

De même, vous pouvez changer la police, la taille de la police, la couleur des liens, et l'espacement des caractères en suivant les commentaires en orange.
Visuellement on obtient :

Modifier l'apparence des textes des commentaires sous Blogger

Et voilà ! Vous savez maintenant comment modifier l'apparence des textes des commentaires ;)

N'hésitez pas à jeter un œil aux autres tutoriels sur la partie commentaires si vous ne l'avez pas fait :
Bon blogging !

Autres articles

80 commentaires:

  1. Bonjour ! J'ai essayé toutes tes astuces pour modifier les commentaires (plusieurs de tes articles) mais aucune d'entre elles n'a fonctionné... J'ai pourtant bien tout suivit, étape par étape ! Une idée d'où viendrait le problème ?

    RépondreSupprimer
    Réponses
    1. C'est parce que tu utilises les commentaires Google +. On ne peut pas modifier les commentaires Google + car ils ne sont pas gérés par le blog. Désolée :/

      Supprimer
    2. Ah d'accord, merci beaucoup :) !
      Et il n'y aurait pas un moyen de ne pas les utiliser par hasard ?

      Supprimer
    3. Il faut désactiver l'option. Vas dans Google+ à partir du tableau de bord et décoche la case à coté de "Utiliser les commentaires Google+ sur ce blog ?"

      Supprimer
  2. Bonjour, je viens de suivre vos précieux conseils pour changer l'apparence de mes articles (j'ai désomais les images en petit carré) mais j'avais auparavant changer l'apparence de mes commentaires comme dans cet article... Mon soucis tout à sauté et bien que le code soit toujours dans mon template il ne s'applique plus... Auriez vous une idée du soucis?

    Merci beaucoup,
    Lucie

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,

      Il y a une toute petite erreur/faute de frappe dans ton code. Tout ce qui se trouve en-dessous peut être affecté et ne pas apparaître correctement.

      Cherches le code suivant :

      .main-inner {

      Juste au-dessus de cette ligne ajoutes le signe } comme ceci :

      }
      .main-inner {

      Et voilà ! :)

      Supprimer
    2. Oh lalaaaa Merci beaucoup, ça avait tout fait sauter (texte, etc...) j'ai du changer mes titres... :/

      MILLES MERCIS!

      Supprimer
  3. Coucou je les fais y a un petit moment déja ceci , mais j'ai un petit soucis lorsque j'ai crée mon menu déroulant tu m'avait dans supprimé un parce qu'il y avait 2 fois le même code .. Mais depuis que j'ai supprimé l'écriture de mes titre , article , et commentaire et noir pas belle , l'écriture n'es plus comme elle étais et de la même couleur , en modifiant l'apparence rien ne marche donc sa vient du code quand j'ai changer mais je ne trouve pas lesquel des code donc j'ai pensais que c'étais par rapport a celui ci mais non :/
    Je suis un peu perdu ...

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Il y a plusieurs erreurs / fautes de frappe dans ton code qui peuvent être à l'origine de ça.

      Cherches le code suivant :

      .date--header span {

      Et supprime 1 des 2 "-" pour obtenir :

      .date-header span {

      Ensuite cherches :

      }ent.shadow.spread) 0 0;

      Supprime cette ligne.

      Supprimer
  4. Coucou j'ai chercher comme tu ma dis .date-header span { , il y a que un " - " et je trouve pas }ent.shadow.spread) 0 0; , comment dois je faire ? Merci beaucoup du temps que tu m'accorde !

    RépondreSupprimer
    Réponses
    1. La ligne

      }ent.shadow.spread) 0 0;

      Se trouve juste au-dessus de cette ligne :

      html body .region-inner {

      Supprimer
  5. Je le trouve pas non plus ! :/

    RépondreSupprimer
    Réponses
    1. html body .region-inner { , se trouve avec quelle code ? Il se peut que j'ai supprimé le code depuis que j'ai enlever un code d'apparence de menu déroulant ?

      Supprimer
  6. Bonjour et merci beaucoup Catherine! Tu es vraiment d'une grande aide, tes posts sont devenus indispensables dans la construction de mon futur blog!!! Très beau travail!

    RépondreSupprimer
  7. Wao, 100ème article, oui, ça se fête! ;)

    RépondreSupprimer
  8. Bonjour,
    Merci beaucoup pour t'es petit tutoriel, j'ai voulu testé celui-ci sur mon blog (en construction), seulement quand je rentre tout les codes etc.. et que j'enregistre, il n'y a aucun changement, tu pense que cela est du à quelques choses en particulier ?
    Merci d'avance,
    Phil'

    RépondreSupprimer
    Réponses
    1. Bonjour Phil',
      Il y a une erreur dans ton code CSS.
      Sur la page Modifier le code HTML cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Cliques n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît colles :

      /* Police et Couleur des Liens quand Survolés par la Souris */

      Et appuies sur Entrer. Tu devrais trouver ceci :

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      .tabs-inner .widget li a {
      font-family: Arial;
      font-size: 14px;
      font-style: oblique;
      text-decoration: none;
      color: #FF8484;
      margin-right: 20px;
      }

      Supprimes la ligne :

      .tabs-inner .widget li a {

      Comme ceci :

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      font-family: Arial;
      font-size: 14px;
      font-style: oblique;
      text-decoration: none;
      color: #FF8484;
      margin-right: 20px;
      }

      Enregistre, et dis-moi ce que ça donne.

      Supprimer
  9. Bonjour, j'ai un petit soucis, j'ai modifier l'apparence des textes ça marche bien, sauf que ça a supprimé la personnalisation de mon pied de page, et malheureusement je n'ai pas fait de sauvegarde

    RépondreSupprimer
    Réponses
    1. Il y a sûrement une petite erreur dans ton code : oubli de signe { ou }, ou un signe en trop.

      Je viens de regarder ton blog et effectivement il manque un signe }. Cherches la ligne suivante :

      /* Comments

      Et ajoutes un signe } juste au-dessus ;)

      Supprimer
  10. Hello ! J'ai tout suivi ce que tu as dis mais malheureusement ça ne marche pas... J'ai bien re-regarder et je ne crois pas avoir oublier de } alors je ne comprends pas... Tu as une idée ? :/ Merci encore pour tous tes supers tutos (qui j'espère vont finir par marcher chez moi...)

    RépondreSupprimer
    Réponses
    1. Bonjour Cléa,
      Il manque un signe } plus haut dans ton code. Cherches le code suivant :

      .post-body img, .post-body .tr-caption-container {

      Et rajoutes un signe } juste au-dessus comme ceci :

      }
      .post-body img, .post-body .tr-caption-container {

      Il y a aussi un autre problème dans ton code. Cherches :

      .tabs-outer {
      overflow: visible;
      }

      Tu devrais trouver :

      .tabs-outer {
      overflow: visible;
      }
      margin: 0;
      padding: .6em 1.5em;
      font: normal normal 12px Josefin Sans;
      color: #000000;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      border-left: 1px solid transparent;
      height: 16px;
      line-height: 16px;
      }
      .tabs-inner .widget li:last-child a {
      border-right: 1px solid transparent;
      }

      Remplaces tout ce code par :

      .tabs-outer {
      overflow: visible;
      }
      .tabs-inner .widget li:last-child a {
      border-right: 1px solid transparent;
      }

      Supprimer
  11. Bonjour,

    Tout d'abord je tiens moi aussi à vous remercier pour votre blog et ces tutoriels si précis ! C'est génial de partager tout ça avec nous :)

    Sauf inattention de ma part, cette question n'a pas encore été posée suite aux articles concernant la personnalisation des commentaires : je me demandais comment supprimer le fameux "Inscription à : Publier les commentaires (Atom)". Ça ne doit pas être bien compliqué mais j'ai trouvé différentes explications sur internet et je n'ai désormais confiance plus qu'en vous !

    Je vous remercie par avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Tu peux cacher ces liens en ajoutant un tout petit bout de code CSS. Dans Modèle > Modifier le code CSS cherches la ligne suivante :

      /* Content

      Juste au-dessus de cette ligne colles :

      .post-feeds {
      display: none;
      }

      Sauvegardes, et voilà ! ;)

      Supprimer
    2. J'ai fait ce que tu as dit, le lien n'est plus là quand on lit un article mais quand on est sur la page d'accueil il y est toujours... Comment faire? :(

      Supprimer
    3. Bonjour Maurine,
      Pour cacher ce lien sur la page d'accueil il faut rajouter ce code :

      .blog-feeds {
      display: none;
      }

      Supprimer
  12. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  13. Bonjour! Merci pour vos articles ils m'aident beaucoup, cependant plusieurs de vos articles concernant les commentaires me rendent perplexe..je n'ai pas du tout les lignes avec les #comments etc.. est ce qu'il y aurait une façon d'y remedier?
    Et j'ai du mal également à comprendre l'endroit dans mon code hmtl/css où est ce que l'on peut modifier l'apparence du "Ajouter un commentaire" qui est bien trop gros je trouve, je ne sais pas si vous pouvez m'y aider?

    Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Utilises-tu le système de commentaires de Blogger par défaut ou le système Google + ?

      Supprimer
  14. Coucou Catherine!

    Grâce à tes précieux conseils j'ai pu refaire tout le design de mon blog et je t'en remercie vivement!

    J'ai un petit soucis, j'avais suivi tous tes conseils pour personnaliser les commentaires et je viens de me rendre compte que le formulaire de contact avait totalement disparu de mon blog, je ne sais pas quelle manip j'ai pu faire pour en arriver là, tu auras peut être une petite idée ?

    Merci d'avance

    Bises

    Cathy

    RépondreSupprimer
    Réponses
    1. Bonjour Cathy,
      As-tu réglé le problème car le formulaire de commentaire apparaît bien pour moi.

      Supprimer
  15. Hello :)
    Merci pour tout tes précieux tutos ! C'est génial !!
    J'ai une question par rapport à ce tuto, tout fonctionne mais le "Texte Commentaire" est en gras. Comment le rendre "normal"?
    merci d'avance !
    Erine

    RépondreSupprimer
    Réponses
    1. Bonjour Erine,
      Il te suffit d'ajouter la ligne :

      font-weight: normal !important;

      Avant le signe } du code CSS correspondant aux textes ;)

      Supprimer
  16. Salut ! Je cherche à modifier le fond des bulles des auteurs de mon blogs ! Si tu serais faire, merci de me prévenir où même d'en faire un article ! Voici mon blog : http://clubpingu20.blogspot.fr/

    RépondreSupprimer
  17. Oui j'ai réussis à résoudre le problème des commentaires, c'était par rapport à google + :)

    Cependant, je n'arrive pas à changer la couleurs des liens de mes articles, ces derniers s'affiche en blanc, donc invisible, c'est embêtant, connais-tu le code exact pour les liens s'il te plait ? :/

    RépondreSupprimer
    Réponses
    1. Cherche ce code :

      a{ color:#ffffff; }

      Et remplace #ffffff par le code de la couleur de ton choix ;)
      Ce code défini la couleur de tous les liens de ton blog. Il est paramétré sur la couleur blanc.

      Supprimer
  18. bonjour,
    J'ai un petit soucis, j'ai du faire une manip qui fallait pas mais quand je veux changer la taille de police des post je ni arrive pas. Ca s'enregistre dans la modification du modèle mais il n'y à pas de changement sur la page. pareil le fond ne peut pas changer de couleur, ça reste blanc et rien à faire pour que ca change. pourriez vous me dire si j'ai fait de grosse betises ou si juste je n'y comprend rien? merci d'avance. http://cousu-de-fil-blanc.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Kelly,
      Il y a plusieurs erreurs dans ton code. Tout d'abord retrouve cette ligne :

      /* Content

      Rajoute */ à la fin comme ceci :

      /* Content */

      Ensuite cherche cette ligne :

      /* Alignement du lien dans l'article */

      Tu devrais trouver :

      /* Alignement du lien dans l'article */
      .jump-link {
      text-align: right; /* Alignement du lien : left = à gauche ; center = au centre ; right = à droite */
      }
      ----------------------------------------------- */

      Supprime la ligne :

      ----------------------------------------------- */

      Comme ceci :

      /* Alignement du lien dans l'article */
      .jump-link {
      text-align: right; /* Alignement du lien : left = à gauche ; center = au centre ; right = à droite */
      }

      Sauvegarde et ça devrait être mieux :)

      Supprimer
  19. Bonjour ! Merci pour tous ces tutos précieux !
    J'ai remarqué que depuis que j'ai fait ces modifications le nombre des commentaires ne s'affichent plus. Avez-vous un code pour les remettre ?
    Merci & bonne soirée !

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Les codes CSS de ce tutoriel ne modifient que l'apparence des textes des commentaires. Tu as du supprimer un morceau de code par erreur en modifiant les titres des commentaires (http://ladybirdr.blogspot.com/2014/12/changer-le-lien-et-les-titres.html). Compare les codes des commentaires d'un nouveau blog non modifié (tu peux créer un blog que tu pourras utiliser comme test) avec les codes de ton blog actuel, pour voir ce qu'il manque ;)

      Supprimer
    2. Merci beaucoup Catherine ! =)

      Supprimer
  20. Bonjour, encore une fois j'ai tout suivi à la lettre et tout à très bien marché :) Le problème... J'avais suivis le tuto précédent pour modifier le fond des commentaire et maintenant tout celui-ci c'est annulé :/ Une idée du soucis ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Soit tu as supprimé par erreur les codes CSS qui modifie le fond des commentaires, soit il y a une erreur dans ton code CSS. Un oubli de signe : ; /* */ { ou } et tout ce qui suit l'erreur est mal, ou pas pris en compte. De même s'il y a un signe en trop. Vérifie tes codes CSS, qu'il n'y ai pas d'erreur ;)

      Supprimer
  21. bonjour, j ai modifié le nom de l auteur des comm avec le css que vous nous donnez et ça marche... une exeption lorsque le comm est édité par un anonyme la police est ok mais en gras au lieu de normal.. j ai revu toute ma page css et remplacé partout le mot bold par normal sans succès
    pouvez vouz me dire ce que je dois changer ? merci d avance
    à toutes fins utiles copie des codes que j ai mi
    /* ----- Nom de l'auteur ----- */
    .comments .comments-content .user a {
    font-family: 'Allura; /* Police */
    font-style: normal;
    font-weight: normal;
    font-size: 36px; /* Taille de la police */

    letter-spacing: 1px; /* Espacement entre les caractères | Défaut = 0 */
    color: #990000; /* Couleur du texte */
    text-decoration: none;
    }
    /* ----- Nom de l'auteur quand survolé par la souris ----- */
    .comments .comments-content .user a:hover {
    color: #ffffff; /* Couleur du texte */

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux essayer d'ajouter !important à la ligne suivante :

      font-weight: normal;

      Comme ceci :

      font-weight: normal !important;

      Supprimer
  22. Bonjour Catherine !
    Ton article envers les commentaires est super intéressant et j'ai réussis sans problème à chaque étape ! (Faut dire que t'explique super bien).

    Mais le problème est que rien ne se voit sur mobile... J'ai changée l'esthétique de mes commentaires, ainsi que "Aucun commentaire" et "Envoyer un commentaire" et même les logos pour partager mes articles... Mais une fois sur mobile, je retrouve tout comme c'était avant et les logos sont également les simples de Blogger... Pourtant j'ai suivis à la lettre tes indications pour Mobile également...

    J'espère que tu pourras m'aider à comprendre... :/
    Bisous et bon dimanche !

    RépondreSupprimer
    Réponses
    1. Bonjour Angie,
      Tout d'abord vérifie que tu as bien activé la version mobile Personnalisée dans tes préférences. Ce mode va utiliser les codes CSS de ton thème.
      Va dans Modèle, clique sur l'icône écrou sous Mobile. Ensuite :
      - Vérifie que la ligne Oui, afficher le modèle mobile sur les mobiles est bien cochée
      - Dans la liste déroulante sous choisir un modèle, sélectionne Personnaliser

      Pour finir, les versions mobiles et web des blogs sur Blogger sont distincts. Il faut ajouter des codes CSS spécifiquement pour la version mobile. Pour cela il suffit d'ajouter .mobile avant les codes CSS des éléments à modifier. Colle ces codes CSS avant :
      ]]></b:skin>

      Supprimer
  23. Bonjour,
    Est-il possible de cacher uniquement l'heure des commentaires en conservant la date?
    Merci
    Stéphanie

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      Tu peux modifier l'affichage des dates des commentaires dans les paramètres du blog.
      Va dans Paramètres > Langue et de mise en forme. Sous Mise en forme, à la ligne Format de date et d'heure du commentaire sélectionne le format qui t'intéresse. Quand tu as fini, sauvegardes en cliquant sur Enregistrer les paramètres en haut de la page.

      Supprimer
  24. bonjour... j ai un souci avec les noms d auteurs des comm..en effet je veux que la police soit normale et non grasse
    j ai réussi à le faire pour les comm google et nom url mais je n arrive pas à enlever le 'gras' quand il s agit d un comm anonyme
    voilà ce que j ai mis dans le code html suivant tes consiels .

    .comments .comments-content .user a {

    font-style: normal;
    font-weight: normal;
    }

    et sur ce lien tu peux voir le premier comm avec un pseudo en gras

    http://septsup6.blogspot.fr/2016/11/jy-va-t-y-jy-va-t-y-pas.html#comment-form

    merci d avance pour ta réponse

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter !important avant le signe ; pour forcer le navigateur à prendre un paramète en compte. On obtient :

      .comments .comments-content .user a {
      font-style: normal !important;
      font-weight: normal !important;
      }

      Supprimer
    2. Bonjour !
      Alors j'avais le même problème que Septsup, impossible de changer la forme de ce pseudo Anonyme, que ce soit la couleur, la graisse ou la casse. J'ai pas mal galéré car les !important n'y changeait rien du tout et j'ai trouvé la solution ! Comme les pseudos Anonyme ne sont pas des liens, j'ai enlevé le "a" de la fin. J'ai écrit :
      .comments .comments-content .user {
      Et ici j'ai mis les propriétés que je voulais à mon pseudo anonyme
      }
      Et ça marche ! Voilà, si ça peut aider quelqu'un :)
      Bonne journée,
      Soann

      Supprimer
    3. Merci beaucoup pour la réponse Cath.. hélas j ai remplacé mon texte par le tien mais c est sans résultat... je t envoie le morceau des comm concerné élargi pour que tu vois si j ai bien tout mis

      .blog-feeds a:hover, .post-feeds a:hover {
      color: $(feed.link.hover.color);
      }
      .comments .comments-content .user a {
      font-style: normal !important;
      font-weight: normal !important;
      }


      #comments .avatar-image-container img {
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      }
      #comments .avatar-image-container img {
      border-style: double; /* Style de la bordure */
      border-color: #660000; /* Couleur de la bordure */
      border-width: 4px; /* Epaisseur de la bordure */
      }
      .comments .avatar-image-container {
      margin: .2em 0 0;
      max-height: 60px !important; /* Hauteur final de l'avatar avec la bordure */
      width: 60px !important; /* Largeur final de l'avatar avec la bordure */
      }

      je te donne également le lien où tupeux constater de le nom de l auteur reste en gras dès lors que ce n est pas un lien...

      http://septsup6.blogspot.fr/2016/12/le-loup-blanc.html#comment-form

      merci beaucoup de ta réponse


      Supprimer
    4. Bonjour Soann,
      Oui pour modifier la couleur et le forme des pseudos Anonyme, tu as fait ce qu'il fallait ;)

      Supprimer
    5. Septsup, tu peux suivre l'explication de Soann pour les utilisateurs n'ayant pas de lien ;)

      Supprimer
  25. merci pour ta réponse... effectivement je pense que l explication de Soann est tout à fait ce qu il me faut je vais essayer de suite

    RépondreSupprimer
  26. Merci mille fois ça marche impec... et merci à Soann aussi ça fait un bon moment que je bataillais...

    RépondreSupprimer
  27. Bonjour,

    j'ai une petite question pour la police des articles. J'ai voulu modifier la taille de la police, mais impossible j'ai tout essayé. quel est le code qu'il faut modifier ? http://nouveaudesignmissfashionista.blogspot.fr/

    Merci et bonne journée ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as trouvé le code ;)
      C'est celui-ci :

      .post-body {
      }

      Supprimer
    2. Petite remarque, il semblerait que tu ai modifié la taille de la police dans l'éditeur de texte des articles en large. D'où la grande police.
      Si tu souhaites forcer la police à correspondre à celle de ton code CSS, rajoute !important à la ligne :

      font-size: 12px;

      Comme ceci :


      font-size: 12px !important;

      Dans ton code :

      .post-body {
      font-family: Open Sans;
      letter-spacing: 2px;
      font-size: 12px;
      max-width: 780px;
      margin: 0 auto;
      position: relative;
      }

      Supprimer
    3. Bonsoir, j'ai essayé de forcer la chose mais ça ne fonctionne pas, j'ai même essayé en remettant la police en "normal" dans l'éditeur mais ça ne fonctionne pas/

      Supprimer
    4. Bonjour,
      Dans ce cas, il faudrait supprimer le mise en forme des textes dans l'éditeur. Tu peux sélectionner l'ensemble des textes et cliquer sur l'outil Supprimer la mise en forme (à droite de l'outil Citation il représenté par un T avec une croix rouge en bas à droite).

      Supprimer
  28. Bonjour,
    j'aimerai bien aligner le répondre tout à droite est-ce possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible, utilise le code CSS suivant :

      .comments .comment .comment-actions.secondary-text {
      display: block;
      text-align: right;
      }

      Supprimer
  29. Argh j'ai crié victoire trop vite... tout est parfait, sauf que sur la version mobile, je viens de voir que les commentaires dépassent de la page et ils sont donc coupés...
    Sais-tu comment résoudre le problème?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réglé le problème car en allant voir ton blog sur mobile je ne rencontre pas ce problème :/

      Supprimer
  30. bonjour,
    déjà je voulais te féliciter pour ce superbe blog qui m'a beaucoup aidé dans la création du mien !
    du coup je voudrais te faire part de mon problème. .. Je ne sais pas pourquoi mais je n'ai pas le cadre "ajouter un commentaire " en bas de mes articles ... alors j'ai activé les commentaires Google + mais du coup j'ai quand même écrit en gros en bas de mon article "0 commentaire" même si j'en ai dans Google + ... j'ai pas trouvé d'article expliquant ce problème !
    je te remercie par avance !!
    mon blog : www.synddie.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Synddie,
      En allant sur ton blog je vois bien le formulaire de commentaire.
      Néanmoins, le problème peut venir de ton thème. Les thèmes gratuits Gooyaabi Templates, Sora Templates, ThemeXpose, etc., sont pleins d'erreurs. Même les versions payantes.

      Supprimer
  31. Bonjour, j'ai bien vérifier que je n'utilisais pas les commentaires Google+, mais je n'arrive toujours pas à trouver la ligne #comments .comment-author { savez-vous pourquoi ??
    Alissia ;p

    RépondreSupprimer
    Réponses
    1. Bonjour Alissia,
      Pourtant je le trouve bien dans ton code.
      As-tu bien cliqué dans la boîte de code avant de faire Ctrl + F ? Car sinon un champ de recherche apparaît bien mais en haut à droite de la page web, or ce champ de recherche ne fonctionnera pas. Il faut utiliser le champ qui apparaît dans la boîte de code.
      Vérifie, également que tu n'as pas ajouté d'espace avant ou après la ligne de code dans le champ de recherche, ça peut fausser la recherche.

      Supprimer
  32. Re-bonjour,
    J'ai essayé selon vos conseils mais le code n'apparaît toujours pas...

    RépondreSupprimer
    Réponses
    1. Bonjour Aliss,
      Je ne sais pas quoi te dire car je le trouve bien dans ton code.
      Il se trouve juste au-dessus du code :

      #comments .comment-author:first-child {

      Supprimer
  33. Bonjour,
    J'ai finalement réussi à trouver le code en entrant #comments .comment-author:first-child { dans le champ de recherche !

    Merci beaucoup de votre aide,

    Alissia

    RépondreSupprimer
  34. Bonjour, excusez moi de vous déranger mais je n'ai trouvé la solution à mon problème nul part, comment faire pour supprimer l'espèce de petit rond gris avec une sorte de crayon qui se trouve à droite du nom de l'auteur du commentaire? J'ai essayé de le visualiser en navigateur privé et on le voit aussi ce qui fait plutôt moche...

    PS: vous risquez de voir mon prénom marqué un peu partout cette semaine, je vous demande à l'avance de m'en excuser c'est que je suis en pleine création de mon blog et que je me sers essentiellement du votre pour le personnaliser, merci pour tous ces tutos d'ailleurs!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est le marquer de l'auteur du blog, pour le cacher ajoute ce code CSS :

      .comments .comments-content .icon.blog-author {
      display: none !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Et voilà ;)

      Supprimer
    2. Merci beaucoup j'aurais jamais pu deviner par moi-même ahah!

      Supprimer
  35. Ma réaction quand j'ai testé d'écrire des commentaires et des commentaires imbriqués comme dans ton tuto "oh c'est trop beau comme ça !" (Enfin, moi j'aime en tout cas. ;) ) Je n'avais pas encore vu le résultat des tutos que j'avais mis en application hier ou avant-hier. ^^ Merci encore !

    Une question : on ne peut pas changer la boite de dialogue dans laquelle je suis actuellement en train d'écrire je suppose ? (Tu l'aurai peut-être fait sinon ?) :)

    PS : J'ai encore oublié de cocher "m'informer" sur tous mes derniers commentaires, y compris ceux où je te posais des questions, du coup je vais réouvrir tous tes articles pour vérifier que tu ai répondu à mes questions (car il me semble que tu l'a fait...) x)

    RépondreSupprimer
    Réponses
    1. Bonjour Maïlys,
      Je suis contente que tes modifications te plaisent :)
      Malheureusement le formulaire de commentaire est la seule chose qu'on ne peut pas modifier sur Blogger car il est chargé à partir de Blogger et non du thème utilisé :/
      J'ai répondu à tes commentaires aujourd'hui donc tu peux vérifier ;)

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger