Personalizar estructura de comentarios

La estructura de los comentarios contiene distintas etiquetas las cuales cada una se diferencian con distintas Id's o clases, por lo tanto se pueden personalizar mediante CSS.

He visto en distintos blog los cuales por ejemplo, el editor de comentarios se encuentra a la izquierda y con un tamaño muy chico, el cual distorsiona con el diseño del blog.

Por supuesto que eso va en el gusto de cada uno.

Con algo de CSS podemos cambiar el aspecto de nuestro editor.

También se puede corregir la distancia en la parte de abajo del editor.

En la siguiente imagen veremos distintas partes las cuales podemos personalizar, destacadas por un numero y un borde de distinto color:

Cada parte tiene una ID (#) o una clase (.)

Los códigos CSS van arriba de ]]></b:skin>

#comments{
propiedad: valor;
propiedad: valor;
}
#comments h4{
propiedad: valor;
propiedad: valor;
}
.avatar-image-container{
propiedad: valor;
propiedad: valor;
}
#comments-block{
propiedad: valor;
propiedad: valor;
}
.comment-author{
propiedad: valor;
propiedad: valor;
}
.comment-body{
propiedad: valor;
propiedad: valor;
}
.comment-timestamp{
propiedad: valor;
propiedad: valor;
}
.comment-form {
propiedad: valor;
propiedad: valor;
}
#comment-post-message{
propiedad: valor;
propiedad: valor;
}
.comment-form p{
propiedad: valor;
propiedad: valor;
}
#comment-editor{
propiedad: valor;
propiedad: valor;
}

Por ejemplo si queremos personalizar el editor: (11)

#comment-editor{
width:600px; /*ANCHO */
height:240px; /* ALTO */
margin-left:20px; /* DISTANCIA DESDE LA IZQUIERDA */
}

Ajustamos el ancho.
Con la altura podemos sacarle la separación que tiene abajo.
Con el margin-left ajustamos para dejarlo centrado.

Ver ejemplo:

Si quieren dejar un mensaje a los visitantes arriba del editor (10), lo hacen desde:

Configuración, Comentarios y colocan el texto en donde dice:

Mensaje del formulario de comentarios.

Ejemplo para personalizar: (10)

.comment-form p{
border: 1px solid #ccc;
width:500px;
padding:10px;
color:#fff;
background:#000;
margin-left:20px;
}

Si solo quieren centrarlo.

Centrar todo (1)

#comments{
margin:0px auto;
}

Centrar la caja desde "Publicar un comentario en la entrada" (8)

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

Cualquier duda me lo comentan.