Customiza tus comentarios

24/8/15
¡Buenos días mikos! ¿Qué tal la noche? ¿Cómo habéis dormido?
Yo fatal. El gato anda por ahí marcando... y claro, tuve que limpiarlo, etc. Por no hablar que me despertó en sus intentos frustrados de marcar el armario. (Es que ya sé cuándo lo intenta, no sé, me despierto instintivamente.)
En fin, el otro día (ayer por la noche) estuve intentando personalizar los comentarios. Lo había visto en un blog, que me gusta mucho su estilo, pero es que no encontré mucho sobre cómo hacerlo. Osea, probaba algunos tutoriales, no me funcionaban del todo, otros no funcionaban para nada, con otros me salía como una caja con los comentarios y separadores,separadores,separadores. Tampoco es que tenga yo muchos comentarios vaya jajajaja, pero por si algún día los tengo, que quede bonito.

Bueno, el caso es que me fue muy difícil hacerlo, estuve horas trasteando con el html. Nada tenía todo lo que yo quería. La mayoría (bueno, todos los que vi yo) enseñan a cambiar la caja, pero ya está. La fuente del comentario es la misma, la fecha me sale en piquinito... Pero conseguí algo bastante decente creo yo, os voy a dejar aquí cómo hacerlo.

Por defecto, sale así:
Ignorad la payasada de comentarios, porfa.
Vamos allá:


1. Entramos  en nuestra plantilla HTML.
Personalizar>Editar HTML.

(Bueno, ¡primero haced copia de seguridad!)

2. Buscáis: (CTRL+F)

3. Pegáis justito encima el siguiente código.

.comments .comment .comment-actions a {
background: #cccccc; /* fondo del botón responer/eliminar */
border: 0px solid #ffbfbf; /* Borde del botón responder. Yo no lo quiero, así que le puse 0px */
border-radius: 100px; /* Bordes redondeados.Si no lo queréis, borrad la línea.*/
color: #555555; /*Color de la letra de los botones*/
font: 10px arial; /* Fuente */
text-transform: uppercase;/*Letras en mayúscula. Si no lo queréis, borrad la línea*/
letter-spacing: 1px;/*Espacio entre caracteres. También podéis borrarlo si no queréis.*/
margin-right: 14px;
padding: 1px 8px;
text-decoration: none !important;
}

.comments-content .comment-content {
font: 12px Arial; /*Aquí puedes cambiar la fuente de los comentarios. ¡POR FIN!*/
}

.comments .comment-block {
background: #ffffff; /* Color de fondo de los comentarios */
border: 1px solid #cccccc; /* Tamaño y color del borde. Si no lo queréis...*/
border-radius: 100px; /* Esquinas redondeadas. */
padding: 6px 20px;
}

.continue a {
background: none repeat scroll 0 0 #ffffff; /* Color de fondo boton responder. */
border: 1px solid transparent; /* Color de borde botón responder. Lo mismo, si lo queréis, ponéis un color, como... #cccccc */
border-radius: 100px; /* Bordes redondeados botón*/
color: #999999; !important;
font: 11px arial; /* Fuente */
text-transform: uppercase;/*Letras en mayúscula*/
letter-spacing: 1px;/*Espacio entre caracteres*/
display: inline-block !important;
margin-top: 7px;
padding: 1px 4px !important;
text-decoration: none !important;
}

.comment-block:hover  {/*Caja del comentario*/
background: none repeat scroll 0 0 transparent; /* Color de fondo de los comentarios.Si queréis fondo, ponéis un color. */
border: 1px solid #cccccc; /* Tamaño y color del borde */
}

.comment-header a {/*El nombre de usuario y la fecha*/
color: #f49898 !important;
font: 11px arial; /* Fuente,tamaño. */
text-transform: uppercase;/*Letras en mayúscula.*/
letter-spacing: 1px;/*Espacio entre letras*/
}

#comments .avatar-image-container img { /*Para tener un avatar redondeado. Si no lo quieres, borra este párrafo.*/
border-radius: 100px;
height: 34px;
max-width: 34px;
margin-right: 1px;
}

h4{display:none;}/* Titulo "No hay comentarios/Nº Cometarios". Yo no lo quiero, así que tengo puesto eso en naranjita, si lo queréis, borráis eso de displaynone, solo lo que está en naranja. */ 
background: transparent; /*Si queréis color, ya sabéis, ponéis el código.*/
text-align:center;
color:#cccccc; /*Color*/
border-bottom: 3px double #000000;/*Si quieres poner una línea debajo. Puede ser solid double dashed dotted*/
}

Bueno chicos, pues esto es todo. El resultado del mío es éste de aquí:
¿Te ha parecido muy difícil? Si has tenido algún problema no dudes en escribirme un e-mail.






¡Y esto es todo! Espero que te ayude mucho. Cualquier duda en comentarios o e-mail. ¡Mua!

4 comentarios

  1. Curioso tutorial, aunque creo que mi plantilla y lo tiene por defecto, no suelo tener más de una respuesta xD
    Mi gato dentro de poco empezará también a marcar ¡Qué horror! Aunque aun es pequeñito (3 meses) y sólo da la lata mordiendo (que me pone histérica).

    ResponderEliminar
    Respuestas
    1. Jajajajaja No te queda nada cuando marque...
      El mío lo hace cuando nadie lo ve, o eso cree, y si lo pillas intentándolo te protesta y se va corriendo. Pero SIEMPRE vuelve.
      Otra cosiña, entré en tu blog antes, y vi que haces reseñas de manga. ¿Te animarías a hacer reseñas de anime?

      Eliminar
  2. Hago también reseñas de anime, pero hace mucho que no hago una xD Tengo Sword Art Online, Elfen Lied, Your lie in April y alguna más :)

    ResponderEliminar
    Respuestas
    1. Yo tal vez me anime a hacer más reseñas. Y había pensado hacer alguno de anime. De Hellsing concretamente. Soy muy muy fan de los vampiros en general y de Drácula en particular, jajajaja.
      Más adelante seguro que me animo.

      Eliminar

#TUTORIAL


Aprende a hacer recuadros para destacar textos.

¡ME APUNTO!