miércoles, 15 de mayo de 2013

Tutorial: Personalizar comentarios.

Holis :3

Hoy os traigo un tutorial bastante demandado, así que aquí le tenéis. Yo sólo os doy la base del diseño, vosotros simplemente tenéis que rellenar los espacios que os dé para darle a  vuestros comentarios un toque único y personal. Mañana traeré algunos modelos de comentarios para los que les cueste el HTML^^
Este es un tutorial largo, pero es sencillo una vez le hayas pillado el truco y, por ejemplo, a mi ya no me hace falta leer las instrucciones para modificar el código cada vez que quiera editarlo. Es cuestión de práctica y paciencia.




Vais a Plantilla > Editar HTML.
Clikáis en la flechita que os muestro en la imagen. 




Después le dais a Plantilla de formato y seguido a CTRL + F. En el buscador que aparece en la esquina superior derecha ponéis:  ]]></b:skin> y le dais a Enter.

Encima de ]]></b:skin> situamos este código:


/* Caja del comentario */
.comment-content{
background:#FF4848;
padding:13px;
border-radius:10px;
color:#FFFFFF; }
/* Titulo "No hay comentarios/nro Cometarios" */
h4{
border-radius: 10px;
background:#FF4848;
text-align:center;
color:#FFFFFF;
text-shadow: 0px 0px 3px #FFFFFF;
}
/* Nombre del usuario */
.user {
background: #FAF1F1;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}
.icon {
background: transparent;
}
/* Caja de color */
.comment-block{
background:#FFFFFF url(URL DE TU FONDO);
padding:10px;
border-radius: 15px 15px 15px 15px;
}
/* Links de la caja de color */
.comment-block a{
font-weight: normal;
}
/* Contorno de los avatares */
.avatar-image-container{
background:#FAF1F1;
padding:5px;
border-radius:50% 50% 0% 50%;
}
/* Avatares de comentarios */
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
/* Avatares de comentarios "HOVER" */
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
/* Links Fecha/Responder/Eliminar */
.secondary-text a{
color: #FF4848;
padding: 3px;
background:#FAF1F1;
float: center;
border-radius:5px;
text-shadow: none;
}

Este código es el que actualmente tiene Radioactive Graphics para los comentarios.

ATENCIÓN. 
Hay algunas partes que yo no modifico ya que ya están preparadas. Vosotros podéis moficarlas si queréis, aunque ya sería algo más complicado y este es un tutorial Básico.
Apartados ya modificados:
  1. Links de la caja de color.
  2. Avatares de los comentarios.
  3. Avatares de comentarios "HOVER".


Ahora os mostraré como personalizar el código por partes: 


CAJA DEL COMENTARIO


De la caja del comentario, lo que vamos a editar es esto:
Background: que sería el color de fondo de la caja.
Color: el color de la fuente de la caja.

/* Caja del comentario */

.comment-content{

background:#FF4848; 
padding:13px;
border-radius:10px;
color:#FFFFFF; }



Vamos a ESTA PÁGINA y elegimos los colores que queramos.
Después de elegir el color copiais el código que os muestro en la imagen:


Y lo pegáis en al lado del lugar que queráis: background, color... Así ponéis el color que queráis en la caja del comentario. Ejemplo con la imagen de arriba: 
background: #FF0000.


Titulo "No hay comentarios/nro Cometarios"


Aquí, como en la Caja del comentario, sólo modificaremos:
Background: fondo.
Color: color de la letra.

/* Titulo "No hay comentarios/nro Cometarios" */
h4{
border-radius: 10px;
background:#FF4848;
text-align:center;
color:#FFFFFF;
text-shadow: 0px 0px 3px #FFFFFF;
}


NOMBRE DE USUARIO


Aquí sólo modificaremos el fondo:
Background: fondo.

/* Nombre del usuario */
.user {
background: #FAF1F1;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}
.icon {
background: transparent;
}


CAJA DE COLOR
(para esta parte os mostraré un ejemplo de comentario de mi blog DDMD, ya que RG no tiene activada la caja de color).



En la caja de color vamos a modificar el fondo. En este caso, el fondo puede ser una imagen.
Background: color o imagen del fondo.

Nosotras ahora mismo tenemos puesto un fondo transparente, que podéis ponerlo eliminando la parte del background, y quedaría así el modelo sin fondo:

/* Caja de color */
.comment-block{
padding:10px;
border-radius: 15px 15px 15px 15px;
}

 Para poner la imagen simplemente tenéis que sustituir URL DE TU FONDO por la URL de la imagen que quieras que esté de fondo.


/* Caja de color */
.comment-block{
background:#FFFFFF url(URL DE TU FONDO); 
padding:10px;
border-radius: 15px 15px 15px 15px;
}


CONTORNO DE LOS AVATARES


En el contorno de los avatares simplemente modificaremos el background a nuestro gusto:
background: fondo del avatar.


/* Contorno de los avatares */
.avatar-image-container{
background:#FAF1F1;
padding:5px;
border-radius:50% 50% 0% 50%;
}



LINKS FECHA, RESPONDER, ELIMINAR COMENTARIOS.


Aquí modicaremos el fondo y el color de los links de la fechas y de las opciones Responder y Eliminar.
Background: fondo.
Color: color de la fuente del link.

/* Links Fecha/Responder/Eliminar */
.secondary-text a{
color: #FF4848;
padding: 3px;
background:#FAF1F1;
float: center;
border-radius:5px;
text-shadow: none;
}

Cuando terminéis de editar le dais a Vista previa para comprobar que todo está perfecto y si nos gusta el resultado, a Guardar Plantilla.

Eso es todo. Espero que lo hayáis entendido. La verdad es que me he explayado bastante para que todo quede muy claro. :)

Como dije antes, mañana o en unos días tendréis unos modelos básicos de comentarios.

¡Un besote!

12 comentarios:

  1. Que crak eres ^^ Te lo sabes todo de pe a pa, jaaa ;)

    Un beso :)

    ResponderEliminar
  2. Lo probaré, hace tiempo que andaba buscando este tutorial <4

    ResponderEliminar
  3. ¡¡No me sale!! es que no me sale el numero 15 me sale el 14 con la flecha y el 467 con otra flecha... supongo que será por eso...
    igualmente, el tutorial está muy bien.
    besos<3

    ResponderEliminar
    Respuestas
    1. El número de la flechita da igual, lo que importa es el código que se despliega. Prueba a ver ahora.
      Besos, Cassia.

      Eliminar
  4. ME ENCANTA! muuchas gracias!! lo explicas genial :)

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Muchisimas Gracias, me ha servido sobremanera. Mil agradecimientos :D

    ResponderEliminar
  7. y si solo quiero modificarle el fondo a la cajita donde se escriben los comentarios? la caja de color que pusiste tu...es que asi si pongo tu codigo completo se modifica todo y se desconfigura lo que habia arreglado a la mia :( ...podrias ayudarme? -> http://elsecretodelabuenalectura.blogspot.com

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. Muchisimas gracias por el tutorial, hace tiempo estaba buscando uno y todos explicaban a medias, me alegra haber encontrado uno tan claro y completo, te invito a visitar mi blog para que puedas ver lo bonita que quedo mi caja de comentarios gracias a ti. http://pergaminodelhades.blogspot.com/

    ResponderEliminar