22 août 2010

(OverBlog) Modifier les commentaires

Nous allons modifier la zone commentaire sous l'article : police, background et encadrements.
Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.


MODIFICATION DES POLICES

Le titre (commentaires)
.h2commentMessage {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le commentaire
.commentMessage {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
La ligne d'info sous le commentaire
.commentOption {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le numéro dans la ligne d'info sous le commentaire
.commentOption a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le pseudo dans la ligne d'info sous le commentaire
.commentOption .newWindow {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
La réponse
.responseMessage {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
La ligne d'info sous la réponse
.responseOption {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le pseudo dans la ligne d'info sous la réponse
.commentOption a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Ecrire un commentaire
.afterReactions .linkAddComment {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que
text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Un fond dans le commentaire
.commentMessage {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans la réponse
.responseMessage{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Vous effacez ce qui ne vous convient pas, sachant que
background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas
Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer le commentaire
.commentMessage {border:solid 1px #D8D7D7}
Pour encadrer la réponse
.responseMessage {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

9 commentaires:

  1. Bonjour et tout d'abord bravo pour ce blog qui est vraiment une bible quand on veut personnaliser son blog !

    Ce qui m'amène c'est que je n'arrive plus à modifier la couleur des liens pour "ajouter un commentaire" "voir les commentaires"... j'ai une couleur orange qui était avec mon ancien design et qui ne va plus mais impossible de trouver le code pour la modifier.

    Si vous pouviez m'aider, ce serait génial !!!
    Merci d'avance.

    RépondreSupprimer
  2. Bonjour Béatrice :) je vois que tu y es arrivée.
    Par contre, tu as encore un ancien CSS (avec Global) et qq erreurs de CSS qui risquent de te poser pb ultérieurement. Lorsqu'il y a une erreur dans le CSS, les lignes suivantes ne sont pas tjrs pris en compte.

    RépondreSupprimer
  3. Bonsoir,
    je viens d'aller sur un blog qui a une photo comme fond sur la page pop up où l'on écrit le commentaire. Sauriez vous m'expliquer comment faire sur overblog?
    Merci d'avance.

    RépondreSupprimer
  4. Bonsoir,
    Je suis un peu perdue comme dans un labyrinthe..... vos explications sont claires et nettes, le problème, c'est que mon CSS, ne ressemble pas du tout à vos explications, le thème de mon blog , je crois que c'est Easyblog.
    Je voudrais transformer la taille et l'écriture de commentaire sous l'article
    "Par" " publié dans" " communauté" " votre commentaire - dans la page d'article.
    Je voudrais qu'il soit en minuscule et noir.
    Je ferais la même chose dans la page d'accueil.
    Je vous remercie à l'avance, j'ai bien essayé de demander de l'aide dans le forum d'over-blog, mais je n'ai pas de réponse ......
    J'espère que vous pourrez m'aider. 1000 Mercis

    RépondreSupprimer
  5. Toutes mes félicitations pour votre blog. C'est une véritable caverne d'Ali Baba. On y trouve tout (ou presque) pour personnaliser son blog.
    Je souhaiterais savoir s'il est possible de positionner au début du commentaires (et au début de la réponse) le texte qui se trouve à la fin (Commentaire N° X posté par UNTEL le jj/mm/aaaa à hh:mm et Réponse de X le jj/mm/aaaa à hh:mm). Le design original du blog était "Modern Times green", mais grâce à vos précieux conseils, je l'ai personnalisé. Vous pouvez consulter ce blog à www.sauvons-notre-futur.com.
    par avance, merci de votre réponse.
    Bien cordialement.

    RépondreSupprimer
  6. Bravo pour ce blog qui est une mine d'or... Est-ce que tu as écrit quelque chose concernant comment modifier la position de
    Par xxx - Publié dans : xxx
    Ecrire un commentaire

    Parce que sur mon blog, ils sont trop décalés vers la gauche et débordent sur un dessin. Je ne trouve pas la ligne pour décaler ces éléments.

    RépondreSupprimer
  7. bonsoir,
    pourriez vous me dire svp comment changer la couleur de "publier ce commentaire" dans la fenetre de commentaire d'avance merci.

    RépondreSupprimer
  8. Des infos super intéressantes qui m'ont fait gagner un temps fou. Merci ça va m'aider à monter mon blog en complément de mon site d'artisan.
    Nicole

    RépondreSupprimer
  9. Des information tres intéressantes, Merci Beaucoup :)

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)