Con él los comentarios se quedarán como podéis ver en esta demo, aunque en realidad es el mismo estilo que actualmente utilizo en este mismo blog.
Como veis lo único que hacemos es ponerle un fondo distinto a lo que es el cuerpo principal del comentario, añadir un borde, esquinas redondeadas y añadirle un triángulo que realmente es una entidad HTML. En Nice Entity tenéis una útil guía organizada por pestañas según temática con este tipo de caracteres por si alguna vez la necesitáis.
Para usarlos en content tenéis que echar mano de la columna UNICODE. Aquí he usado el 25C4 (con una barra de escape) que aislado se vería como sigue ◄. Como realmente el navegador lo trata como "letra", se puede cambiar de tamaño y color con font-size y color sin ninguna dificultad añadida.
La segunda mitad del código lo que hace es mostrar los avatares en forma de círculo, ni más ni menos.
Lo único que necesitáis para tener este estilo en vuestros comentarios es copiar el código que viene a continuación dentro de la parte CSS de la plantilla, es decir, entre <b:skin><![CDATA[/* y ]]></b:skin>. Luego ya cambiáis los colores al gusto.
/* Estilo bocadillo comic */
.comments .comment-block {
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
color: #333333;
background: #eeeeee;
border: 4px solid #990000 !important;
border-radius:10px;
}
.comment-thread li .comment-block:before {
position: absolute;
left: -26px;
content: "\25C4";
color:#990000;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0 0 0 -22px;
padding: 0px;
border: 4px solid #990000;
border-radius: 60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-block {
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
color: #333333;
background: #eeeeee;
border: 4px solid #990000 !important;
border-radius:10px;
}
.comment-thread li .comment-block:before {
position: absolute;
left: -26px;
content: "\25C4";
color:#990000;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0 0 0 -22px;
padding: 0px;
border: 4px solid #990000;
border-radius: 60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Muy buen artículo Oloman. En cuanto comentarios ahora mismo tengo puestos los de Facebook así que no sé si meter este estilo...me lo pensaré :P
ResponderEliminarGracias!
Hola!!! Muy bueno, lo he aplicado a mi blog y me encanta como queda, he modificado un par de cosillas con algo de intuición porque no tengo mucha idea pero me ha gustado el resultado. Gracias por el código!!
ResponderEliminarSaludos :)
Muy buena entrada Olo, saludos :)
ResponderEliminarEstuve a punto de preguntar sobre esto pero ya tengo la respuesta mil gracias :P
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
Eliminar¿Por qué borráis preguntas y respuestas que seguramente son interesantes para todos? :(
EliminarPerdon Oloman lo pongo de nuevo si quieres.
EliminarEsto es lo que puse:
Otra cosilla me gustaria saber o donde puedo conseguir codigo para tener como tu o Karla que teneis no se si se llaman asi "Hojas de estilO" es decir que tu cuando pones codigo lo pones en plan chulo y se que usas CSS pero yo no se hacerme un estilo como ese tu saber donde conseguir o nose...
Un saludo.
Disculpame tambien oloman, mira esta fue mi respuesta aunque no se si fue lo que pedia Afm
Eliminarpones esto antes de ]]&gt;&lt;/b:skin&gt;
.post-body pre { display:block; overflow:auto; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; }
.post-body .vercodigo,
.post-body code { display:block; overflow: hidden; width:90%; margin:22px auto; padding: 20px; text-align:left; font:1em 'courier new', courier, monospace; background: #CCCCCC;color: #000; word-wrap: break-word;
-moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; border-radius:0px 0px 10px 10px; }
.post-body .vercodigo:before,
.post-body code:before { margin: -22px 0px 10px -20px; display:block; overflow: hidden; width: 120%; height: 22px; font: normal normal 1.20em Yanone Kaffeesatz; content: " CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO"; background: #2F4F4F; color: #fff; }
.post-body .bpt {display:block; font-size:90%; margin-left:40px; padding: 5px; border: 1px #2F4F4F dashed;}
luego creas una html o una entrada y colocas lo siguiente:
&lt;div class="vercodigo"&gt;
AQUI COLOCAS EL CODIGO QUE QUIERAS
&lt;/div&gt;
y eso es todo, ojala y te sirva mi respuesta, agradecimientos a oloman por brindarnos este gran blog
Es que me pareció interesante la pregunta y la respuesta y no entendí por qué las borrasteis. Sólo era por eso mi comentario.
EliminarComo podría enumerar los comentarios asi lo lo tienes tu en tu blog, gracias.
ResponderEliminarSi tienes los nuevos (anidados), la respuesta está aquí.
EliminarOloman una pregunta en este sistema no se puede dejar algún escrito o cometario en la parte superior del comentador como en el blog de JMiur por ejemplo? me explico el comment-form o contenedor anterior con este sistema de anidados de blogger si no se usa el sistema que propone Felipe esa área queda debajo de el comentador lo he agregado a modo de prueba en otro blog que no está en este usuario pero espero sepa explicarme, mas fácil para entender es aquella zona donde colocabas los emoticonos en los comentarios sin tener los anidados :) ¿Ahora se puede seguir teniendo esa disposición en el mismo lugar como antes?
ResponderEliminarY una pregunta mas ¿Crees que esto pueda verse unicamente cuando se activa el responder a una pregunta y no cada vez que haces un comentario? gracias
EliminarNo sé si lo que dices es lo que acabo de poner. Lo voy a probar unos días y luego lo publico. Ah, y yo no uso los "comentarios de Felipe". Me hace gracia que se hayan quedado con ese nombre :)
EliminarSobre la segunda cuestión, el "Añadir comentario" se queda ahí porque es la forma de poder escribir uno nuevo, no anidado. Sólo se me ocurren inconvenientes si lo hacemos desaparecer.
Santos cielos si es eso exactamente a lo que me refería ese mensaje te ha quedado de lujo se ve muy bien en tu blog por el diseño del mismo, yo ya intente por todos los medios buscando los iframe del contenedor pero nada que me ha salido, estaré esperando la publicación
ResponderEliminarY es cierto causa gracia que esos comentarios se quedaran con el nombre de Felipe jaja debe de sentirse alagado al ser referencia para cualquier blogger :)
Oloman he notado que de este modo se ve bien, pero ¿que ocurre cuando lo que escribes arriba es muy amplio en contenido?
EliminarTodo este escrito se desplazaría junto a el contenedor en cada respuesta, no está mal cuando se escriben unas pocas líneas como en tu caso, me he pasado por el blog de JMiur y note que ese espacio queda encerrado entre un div cuya clase es "comment-form" en el footer, del mismo modo que las plantillas antiguas ¿será que se puede lograr lo mismo en este sistema?
Es decir que todo el contenido quede en el footer para evitar que se desplace y en las respuestas solo se vea el contenedor de respuesta, hago referencia a él blog de JMiur porque allí usa el sistema de Felipe y no el de blogger, pero tal vez se pueda extraer algo de allí para mejorar un poco los nativos
Para mí el mensaje tiene sentido "moverlo" con el formulario cuando sirve de aviso para algo relacionado con el mensaje que se puede dejar en él.
EliminarSi no es así lo más fácil es ponerlo a continuación del formulario y así siempre estará abajo.
Hola! Quería implementar este código, pero va y resulta que cuando configuro los comentarios para que aparezcan debajo de la entrada, como aquí en Oloblogger, me dice que pá tu tía. Vamos, no me dice nada, pero no lo hace. ¿Qué estoy haciendo mal? ¿Es por la plantilla, que es una normal y corriente de Blogger? Gracias ;)
ResponderEliminar"Debajo de la entrada" es la opción para que salga como aquí y después hay que "Guardar configuración"
EliminarMuchas gracias Oloman. Eso que tú indicas es lo que hago, pero no, no funciona, es decir, no se quedan desplegados de forma fija, como aquí, sino que para verlos hay que hacer clic en "comentarios" de la entrada; en ese caso, sí que se despliegan debajo de la misma, en vez de en una ventana aparte, por ejemplo, pero no se quedan a la vista de forma fija. Bueno, lo seguiré intentando de alguna otra forma. Gracias de nuevo por tu ayuda :)
EliminarTendría que ver tu blog para quizás -sólo quizás- poderte dar alguna información adicional
EliminarComentario de prueba. Quiero vero como sale el tercer nivel de anidamiento de comentarios. Gracias y disculpad
EliminarGenial aparezco en la imagen buen post Olo.
ResponderEliminarCasualidad. Estabas por ahí cuando hice la captura. ;)
EliminarUn halago demasiado grande viejo, aparecer en esa captura, saludos desde Venezuela Olo...
EliminarEso os pasa por comentar por aquí y cuando tengo que hacer una captura, pues salís en la "foto" ;)
EliminarHola Oloman tengo una consulta: yo uso la plantilla simple de Blogger, y nunca le hice ninguna mejora a los comentarios, este diseño me gusta: antes de incluir este código, tendría que hacer algo más? por las dudas no vaya a armar un desbarajuste.. Gracias
ResponderEliminarPues sí, tendrías que hacer algo más porque este formato está preparado para los nuevos comentarios anidados y tú tienes todavía los antiguos. En el buscador podrás encontrar cómo instalar los nuevos con la cadena "comentarios anidados"... si te atreves :D
Eliminarpues vamos a ver qué resulta :D gracias!
Eliminarhola Oloman, ya está, quedó muy bueno!! :) ahora, hay algo que no puedo resolver, cómo modifico el tamaño del espacio para introducir comentario? está muy ancho. gracias otra vez!!
Eliminarah una cosa: no tomes en cuenta mis comentarios en tus otros post sobre comentarios anidados, lo fui resolviendo je je
.comment-form {max-width:90%; margin:0 auto 0 68px;}
EliminarCambia el 90% y el margen izquierdo (68px) como gustes ;)
Otro truco muy bueno! Gracias e saludos de Brazil.
ResponderEliminarObrigado. Eu vi que você colocou no seu blog ;)
EliminarHola Oloman,
ResponderEliminarYo soy totalmente ignorante a lo q se refiere a cambiar cosas en las plantillas d los blogs y he decidido cambiar cosas en mi blog y d hecho lo hice, gracias a tus explicaciones, sin embargo, estoy tratando de separa los comentarios en mi blog, la idea del bocadillo es interesante, pero me gustaría hacer la cosa mas sencilla, separarlos con una linea, he visto tu post sobre el HTML d los separadores, pero no entiendo donde debo ponerle en mi plantilla para q salga la separación entre un comentario y otro. A través d tu blog he entendido lo d CSS y me encanta lo q se puede hacer....bueno, en realidad solo quería agradecerte por las explicaciones d forma sencilla y clara q hasta una ignorante como yo las entiende, y acabé por enrollarme.....muchas gracias,
Saludos,
Lany
No sé si es esto lo que quieres, pero si funciona a tu gusto luego sólo tienes que cambiar lo del BORDER por las propiedades que viste en el post de los HR (separadores). Añádelo a tu CSS
Eliminar.comments .comments-content .comment-thread ol li {
border-bottom: 1px solid blue;
}
Gracias por contestarme, voy a probar, porque por lo poco que entiendo, creo q esta linea va en el final de todos los comentarios, separando la caja de los comentarios de los comentarios(no lo sé), pero lo q quiero es separar los comentarios de cada persona q escribe con una linea debajo, el caso es q tengo la fecha de los comentarios en la parte d arriba (igual q tú) y he probado con unos códigos pero no me ha funcionado. Seguiré leyendo mas cosas d tu blog para ver si me entero d mas cosas y trato d ver q es lo q hago mal....una vez más gracias....
EliminarLany
No exactamente. Ese código que te indiqué crea una línea entre cada grupo de comentarios, entendiendo como grupo lo que es un comentario y sus respuestas.
EliminarHola Oloman, excelente post. Es más o menos lo que buscaba. Muchas gracias.
ResponderEliminarUna pregunta. ¿Cómo puedo cambiar el color de "responder" que hay justo dentro del comentario. Lo digo porque al tener el mismo color que el texto, no me gusta como queda. Gracias.
Con esta clase es con la que controlas los enlaces Responder y Eliminar de dentro de los comentarios, aunque la de Eliminar sólo la ves tú:
ResponderEliminar.comments .comment .comment-actions a {color: XXX;}
Muchas gracias, Oloman.
EliminarSaludos.
Hola Oloman,
ResponderEliminarQuiero darte las gracias por la ayuda q me has dado con mi duda de la separación de los comentarios, ya lo hice, y por increíble q parezca (por mi torpeza) lo he hecho con una foto, me gusta mucho q esta ahora, y si soy sincera me gusta como va quedando mi blog poco a poco con cada post tuyo q leo y algunas conclusiones q voy tomando por mí misma, es genial...muchas gracias.
Aprovechando, ya q no consigo encontrar en tus post, quizá porque aun no domino bien lo d buscar las cosas por sus nombres, pero me gustaría q si hay alguno post q me lo pongas aquí, y si no lo hay, se queda como sugerencia: Me gustaría transformar los gadget de lista a un menú desplegable, igual al q se puede hacer con los archivos.
Un saludo y gracias por todo...
Lany
Bueno, pon en el buscador "desplegable" y encontrarás algunas ideas. Por ejemplo esta.
EliminarHola Oloman,
EliminarDespués d una temporada en off, vuelvo para agradecerte tus consejos, al final he visto algo sobre sumarios q se pueden crear con paginas en blanco en blogger y me gustó por lo sencillo q es...
Gracias por la ayuda y voy a echar un vistazo en tus nuevos (para mí) post...
Saludos,
Lany
No me salen las imágenes... Por qué? Qué estaré haciendo mal?
ResponderEliminarSaludos y gracias.
¿Me dices en qué blog te ocurre?
EliminarLo he probado en un par de blogs cuya administración comparto con unos amigos y en todos me sucedió igual: sale el circulo vacío.
ResponderEliminarhttp://plumaslatinoamericanas.blogspot.com.ar/
http://cuadernosdelaira.blogspot.com.ar/
http://chileliterario.blogspot.com/
En Diseño > Entradas y Comentarios > Ubicación de Comentarios... ¿tienes seleccionado "Debajo de la entrada"? Me da a mí que puede ser eso.
EliminarSí está y también tengo habilitadas las imágenes en el Lightbox. Las imágenes de los que comentan no me aparecen nunca.
EliminarPues por favor asegúrate de que además tienes seleccionado lo de "Usuarios registrados". Los que no lo están salen con avatares estándar. De todas formas insisto en lo de "Debajo de la entrada", porque al pinchar el link para comentar se abre una ventana nueva sólo para comentarios.
EliminarComo modifico el ancho de las viñetas, no lo consigo, me gustaría hacerlas un poco más pequeñas.
ResponderEliminarPonle a .comments {} un ancho fijo en píxeles o en tanto por ciento. Por ejemplo 90 u 80%
EliminarGracias de nuevo.
EliminarGracias! Me ayudo mucho.
ResponderEliminarMuchas gracias n_n! lo implemente en mi blog y se ve muy bonito... pero ahora tengo una duda, que ya rode y rode y no pude solucionarla X_x, quisiera que los comentarios del autor del blog se vieran en un color diferente... pero asi con este estilo, que le tengo que añadir :/ ?? Gracias n_n
ResponderEliminarCon CSS hay poco que hacer, apenas resaltar la línea del nick cambiando el icono que destaca marca al autor o cambiando la fuente.
Eliminarmmm si ya hice eso pero no destaca mucho xD... veo que tu color de borde es diferente a los demás... como hiciste eso? :O
ResponderEliminarperdon por el doble post pero eso es lo que quiero hacer... veo que tus comentarios tienen un distinto color de borde y fondo... eso es lo que quiero hacer, como se hace? gracias :3
ResponderEliminarPrecisamente a raíz de tu comentario me puse a investigar y esa es la prueba de que encontré un sistema que funciona :) No sólo cambié el borde sino también el fondo del bloque.
EliminarLo que ocurre es que no me gusta dar el código sin más y necesito dos posts preliminares para que se entienda bien lo que hice. Ya tengo preparado el primero que va de selectores CSS. Paciencia ;)
ahh ok!
ResponderEliminarestare esperando n_n!! muchas gracias por la ayuda :3 ... habia preguntado en otros lados y me decian que me tenia que olvidar de los comentarios anidados... cosa que no quisiera hacer pero si no hay de otra pues lastima :C ... una vez más gracias :D n_n
No se si sera el sitio correcto moderalo Oloman si es necesario gracias.
ResponderEliminarBuenas Oloman necesito cambiar el color de fondo de la caja de comentarios de mi blog.
Y si es pòsible es de las respuestas.
Algo que seria simple no los consigo, hasta logro poner el tema de los comentarios anidado tipo comic pero el color de fondo no consigo cambiarlo.
Ejemplo:
http://www.subirimagenes.net/i/130609111013219443.png
El color de fondo es este que está aquí:
Eliminar#comments {
background: #cccccc none repeat scroll top center;
padding: 15px;
...
y si no te aparece en tu código CSS, simplemente lo añades con el color que quieras.
En este enlace tienes una lista con todos los selectores que controlan los comentarios anidados.
Como siempre Oloman gracias por tu tiempo,, para los que no estamos comenzando un blog gracias me sirvio de mucho espero le sirva a mas gente.
EliminarHola genial blog! digno de la locura! ... pero me ha metido en un problema este post. Resulta que lo he ingresado a mi plantilla el código y ya no se puede entrar para agregar comentarios :S , supongo que algo se habrá desconfigurado. www.tu-autoayuda.blogspot.com porfa allí puedes darle click a donde dice comentarios para que se entienda mejor lo que te digo... GRACIAS ESPERO TU AYUDA!
ResponderEliminar( dicho sea de paso ya lo quite el código, pero ni así )
ResponderEliminarPOR FAVOR ESPERO UNA RESPUESTA
ResponderEliminarCésar, este código no puede afectar en modo alguno a que se vean o no los comentarios, pues para eso hace falta tocar la parte HTML y esto es sólo CSS, es decir, algo que cambia el ASPECTO, pero nada más.
EliminarHe mirado hasta dónde he podido tu código y todavía tienes esto que propuse yo, por lo que sospecho que lo que pusiste y luego quitaste fue precisamente lo que te provocó la desaparición de los comentarios. Supongo que no tendrás una copia de seguridad porque si la tienes esa sería la solución, restaurarla.
Si es cierto aún está , recuerdo que había quitado algo de los comentarios porque estaba duplicado un código pero luego lo agregué denuevo, que otra cosa podría a ser para que se vean los oomentarios?...
ResponderEliminarQuizás metiste el gadget que los genera entre algún condicional que hace que no se vean.
EliminarYa borré el código de - Estilo bocadillo - todo el código . Y NADA :/
ResponderEliminarQue ne recomiendas, no voy a estar así sin comentarios... porfa ayúdame!
César, pero es que ese es un problema que yo no te puedo solucionar desde aquí porque todo está como artilugio de plantilla y precisamente esa parte de los comentarios está actualmente bastante compleja con los antiguos, los anidados, los de Google... En fin, que no puedo darte otra solución mas que restaurar las plantillas de artilugios (en la pantalla de Edición HTML de plantilla).
EliminarPero eso te borrará algunos de los trucos que incorporaste casi con seguridad y entonces te tocará volverlos a poner. Si lo vas a hacer primero crea una copia de seguridad y así podrás recuperar lo que pierdas fijándote en el código actual que tienes.
Hola de nuevo, Oloman, quería consultarte algo sobre la numeración de los comentarios. Pasa que los números se quedan como ocultos detrás de la caja de comentarios. Le he quitado el color de fondo para que puedan verse un poco, pero me gustaría que se vieran del todo con o sin color de fondo en la caja de comentario. ¿Cómo podría hacer?
ResponderEliminarLos puedes mover un poco...
EliminarEn el selector .comment-thread li:before añade:
position: relative;
top: 10px;
right: 10px;
Y en el de .comment-thread li li:before también lo mismo.
Sr. Oloman/Oloblogger, buenas tardes, tengo la siguiente duda... como hago si quiero que el avatar del autor del comentario quede no encerrado en un circulo sino en un cuadrado con bordes redondeados? como lo hago? y que este avatar se vea un poco mas grande? ... porque trate de modificar un poco el codigo que nos puso arriba, pero no me resultó... solo logré cambiar los colores (aqui se ve como me quedó: http://elsecretodelabuenalectura.blogspot.com/2013/06/beastly.html )
ResponderEliminarHola. Para que te queden los avatares como quieres, tienes que cambiar el valor 60px de esta línea, border-radius: 60px;, por otro más pequeño. Por ejemplo, 5px.
EliminarPara que se vea más grande tendrías que cambiar todos los valores height y width que ves fijados también en 60px, por otro más grande. Pero ojo, que quizás se deformará mucho.
Hola acabo de ver que ayudas a gente a solucionar sus problemas con sus blogs. Tengo un problema y es que no puedo responder en mi blog a los comentarios que dice la gente. He revisado mi plantilla y tiene exactamente lo que dices en tu post http://www.oloblogger.com/2012/01/insertar-respuestas-replies-blogger-en.html Puedes ayudarme? muchas gracias. haces un trabajo genial con tu blog. un saludo y encantada de conocerte.
ResponderEliminarEsto me ha funcionado a mí casi siempre. Lo primero haz una copia de seguridad por si las flies y luego busca en tu plantilla este includable:
Eliminar<b:includable id='main' var='top'>
Lo que tienes que hacer es borrarlo completo, incluidos apertura y cierre y guardar los cambios. Blogger te lo restaurará con el código actualizado.
Gracias por la aportación pero aún así sigue sin funcionar. Cuando pincho el botón de responder a uno de los comentarios de mi blog no me sale nada. Otra opción? Muchas gracias
EliminarVale, esto hay que ir poco a poco pues tiene muchos apartados el tema de los comentarios. Ahora haz lo que se explica aquí, pero en este caso, si te sigue sin funcionar, vuelve al código anterior. Para eso guárdalo temporalmente en un bloc de notas.
EliminarPerfecto, ahora si que si. Muchísimas gracias por tu ayuda. Si no, habría sido imposible. Me encanta tu trabajo ayudas a mucha gente. un saludo y nos leemos.
Eliminarhola ta muy bueno aunque no se porque el circulo de mis comentarios salen iwal, y ati te sale diferente osea blanco y al resto amarillo haber que debo cambiar si me avisas gracias saludos
ResponderEliminarMira la página principal del blog. Hace muy poco publiqué cómo se hace eso ;)
EliminarHola!!antes de nada gracias por tus tutoriales!! acabo de conocer tu blog y estoy a tope leyendo todo lo atrasado jajaja
ResponderEliminarComo puedes ver en este post por ejemplo (click aquí) , he conseguido hacer el estilo bocadillo de comic, pero no sé por qué se me queda un rectángulo gris de fondo de mis respuestas y no veo en que parte del código puedo cambiarlo. ¿me puedes ayudar?
Te pego el código tal como lo tengo ahora:
/* Estilo bocadillo comic */
.comments .comment-block {
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
color: #000000;
background: #FFFFFF;
border: 2px solid #000000 !important;
border-radius:10px;
}
.comment-thread li .comment-block:before {
position: absolute;
left: -26px;
content: "\25C4";
color:#000000;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0 0 0 -22px;
padding: 0px;
border: 2px solid #000000;
border-radius: 60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
Y otra dudilla, en los abatares con forma de círculo (veo que a ti también te pasa) en el lado derecho aparece un rectángulo vertical pequeñin, ¿existe alguna manera de quitarlo?
Muchas gracias de antemano!!!
Un saludo!!
Uyss pues si que investigué poco jejeje ya conseguí lo del fondo gris toquiteando en Plantilla> Personalizar.
ResponderEliminarEsto me queda pendiente:
"Y otra dudilla, en los abatares con forma de círculo (veo que a ti también te pasa) en el lado derecho aparece un rectángulo vertical pequeñin, ¿existe alguna manera de quitarlo?"
Gracias!!!
Pues no sé que es eso del rectángulo vertical pequeñín, porque la verdad es que yo no lo veo. Pienso que tiene que ser cosa de tu navegador, pero he probado con varios y con todos lo veo bien...
EliminarUhmmm yo lo veo desde Safari y Chrome :S ¿te puedo mandar un pantallazo a algún correo electrónico?
EliminarGracias!
Mándame la dirección de la captura por aquí. Adjunta también la dirección de tu blog y una nota breve sobre el problema, que sois muchos y no me acordaré.
EliminarHola Oloman, muchas gracias por tu trabajo es genial ;) He puesto este estilo en mi blog y queda de lujo, solo una duda, he conseguido juntar los comentarios porque quedaban demasiado separados, pero no consigo poner a la misma altura los avatares y me quedan demasiado bajos, ¿como puedo hacer? Gracias adelantadas :)
ResponderEliminar¿Me pasas la dirección de un post con comentarios que lo vea? Es que en tu perfil veo varios blogs y en un primer "escaneo" no encontré ninguno con ese estilo.
EliminarBuenas noches, Olomán.
ResponderEliminarHace ahora poco más de un año te escribí un comentario en este post con la idea de ir cambiando poco a poco la plantilla de mi blog naturalezayviajes.com.
Estoy ahora haciendo un sorteo en mi blog y acabo de recibir el comentario 201 y qué pasa? Como sabes, no se ve el comentario 201. El problema es que no puedo cargar los siguientes comentarios (digamos para enterdernos, la página 2 de los comentarios) y no sé qué hacer. Imagino que al estar tan modificada la plantilla no carga esa segunda página de comentarios. ¿Podrías iluminarme, por favor?
Un abrazo enorme y felicidades nuevamente por tu trabajo.
Disculpa, olvidé comentarte que el post de los 201 comentarios es este: www.naturalezayviajes.com/2014/03/blog-septimo-aniversario.html
EliminarGracias.
Hola Oloman,
EliminarSólo comentarte que buscando en internet encontré este enlace: https://support.google.com/blogger/answer/1725597?hl=es y lo he conseguido solucionar.
Parece ser que esto le pasa a mucha gente y de ahí que encontrase más información en la red. Lo único que he hecho es cambiar en "configuración" el feed de mi blog a "Completo". Lo tenía en "corto". desconozco si este cambio por otro lado tendrá otras consecuencias y dejará de funcionar otra cosa.
Muchas gracias. Saludos.
No que va. Ese cambio no te va a afectar a nada más en el blog.
EliminarMe viene muy bien saberlo para otros que tienen también ese problema y que no se arreglaba con otros métodos. Gracias.
Hola Oloman. Yo tengo los comentarios con disqus. Se puede hacer esto que explicas.
ResponderEliminarMuchas gracias
¿?
ResponderEliminarNo Libertad. El estilo CSS siempre es para una serie de selectores (clases, ID) determinados que van personalizados en cada plantilla y normalmente son distintos, así que no podrías usar estos de manera general.
EliminarDisqus seguro que maneja los suyos propios y tendrías que averiguar cuales son para ajustar esto.
Además, sospecho (no lo sé seguro) que Disqus es del lado del servidor o incluso un iframe, y en ese caso, ni averiguando qué hace cada selector, podrías cambiar su aspecto.
Una pregunta. Se puede poner un borde diferente al redondo en las imágenes de los comentarios. Por ejemplo: imaginemos que quiero que tenga un marco en forma de flor y luego dentro aparecería la imagen de cada persona que escribe. Se podría hacer eso? Gracias
ResponderEliminarMás o menos. Tendrías que cambiar las declaraciones de .comments .avatar-image-container y dejarlas así:
Eliminar.comments .avatar-image-container {
overflow: visible;
width: 60px;
height: 60px;
max-height: 60px;
margin: 0 0 0 -22px;
padding: 0px;
border: 6px solid transparent;
border-radius: 60px;
background-image: url(URL_IMAGEN_FONDO);
}
El valor de border (6px) es el espacio que quedaría alrededor del avatar y lo puedes modificar si tu dibujo es más grande. El border-radius se puede suprimir.
Hola, todo me salió bien gracias a tu tutorial , pero tengo una curiosidad.
ResponderEliminarCómo puedo hacer para que mi respuesta a los comentarios sea diferente a las personas que que me comentan ? es decir tener diferentes fondos.
Gracias de antemano
Aquí lo tienes explicado, Estefany.
EliminarMe ha funcionado de 10 y tengo que tocarle un poco las dimensiones pero tengo un problema...¿Como hago para que la para que la flechita "<" que apunta al avatar se haga mas grande... se agradece genio.
ResponderEliminarLa flechita la forma esta parte:
Eliminar.comment-thread li .comment-block:before {
position: absolute;
left: -26px;
content: "\25C4";
color:#990000;
}
Si ahí añades un font-size con un tamaño superior al de la letra de los comentarios, entonces saldrá un triángulo más grande.