¿Qué tal? ¿Vienes con ganas de aprender un truco para personalizar aún más tu blog y fardar de diseño? ¿No te gustaría darle estilo a la caja de comentarios de tu sitio? Seguro que sí.
De todos modos, antes de que te lances de lleno en la búsqueda de boli y papel, te advierto sobre un par de cosas importantes: en este tutorial vamos a tocar el HTML de la plantilla, así que antes que nada te pediré que hagas copia de seguridad, y otro punto a destacar de este truco es que sólo vale para blogs con comentarios anidados, es decir con los comentarios visibles en la misma ventana del post, y en los que se distinguen perfectamente comentarios de un autor y otro, y en que la respuesta queda ligeramente desplazada a la derecha. Además, como siempre, este truco lo explico en exclusiva para Blogger, porque mi experiencia con WordPress es nula.
Dicho esto, y ya que veo que sigues por aquí, nos ponemos en marcha, pero para que no resulte complicado vamos por partes, ¿vale?
¿QUÉ ES LA CAJA DE COMENTARIOS?
- Es el recuadro que se visualiza cuando aparecen los comentarios ya publicados en un blog. No se trata, por tanto, del cuadro o ventana donde insertas el texto cuando redactas el comentario. Por tanto, en esa caja, aparecen no sólo los avatares, nick, fecha del comentario, sino también los botones de "responder" y "eliminar", entre otros. Todos ellos, elementos modificables en gran medida.
¿QUÉ PUEDO CAMBIAR DE ESA CAJA?
Algunas de las posibilidades que te ofrece esta personalización serían:
- Cambiar el fondo de la caja o recuadro.
- La forma y colores de los botones: "responder", "eliminar".
- Disposición del avatar del comentarista.
____________________________________________________________________________
Interesante, ¿verdad? Estoy convencida de que esto ha despertado tus ansias de saber más, y de trastear un poco, pero como vas a tener que toquetear el HTML de tu plantilla y "más vale prevenir que tener que lamentar", antes de ponerte de lleno con los códigos, te ruego encarecidamente que hagas una copia de seguridad de tu plantilla, por favor. Además es muy importante que copies bien el código, porque es bastante extenso y si te saltas una línea o una letra puede ser que no funcione. Se me ocurre que podría ser interesante que probases en un blog de pruebas que no tengas abierto al público. Cuando logres el aspecto deseado sólo trasladas ese código al blog que quieres personalizar y ya está.
Yo te voy a dar el estilo básico, por así decirlo, y con las explicaciones de lo que hace cada parte del código, seguro que logras justo los efectos que estás buscando. Éste es el código. Y te destaco algunos de los parámetros con los que puedes jugar, para modificar tu caja al 100%, bien con alguna explicación, bien con subrayado. No hace falta que apliques todos, de hecho, no te he señalado más que una parte de los que puedes modificar, porque estoy plenamente convencida de que en cuanto trabajes un poquillo con esto, empezarás a coger la mecánica y a comprender dónde buscar cada elemento que quieras modificar.
Antes te explico un poquito lo que vas a ver en este código, así te familiarizas con él, antes de empezar ver símbolos y letras extraños.
En CSS cada elemento se define e identifica de esta manera. ¡Qué me perdonen todos los informáticos del mundo, por favor! Trato de explicar esto con lenguaje lo más comprensible posible, así que los tecnicismos brillan por su ausencia, en parte porque escapan a mis conocimientos, claro. En fin, dicho esto, os dejo un pequeño esquema de lo que vais a encontraros en el cuadro grande.
Obviamente cada elemento puede contar con más de dos características. El truco está en que vayan separadas por punto y coma (;) y en líneas separadas, además cada característica se define tras los dos puntos (:), así que no os olvidéis jamás de ellos. De igual modo, cuando saltemos a definir un nuevo elemento cerraremos el anterior con una llave (}).
Y ahora sí que sí empezamos con el código. Así que sed valientes...
Interesante, ¿verdad? Estoy convencida de que esto ha despertado tus ansias de saber más, y de trastear un poco, pero como vas a tener que toquetear el HTML de tu plantilla y "más vale prevenir que tener que lamentar", antes de ponerte de lleno con los códigos, te ruego encarecidamente que hagas una copia de seguridad de tu plantilla, por favor. Además es muy importante que copies bien el código, porque es bastante extenso y si te saltas una línea o una letra puede ser que no funcione. Se me ocurre que podría ser interesante que probases en un blog de pruebas que no tengas abierto al público. Cuando logres el aspecto deseado sólo trasladas ese código al blog que quieres personalizar y ya está.
Yo te voy a dar el estilo básico, por así decirlo, y con las explicaciones de lo que hace cada parte del código, seguro que logras justo los efectos que estás buscando. Éste es el código. Y te destaco algunos de los parámetros con los que puedes jugar, para modificar tu caja al 100%, bien con alguna explicación, bien con subrayado. No hace falta que apliques todos, de hecho, no te he señalado más que una parte de los que puedes modificar, porque estoy plenamente convencida de que en cuanto trabajes un poquillo con esto, empezarás a coger la mecánica y a comprender dónde buscar cada elemento que quieras modificar.
Antes te explico un poquito lo que vas a ver en este código, así te familiarizas con él, antes de empezar ver símbolos y letras extraños.
En CSS cada elemento se define e identifica de esta manera. ¡Qué me perdonen todos los informáticos del mundo, por favor! Trato de explicar esto con lenguaje lo más comprensible posible, así que los tecnicismos brillan por su ausencia, en parte porque escapan a mis conocimientos, claro. En fin, dicho esto, os dejo un pequeño esquema de lo que vais a encontraros en el cuadro grande.
.nombre del elemento {
característica1: parámetros o medidas;
característica2: parámetros o medidas;
}
característica1: parámetros o medidas;
característica2: parámetros o medidas;
}
Obviamente cada elemento puede contar con más de dos características. El truco está en que vayan separadas por punto y coma (;) y en líneas separadas, además cada característica se define tras los dos puntos (:), así que no os olvidéis jamás de ellos. De igual modo, cuando saltemos a definir un nuevo elemento cerraremos el anterior con una llave (}).
Y ahora sí que sí empezamos con el código. Así que sed valientes...
Un consejillo, además de la copia de seguridad de vuestra plantilla que, espero ya hayais hecho cuando os lo he pedido más arriba, hay un truquillo para ver cómo resulta alguno de los cambios sin necesidad de guardar y luego volver a nuestro blog, siempre y cuando se trate de un elemento visible en la página principal, claro (pulsad para ello, la opción de "vista previa" desde la página del HTML de la plantilla. Por Ejemplo: podríamos hacerlo así en los widgets, los títulos, etc. Para nuestro caso no nos vale, pero es bueno que recordéis esto en ocasiones venideras.
