Diseño de la caja de comentarios



Muy bien, si aplicamos lo que hemos visto en los tutoriales de Modificando el diseño de una plantilla pre-diseñada (todas sus partes), podremos modificar esto fácilmente. Para poder copiar los códigos, den click en view raw.

Empecemos, deberán modificar esto respecto a los colores que eligieron tener en su blog.

Desde la línea 1 a la 9, tendremos las modificaciones del recuadro con bordes redondeados. Aunque... el primer background que vemos hace referencia a la caja rectangular. Con la página Color Hex pueden consultar qué colores son.

Border-radius hace referencia a el radio de la caja con bordes redondeados, creo que ese no hace falta modificarlo pero es a gusto.

Color: #666 hace referencia al color del texto del comentario.

Luego en @font-face encontraran los datos de la fuente del texto, el cual fue puesto con el link de descarga.

En comment-block aparecen las modificaciones de la caja rectangular.

.avatar-image-container es el diseño de la foto de quien comentó.

Por último, .datetime son los datos de la fecha de publicación del comentario y .secondary-text es lo referente a "Responder" y "Eliminar".

Eso es todo.


  


12 comentarios:

  1. Me parecen súperútiles estas entradas, gracias :)
    Un beso, nos leemos.

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegro que te gusten y no es nada.

      ¡Saludos!

      Eliminar
  2. ¡Buenas! Primera vez que paso por tu blog :D

    Me parece genial que estes subiendo tutoriales de blogger porque los que hay casi siempre estan desactualizados jaja.

    ¡Seguramente encuentro algo que me guste y pueda usar! :D

    ¡Nos leemos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Abril! Gracias por pasarte por mi blog.

      Me alegra que te guste, trato de subir cosas que les gusten y que les sirvan para algún propósito.

      ¡Saludos!

      Eliminar
  3. Hola!
    Me encantó el tutorial y el diseño queda hermoso. Lastima que no lo pueda aplicar en wordpress porque no me deja modificar con codigos (lloro).
    Tenes una manera de explicar muy claro todo, excelente entrada. Un beso!!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegro que te gusten, en su momento yo no conseguí mucha información así que quiero ayudarlos a ustedes =)
      De wordpress no entiendo nada y me es demasiado limitado :/

      ¡Saludos!

      Eliminar
  4. Hola Mar! Todo bien?
    No tengo más que decir que amo tus entradas! jajajaja Me parece muy genial los tutoriales que compartís... Hay algunas cosas que nunca supe como buscarlas por google, y vos me traes la solución al toque. En cuanto a lo que mostrás hoy, lo voy a probar a ver como queda. Lo modifico un poco y veo como queda con la apariencia del blog. De igual forma, te súper agradezco desde ya por tu gran predisposición :D
    Abrazo!

    ResponderEliminar
    Respuestas
    1. ¡Hola Fran! Bien y tú?
      Gracias jajaja Me alegro que te gusten, cualquier cosa que quieras saber o que haga, me dices y veo si puedo solucionar tus dudas.

      ¡Saludos!

      Eliminar
  5. Hola!! Me alegro de que puedas ayudar con los tutoriales, son siempre útiles. En mi caso, uso el formulario de comentarios de Google+, así que no me sirven los codigos, jaja.
    Te dejo saludos :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Que lástima que no te sirvan pero aún así, si necesitas ayuda en algo me avisas.

      ¡Saludos!

      Eliminar
  6. Me encantan tus entradas de tutoriales. Soy un desastre para estas cosas así que te las agradezco un montón.
    Nunca me había puesto a pensar en el asunto de los comentarios, pero me gusta cómo se ve =p

    ResponderEliminar
    Respuestas
    1. ¡Hola Nathalia!

      Me alegro que te gusten. Trataré de buscarles más información acerca de los comentarios ya que por la actividad de estas entradas, parece gustarles ♥

      ¡Saludos!

      Eliminar