# 110: Hilo de comentarios de Photoshopping - Trucos CSS

Anonim

Comenzamos a profundizar en Photoshop aquí y a diseñar el área de comentarios. Comenzamos en la parte superior, es decir, los comentarios individuales en sí mismos (a diferencia del formulario de comentarios).

Enganchamos un avatar para trabajar. Seguro que usaremos el servicio Gravatar, ya que está hecho a medida para esto y se integra perfectamente en WordPress. Más allá de eso, soy un gran admirador de los avatares y la sensación de propiedad personal que te dan en un sitio.

Parte de este diseño encaja fácilmente. Usamos un cuadro blanco sobre gris como todos los módulos del sitio. Nos dejamos caer en el avatar. Hacemos del nombre un enlace y usamos el enlace azul que hemos estado usando en todas partes. Introducimos la fecha del comentario con el mismo estilo que tienen todas las fechas del sitio. Mientras tanto, nos mantenemos lo más organizados posible en Photoshop.

Para las respuestas a los comentarios, sangramos un poco el comentario a continuación, tratando de mantenernos alineados con la subcuadrícula que hemos creado. También necesitaremos un vínculo en los comentarios de nivel superior para crear esas respuestas, por lo que colocamos un vínculo en la parte superior derecha de esos comentarios. El mismo enlace azul de siempre. Usamos una flecha de nuestro conjunto de iconos de Entypo, solo que no había la flecha perfecta allí, tuvimos que elegir una que estuviera cerca y rotarla 180 grados. Eso no debería ser un problema en CSS.

Para dejar en claro que la fecha del comentario también es un enlace permanente, también usaremos un icono para eso.

Jugamos con dónde deberían ir los enlaces de "funcionalidad", pero no se detenga demasiado en ello. Las únicas personas que los verán alguna vez soy yo. Para que conste, esto es con lo que terminé yendo.