21 août 2010

(OverBlog) Modifier la fenêtre Commentaire

Nous allons modifier le design de la fenêtre Commentaire : police, background et encadrements.

Avertissement : les modifications de design dans la fenêtre Commentaire ont des répercussions sur le design de la fenêtre Recommander

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 (Ajouter un commentaire)
.diablog .title {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Les labels (Votre nom - Votre email - Votre site)

.diablog label {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le rappel (Visible uniquement par l'auteur du blog)

.diablog em {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Les indications (Se souvenir de ces informations - Rédigez ici votre commentaire - Me prévenir par un email du prochain commentaire sur cet article)

.diablog label.inline  {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le fieldset (Nous vous rappelons que vous êtes responsable du contenu des commentaires que vous publiez. Votre adresse IP sera archivée.)

.diablog fieldset p {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 la fenêtre blanche
.diablog {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 les input
.diablog input{background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;background-repeat:no-repeat;background-position:center;}
Un fond dans le textarea (zone de rédaction du texte)
.diablog textarea{background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;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 tout le fond blanc
.diablog{border:solid 1px #D8D7D7}
Pour encadrer le titre
.diablog .title {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

7 commentaires:

  1. Merci pour ce tuto... j'ai mis un certain temps mais j'ai fini par trouver ce que je devais faire.

    RépondreSupprimer
  2. Bonjour Anna,

    Toujours fidèle à ton blog où que tu sois... Je rencontre un soucis sur ma fenêtre commentaire. J'ai voulu y mettre un fond, mettre une couleur dans les input, etc... et ça ne me plaisait pas. J'ai donc enlever ce que j'avais ajouté pour remettre le CSS initial pour la fenêtre commentaire et quand on veut mettre un commentaire sur mon blog les zones input sont d'un rouge vif ainsi que les deux cases à cocher (se souvenir et suivre, etc)... Je ne trouve vraiment pas de où ça peut venir, je viens donc chercher ton aide... pour solutionner ce petit problème. De plus, mes lecteurs me disent qu'ils doivent toujours retaper, leur nom, site... alors qu'ils cochent se souvenir de mes informations... y a t-il un rapport ?
    Merci d'avance pour ta réponse, je te souhaite une bonne journée.

    blog : http://douceursucree.over-blog.fr

    RépondreSupprimer
  3. Re-coucou.
    Juste pour te dire que tout est rentré dans l'ordre. Le CSS de la page article était bon, je ne l'avais pas vu alors j'ai fait un copier/coller de articles sur accueil et ça marche.
    Bisous et bonne soirée.

    RépondreSupprimer
  4. Bonsoir Anna !
    J'ai suivi ce tuto mais il y a la ligne concernant
    les labels pour laquelle je n'arrive pas à obtenir le résultat de changement de couleur.
    J'ai tenté à plusieurs reprises mais je n'y parviens pas.

    Voilà ce que j'ai mis dans le CSS

    .diablog label {text-align : center ; color : #FFA600 ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

    Je rencontre également un problème dans la ligne sous l'article concernant l'ajout de commentaires.
    Si je suis dans l'accueil du blog c'est OK la couleur est bonne c'est à dire : #FFA600
    En revanche elle n'a pas changé lorsque je suis dans l'article, j'ai pourtant modifié le CSS des deux catégories ??

    Je te remercie par avance de ton aide !
    Amitiés
    Trinity

    RépondreSupprimer
  5. Bonsoir j'ai essayé de mettre une image en fond dans la fenêtre des commentaires. Le fond s'affiche lorsqu'on entre dans voir les commentaires et qu'on clique sur laisser un commentaire mais pas directement. Pourriez-vous m'aider Merci
    Marylou

    RépondreSupprimer
  6. Hemorroides traitement
    Il existe une méthode naturelle
    Pour soulager les hémorroïdes

    RépondreSupprimer
  7. Chien dressage
    Le système de dressage de chiens
    Le plus facile et le plus efficace

    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)