He visto en distintos blog los cuales por ejemplo, el editor de comentarios se encuentra a la izquierda y con un tamaño muy chico, el cual distorsiona con el diseño del blog.
Por supuesto que eso va en el gusto de cada uno.
Con algo de CSS podemos cambiar el aspecto de nuestro editor.
También se puede corregir la distancia en la parte de abajo del editor.
En la siguiente imagen veremos distintas partes las cuales podemos personalizar, destacadas por un numero y un borde de distinto color:
Cada parte tiene una ID (#) o una clase (.)
Los códigos CSS van arriba de ]]></b:skin>
#comments{
propiedad: valor;
propiedad: valor;
}
#comments h4{
propiedad: valor;
propiedad: valor;
}
.avatar-image-container{
propiedad: valor;
propiedad: valor;
}
#comments-block{
propiedad: valor;
propiedad: valor;
}
.comment-author{
propiedad: valor;
propiedad: valor;
}
.comment-body{
propiedad: valor;
propiedad: valor;
}
.comment-timestamp{
propiedad: valor;
propiedad: valor;
}
.comment-form {
propiedad: valor;
propiedad: valor;
}
#comment-post-message{
propiedad: valor;
propiedad: valor;
}
.comment-form p{
propiedad: valor;
propiedad: valor;
}
#comment-editor{
propiedad: valor;
propiedad: valor;
}
Por ejemplo si queremos personalizar el editor: (11)
#comment-editor{
width:600px; /*ANCHO */
height:240px; /* ALTO */
margin-left:20px; /* DISTANCIA DESDE LA IZQUIERDA */
}
Ajustamos el ancho.
Con la altura podemos sacarle la separación que tiene abajo.
Con el margin-left ajustamos para dejarlo centrado.
Ver ejemplo:
Si quieren dejar un mensaje a los visitantes arriba del editor (10), lo hacen desde:
Configuración, Comentarios y colocan el texto en donde dice:
Mensaje del formulario de comentarios.
Ejemplo para personalizar: (10)
.comment-form p{
border: 1px solid #ccc;
width:500px;
padding:10px;
color:#fff;
background:#000;
margin-left:20px;
}
Si solo quieren centrarlo.
Centrar todo (1)
#comments{
margin:0px auto;
}
Centrar la caja desde "Publicar un comentario en la entrada" (8)
.comment-form{
margin:0px auto;
}
Cualquier duda me lo comentan.
Está muy bueno! Uno se siente más importante ofreciendo un espacio como el de tu ejemplo que una simple ventanita. 6)
ResponderEliminarClaro que hay que tomarse su tiempo. Lo intentaré en algún momento, y si no, como tantas veces... S.O.S.!!!
Abrazo.
Corona, tu puedes.
ResponderEliminarDesde que te conozco has aprendido un montón. Y ya sabes que puedes contar conmigo.
Besos.
hola Vku, muy buena la entrada, de momento ya modifique lo que es el editor :D gracias!!
ResponderEliminarQue bueno, vi que cambiastes el diseño.
ResponderEliminarHola vku, de nuevo necesito tu ayuda, mira, en las entraadas donde tengo algun comentario, en la pagina individual de la entrada, aparecen los comentarios con unos colores que no me gustan, amarillos jaja y quisiera que solo me quedara el fondo negro que tengo en el blog ¿como puedo quitar esos colores?¿me podrias ayudar?
ResponderEliminarGracias
besos desde España
Tienes que buscar un código javaScript
ResponderEliminar$(this).next().next().prependTo("#" + divId);
$(this).next().prependTo("#" + divId);
$(this).prependTo("#" + divId);
$("#" + divId).css("padding","10px");
if(i%2==0){
$("#" + divId).css("background-color","#B8D62F");
}else{
$("#" + divId).css("background-color","#DFF294");
}
});
});
Ahí cambia los colores #B8D62F y #DFF294
Por ultimo busca esto en el css
.blog-author-comment p {
clear: both;
margin: 3px 0px 10px 0px;
padding: 10px 10px 4px 10px;
width: 606px;
border: 1px solid #cfcfcf;
background: #99CC66;
#Label1 ul, #Label2 ul {
list-style-type:none;
}.imagencomentario {
border: 1px border: double #826C55; 4px; #ffffff;
padding: 5px 10px 0px 0px;
}
como veras son 2 clases mas unas id´s
la primera clase es la que muestra el fondo del autor (vos) y no esta cerrada
y la segunda clase es un desastre como esta
cambia por esto
.blog-author-comment p {
clear: both;
margin: 3px 0px 10px 0px;
padding: 10px 10px 4px 10px;
border: 1px solid #cfcfcf;
background: #99CC66;
}
#Label1 ul, #Label2 ul {
list-style-type:none;
}
.imagencomentario {
border: 1px double #826C55;
padding: 5px 10px 0px 0px;
}
En negrita tienes que poner el color que quieras
negro es #000
@ Vku:
ResponderEliminarQue desastre madre mia, he podido arreglar solo una parte, el JavaScript no lo encuentro..
yaaaaaaaaaa lo encontreeeeeeeeeeee!!!
ResponderEliminarjjajajja, madre mia diras que cuanta torpeza!!!
Gracias y mas gracias
un beso
Hola Vku.
ResponderEliminarcomo puedo hacer para enmarcar los comentarios como tienes tu pero el nombre y la fecha tambien que esten dentro del recuadro.
Gracias.
Unicamente con CSS, con float, margin y padding.
ResponderEliminarEs dificil.
Ktini
ResponderEliminarA ver si es esto lo que quieres.
Busca el siguiente código en Edición de HTML con artilugios expandidos.
<div class='' expr:id='data:comment.id'>
Le agregamos el estilo directamente.
<div class='' expr:id='data:comment.id' style='border:1px solid red;margin-bottom:10px;padding:10px;'>
Adaptalo a lo que tu quieras cambiale las distancias y el color del borde.
Hola vku!despues de leer tu entrada,me puse a ver mi editor de comentarios y tienes razon a veces el tamaño no queda bien en relacion al blog,por eso decidi hacer unos cambios!!creo que me quedo mas armonioso,quisiera saber porque me queda una linea debajo del ultimo comentario,me gustaria sacarla pero no se como,para que me comprendas cuando puedas paste por mi blog asi lo ves,y me das tu opinion.
ResponderEliminargracias y tu blog cada dia mejorr!!
Corina prueba colocando en CSS
ResponderEliminar.comment-footer {display:none}
si no funciona prueba en lugar de .comment-footer poner #comments-block
Holaaaa, quisiera hacerte una consulta, quizas sea una tonteria pero no se donde cambiarlo, mira en la pagina de las entradas individuales quiero cambiar el color del texto de los comentarios, me sale en rojo y quisiera ponerle otro color, blanco
ResponderEliminar¿donde puedo cambiarlo?
Muchas gracias
besos
@ teofermi:
ResponderEliminarArriba de </head> pon:
<style type='text/css'>
comment-body, blog-author-comment p {color: #fff}
</style>
@ Vku:
ResponderEliminarHola de nuevo vku, he hecho lo que me dices pero el color no cambia
@ teofermi:
ResponderEliminarSi, perdon me faltaron los puntos.
Estos días ando cansado viajando mucho y la mente no me funciona muy bien. jajaja
Es así:
<style type="text/css">
.comment-body, .blog-author-comment p {color: #fff}
</style>
@ Vku
ResponderEliminarNo te preocupes, no pasa nada, lo importante es que siempre estas dispuesto a ayudarme y te lo agradezco enormente, ahora si salio!!!!!!!!!!!!!!!! me quedo como yo quiero
Muchas gracias genio por tu ayuda
besos desde España
teo
en mi blog no recibo comentarios no se como poner un formulario como el tuyo ayudame mi blog es photoshopincreible.blogspot.com
ResponderEliminarTienes que ir a Configuración y en la pestaña Comentarios marcas la opción Entrada incrustada a continuación, guardas.
ResponderEliminarHola que tal Vku, me han servido mucho tus tutoriales, y queria saber porque en un ipod mi pagina se carga a la izquierda, viendose una franja del fondo ala derecha, lo he intentado solucionar y no he podido, gracias de antemano!
ResponderEliminar