Comment modifier la fenêtre de saisie d'un commentaire ?

Avant propos :
Une petite nomenclature est mise au bas de cet article pour comprendre quelques termes "css".

Cet article a pour but de personnaliser la fenêtre de saisie des commentaires. Pour chaque partie, vous trouverez la photo avec l'élément qui change selon la classe appliquée.

Il est donc possible : de modifier la couleur du fond, de mettre une image de fond,  de modifier la couleur de la police et la taille de celle-ci, de la mettre en gras et/ou en italique...
Il est aussi possible de mettre des marges extérieures (margin) et intérieures (padding) mais parfois, ce n'est pas faisable dans tous les sens.

Les modifications désirées seront presque parfaites avec le navigateur Firefox, avec Explorer, il restera des imperfections. Normal, Explorer est tout, sauf parfait.

Ces classes sont donc à coller dans votre css où vous voulez et à personnaliser selon vos goûts.
N'oubliez pas de vider votre cache en appuyant sur la touche F5 de votre clavier afin de voir apparaître les modifications.

N.B. : Il arrive parfois qu'on soit obligé de forcer notre choix en ajoutant !important; à certains endroits si on veut que ce soit pris en compte.
       
Important : Si vous voulez mettre une petite image dans la fenêtre de saisie de commentaire, il ne faut pas autoriser vos visiteurs à mettre en page leur(s) commentaire(s).

Pour cela, vous devez décocher la case en suivant le petit parcours administratif : Administration > Configurer > Options globales > Commentaires > Autoriser les visiteurs à mettre en page leur commentaire.

----------------------------------------------------------------------------------------------

 
Les couleurs peuvent être identiques ou différentes. On peut aussi, bien sûr, mettre une image en fond.

Au départ, nous avons cette fenêtre. Sur beaucoup de blogs, nous retrouvons ce modèle basique.

Les trois grandes zones où il est possible de mettre un fond de couleur (ou une image de fond) :

1 .diablog {background-color:#votre-code-couleur;}

2 .diablog .content .ob_form {background-color:#votre-code-couleur;}

3 .diablog .buttons {background-color:#votre-code-couleur;}

Les six endroits où il est possible de modifier la police d'écriture, la taille, la couleur, mettre une marge, un fond de couleur ou une image de fond, une bordure :

1 .diablog .title {font-family: Comic Sans MS; color:#00F; text-align:center; font-size:14px; margin-bottom:-10px;}

2 .diablog .content .ob_form fieldset ul li label {margin-bottom:0px!important; margin-top:-3px!important; margin-bottom:-5px!important; font-family:Comic Sans MS; font-size:12px; color:#00F; margin-bottom:-15px; margin-top:10px;}

3 .diablog .content .ob_form fieldset ul li .w100prct {margin-left:0px!important; font-family:Comic Sans MS; font-size:12px; width:69%; color:#00F; margin-left:-25px; background-color:#FFF; border-top: 4px groove #00F; border-right: 4px ridge #00F; border-bottom: 4px ridge #00F; border-left: 4px groove #00F;}

4 .diablog .content .ob_form fieldset ul li .inline {font-size:10px; color:#00F;}

5 .diablog .content .ob_form fieldset ul li textarea {background-color:#FFF; background-image:url(http://ddata.over-blog.com/0/13/03/04/fonds/soleil-fenetre.gif);background-repeat:no-repeat; background-position:top left; border-top: 4px groove #00F; border-right: 4px ridge #00F; border-bottom: 4px ridge #00F; border-left: 4px groove #00F; font-family:Comic Sans MS; color:#000!important; font-size:12px!important; font-weight:bold; padding:25px 8px 5px 5px; width:95.5%!important;}

6 .diablog .content .ob_form fieldset p {color:#000!important; font-size:12px!important;}

Voilà une fenêtre modifiée :

Il est aussi possible de modifier les boutons tout en bas avec des classes css spécifiques comme actuellement sur ma fenêtre de saisie d'un commentaire. Pour savoir quelle classe correspond à un endroit très précis, je vous conseille de suivre cet article :  

Comment personnaliser le design via la css ?

.diablog .ob-button button {color:#00F!important; font-weight:bold; background-color:#FFF!important; border-top: 4px groove #00F; border-right: 4px ridge #00F; border-bottom: 4px ridge #00F; border-left: 4px groove #00F; -moz-border-radius:10px 10px 10px 10px;}

.diablog .ob-button button:hover {color:#80FBFF!important; font-weight:bold; background-color:#00F!important; border-top: 4px groove #00F; border-right: 4px ridge #00F; border-bottom: 4px ridge #00F; border-left: 4px groove #00F; -moz-border-radius:10px 10px 10px 10px;}

.diablog .ob-button .first-child {background-image:none;}

.diablog .ob-button.orange {background-color:#80FBFF!important; background-image:none;}

.diablog .ob-button.orange button {color:#00F!important; font-weight:bold; text-decoration:blink; background-image:none; background-color:#FFF!important;}

.diablog .ob-button.orange button:hover {color:#80FBFF!important; font-weight:bold; text-decoration:blink; background-image:none; background-color:#00F!important;}

.diablog .ob-button.orange .first-child {margin-left:20px; background-image:none;}

.diablog .buttons .ob-button {background-color:#80FBFF; background-image:none;}

Nomenclature :
background : fond color : couleur font-size : taille de la police d'écriture font-family : nom de la police d'écriture                       padding : marge intérieure margin : marge extérieure	border : bordure              top : haut     right : droite     bottom : bas     left : gauche
Lorsque vous voyez ceci : padding:2px 2px 2px 2px;        ou        margin:5px 5px -8px 15px; le premier nombre donné correspond à la marge en haut, le second, à la marge à droite, le troisième, à la marge en bas et enfin, le dernier nombre correspond à la marge de gauche. En fait, ça tourne dans le sens des aiguilles d'une montre en commençant en haut.

Pour les bordures, il existe différents styles de traits.
Je vous renvoie sur cet article qui peut vous aider :

Comment personnaliser des bordures ?