El formulario de comentarios (un poco más)

Aprovechemos la entrada de randomness para poner un poco de orden en el tema del formulario de comentarios incrustado de Blogger.

El primer punto es verificar que el código esté en la plantilla y que sea correcto ya que, desde que comenzaron a implementarlo, Blogger lo ha ido modificando y no todos tenemos la última versión. Abrimos entonces la plantilla y expandimos los artilugios para buscar esta línea:

<b:includable id='comment-form' var='post'>

Lo que debemos tener es esto:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<hx id='comment-post-message'><data:postCommentMsg/></hx>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>

donde: hx puede varias y ser H3 o H4 y todo lo señalado con color es lo que se ha agregado en las últimas versiones.

Tanto el formulario como los encabezados de este, se encuentran en un DIV que tiene una clase que es la que controla las propiedades gráficas de este área. Esas propiedades, están definidas por el mismo Blogger pero podemos modificarlas, para esto, necesitamos identificarlo de otra manera, ya sea dándole otro nombre a la clase como propone Fernando en su entrada o cambiando el atributo class por el atributo ID que es lo que hice yo (por casualidad). En ambos casos, el resultado es el mismo y así, las definicones por defecto desaparecen, especialmente una que impide que lo ensanchemos (max-width: 425px). Entonces, cambiamos esta línea:

<div class='comment-form'>

por esta otra:

<div id='comment-form'>

La siguiente, nos muestra un encabezado con un dato interno llamado data:postCommentMsg y debajo, un párrafo con otro dato llamado data:blogCommentMessage; el primero es el encabezado del formulario que por defecto dice Publicar un comentario en la entrada y el segundo es el texto que nosotros hayamos agregado en la Configuración | Comentarios | Mensaje del formulario de comentarios. Podemos dejarlos o bien eliminar completamente esas líneas y reemplazarlas por cualquier tipo de código HTML.

Debajo, el dato data:blogTeamBlogMessage es un misterio; será para que nos saluden en nuestro cumpleaños.

El IFRAME es el formulario en si mismo, ese COSO que coloca Blogger a su antojo y sobre él, muy poco puede hacerse. Conviene eliminar el ancho y el alto de la etiqueta porque de esa manera, por lo menos, podremos darle un tamaño personal:

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

Un detalle que no comprendo es que, el nuevo modelo dice src=''. Allí, la teoría dice que debe ir una dirección URL y sin embargo, está vacía. En principio, no hay problemas, Blogger agrega esa dirección automáticamente cuando crea la página aunque ... no siempre funciona. Si ocurre eso, conviene reemplazarla por:

expr:src='data:post.commentFormIframeSrc'

Por último, <data:post.iframeColorizer/> agrega un script fundamental que es el que leerá algunas de las características gráficas de nuestro blog para que el formulario se adapte a la plantilla. Son la misma que están definidas en las diferentes variables al inicio de <b:skin> y que establecemos cuando usamos la ventana Diseño | Fuentes y Colores (color de los textos, colro de los enlaces, tipos de fuente y nada más).

Hasta allí, el código; ahora le agregaremos el CSS para modificarlo hasta donde se pueda. Todo, lo agregaremos antes de </b:skin>:

#comment-form {
clear: both; /* por las dudas, eliminamos las flotaciones */
margin: 0 auto; /* así, lo centramos */
width: valorpx; /* le damos el ancho al rectágulo */
}
#comment-form hx {
/* las propiedades del encabezado */
}
#comment-form p {
/* las propiedades del texto de nuestro mensaje personal */
}
#comment-editor {
height: valorpx; /* la altura el formulario */
overflow: hidden; /* evitamos las barras de desplazamiento */
width: 100%; /* el ancho del formulario en si mismo */
}

El ancho del formulario lo ponemos al 100% para que coincida con el ancho del contenedor comment-form pero puede ser otro. La altura del formulario original es de 275 pixeles lo que deja abajo de este, un espacio enorme; conviene probar con valores menores, entre 240 y 260 pixeles.

Cualquier otra propiedad de estilo es aceptable en comment-form, colores o imágenes de fondo, etc. Todas afectarán el área pero no al formulario en si mismo que seguirá siendo blanco. Es decir, podemos personalizar alrededor del TEXTAREA pero no esta ni los botones o el resto de los controles ya que son así y Blogger sabe.