Personalizar formulario de comentarios

¿Ya tenemos el nuevo formulario de comentarios?
Entonces es el momento de darle un toque personal, para ello empezaremos por el texto de "Publicar un comentario en la entrada" un poco serio ¿verdad? si deseas añadir algo más personal haremos lo siguiente:
Nos situamos en Plantilla/Edición de HTML y marcamos la casilla para expandir la plantilla de artilugios.
Buscamos:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>

En la cuarta línea donde <h3><data:postCommentMsg/></h3> eliminamos <data:postCommentMsg/> y en su lugar escribimos el texto de nuestro agrado:

<h3>Aquí invitamos a dejar un mensaje</h3>

Bien, ahora vamos a personalizar el formulario, para ello debemos añadir unas líneas en las CSS ó para ser más concretos justo antes de ]]></b:skin>

.comment-form {
margin:0pt auto;
width:400px;
}

comment-form es la ventana del formulario, con margin lo centramos y con width le damos un ancho.

.comment-form h3 {
background:transparent url('url-de-la-imagen') no-repeat;
color:#B0171F;
font-size:18px;
line-height:50px;
padding:0pt 0pt 0pt 55px;
}

Estas son las propiedades del título del editor.
En background añadimos la imagen que aparece junto al texto de la cabecera "Publicar un comentario en la entrada"
En color es el color para el texto.
El tamaño de letra lo modificamos en font-size.
En line-height establecemos la altura entre líneas.
Con padding centramos el texto.

.comment-form p {
color:#A9A9A9;
font-size:14px;
text-align: center;
border:1px solid #A9A9A9;
background:url('url-de-la-imagen');
padding:3px 0pt 0px 20px;
width:380px;
}

Esta parte corresponde al mensaje del formulario podemos modificar también color del texto, tamaño de la fuente, añadir una imagen de fondo (background) o si lo preferimos podemos añadir un borde.
El grosor de un borde lo podemos variar en 1px con solid estamos indicando el tipo de borde y el color obviamente en #A9A9A9;
Si en lugar de una imagen de fondo deseamos añadir color suprimimos background:url('url-de-la-imagen'); y en su lugar añadimos background-color:#A9A9A9;

#comment-editor {
height:420px;
width:100%;
}

En comment-editor modificamos la medida del iframe, width para el ancho y height para el alto. Es muy importante que pongáis atención en el valor que se añade a height porque si añadimos un valor superior al que tenemos para las entradas el iframe del formulario saldrá incompleto.

Naturalmente la imaginación es lo que cuenta, pero con esos valores y un poco de paciencia podéis personalizar el editor, lo que siempre recomiendo es probar en otro blog y por supuesto si tienes una buena idea y deseas compartirla no te olvides de dejar un comentario con un enlace a tu blog.

Veamos algunos ejemplos de personalización:


.comment-form {
margin:0pt auto;
width:375px;
}

.comment-form h3 {
background:transparent url('url-de-la-imagen') no-repeat;
line-height:150px;
text-align: center;
font-size:25px;
color:#B0171F;
padding: 15px 20px 5px 75px;
}

#comment-editor {
height:375px;
width:100%;
}


.comment-form {
background-color:#B0171F;
padding-left:5px;
padding-right:5px;
border:1px solid #000;
margin: 0 auto;
}

.comment-form h3 {
background:url('url-de-la-imagen');
line-height:70px;
padding:0pt 35pt 35pt 55px;
}

.comment-form p {
font-size:12px;
color:#EEE9E9;
text-align: center;
border-bottom : 3px #000 double;
border-left : 3px #000 double;
background-color:#B0171F;
padding:10px 0pt 10px 10px;
width:380px;
}

#comment-editor {
height:375px;
width:550px;
}

(La imagen trae impreso el texto, podemos crearlo con un editor de imágenes)


.comment-form {
margin:0pt auto;
width:420px;
}

.comment-form h3 {
color:#fff;
}

.comment-form p {
border:8px double#DCE6C5;
background:url('url-de-la-imagen') no-repeat;
padding:30px 0pt 10px 5px;
width:370px;
height:50px;
}

#comment-editor {
height:420px;
width:100%;
}

ElHackerZ