Es una pena pero Blogger tiene la costumbre de complicar lo sencillo y aquí está otra vez, ofreciendo la posibilidad que se vean los avatares de los comentaristas pero, haciéndolo de tal modo que hay que tomar un curso ascelerado en la NASA para hacer que funcionen y se vean correctamente en muchas plantillas.
Los problemas básicos son dos; el primero es que el nuevo juguete tiene una serie de definiciones de CSS predefinidas, demasiadas propiedades ya que, lo razonable era que no tuvieran ninguna y que cada uno usara esa imagen como le viniera en gana pero, para Blogger, DEBEN tener un borde gris, medir 35x35 y estar a la izquierda ¿Por qué? Nadie sabe pero, es la ley.
Los problemas básicos son dos; el primero es que el nuevo juguete tiene una serie de definiciones de CSS predefinidas, demasiadas propiedades ya que, lo razonable era que no tuvieran ninguna y que cada uno usara esa imagen como le viniera en gana pero, para Blogger, DEBEN tener un borde gris, medir 35x35 y estar a la izquierda ¿Por qué? Nadie sabe pero, es la ley.
/* estas son las propiedades por defecto */
#comments-block .avatar-image-container img {
border:1px solid #CCCCCC;
float:right;
}
#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px;
}
#comments-block .avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}
#comments-block.avatar-comment-indent {
margin-left:45px;
position:relative;
}
#comments-block.avatar-comment-indent dd {
margin-left:0;
}
iframe.avatar-hovercard-iframe {
border:0 none;
height:9.4em;
margin:0.5em;
padding:0;
width:25em;
}
Para personalizar ese sector, debemos sobrescribir esas definiciones así que es conveniente agregar el estilo después de <body>, entre etiquetas <style> y <style>.
¿Es posible posicionarlo a nuestro gusto?
Sí. Me parece que lo ideal sería adaptar los márgenes y eliminar la posición absoluta. Por ejemplo, así, podría ponerse a la derecha:
Sí. Me parece que lo ideal sería adaptar los márgenes y eliminar la posición absoluta. Por ejemplo, así, podría ponerse a la derecha:
#comments-block.avatar-comment-indent {margin-left: 0;}
#comments-block .avatar-image-container {float: right; position: static;}¿Es posible quitarle el borde o cambiarlo por otro?
Sí. De esta manera:
Sí. De esta manera:
#comments-block .avatar-image-container img {border: none;}¿Es posible cambiar el tamaño de los avatares?
Sí. Aunque no podemos cambiar el ancho y el alto de la imagen en si misma, podemos valernos del CSS para establecer valores mínimos; de este modo, por ejemplo, los mostramos de 45x45:
Sí. Aunque no podemos cambiar el ancho y el alto de la imagen en si misma, podemos valernos del CSS para establecer valores mínimos; de este modo, por ejemplo, los mostramos de 45x45:
#comments-block .avatar-image-container img {min-height: 45px; min-width: 45px;}Y si quisiéramos lo contrario, usaríamos otras propeidades; por ejemplo, los mostramos de 24x24:
#comments-block .avatar-image-container img {max-height: 24px; max-width: 24px;}Incluso, si el tamaño nos parece correcto, convendría usar min-height y min-width siempre porque he visto que ciertos avatares no se muestran bien; por algún motivo, se ven rectangulares y no cuadrados.
El segundo problema molesto que vi es que si el comentarista no se identifica a través de una cuenta de Blogger, lo que se muestra es un ícono pero, vaya uno a saber por qué motivo, ese ícono no es de 35x35 sino de 16x16 así que queda un espacio vacio. Para resolver esto, podríamos usar un truco.
La etiqueta IMG admite estilos CSS, uno de ellos es background (fondo) y normalmente lo usaríamos para darle un color de fondo si es transparente o enmarcarla de alguna manera; pero background tambien admite colocar una imagen de fondo. Claro, por lo general esto sería una tontera ya que no lo veríamos nunca pero, en este caso, podría ayudarnos ya que Blogger genera dos códigos diferentes, uno cuando se usan sus cuentas y otro para el resto de los ingresos.
La etiqueta IMG admite estilos CSS, uno de ellos es background (fondo) y normalmente lo usaríamos para darle un color de fondo si es transparente o enmarcarla de alguna manera; pero background tambien admite colocar una imagen de fondo. Claro, por lo general esto sería una tontera ya que no lo veríamos nunca pero, en este caso, podría ayudarnos ya que Blogger genera dos códigos diferentes, uno cuando se usan sus cuentas y otro para el resto de los ingresos.
<div class="avatar-image-container vcard">
....... avatares de 35x35 .......
</div>
<div class="avatar-image-container avatar-stock">
....... íconos de 16x16 .......
</div>
Usando esos datos, podemos utilizar otra imagen personal que sea el fondo y ocultar la imagen del ícono:
#comments-block .avatar-image-container.avatar-stock img {display:none;}
#comments-block .avatar-image-container.avatar-stock {background:transparent url(URL_imagen) no-repeat 50% 50%;}Algo similar ocurre con algunos avatares que parecen no mostrarse por, vaya uno a saber qué motivo, podemos agregarle un fondo a la imagen por si esta no se muestra:
#comments-block .avatar-image-container img {background: transparent url(URL_IMAGEN) no-repeat 50% 50%;}Como un ejemplo genérico, estas son las propiedades que he aplicado:
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
height: 49px;
position: static;
width: 49px;
}
#comments-block .avatar-image-container img {
background:#234 url(URL_noimage.gif) no-repeat 50% 50%;
border: 1px solid #456;
display: block;
float: none;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
background: #234 url(URL_noavatar.gif) no-repeat 50% 50%;
border: 1px solid #456;
}
#comments-block .avatar-image-container.avatar-stock img {
display: none;
}
img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}Seguramente, hay muchas otras maneras de llegar al mismo resultado o que deben ser aplicadas en casos particulares así que sería bueno que las compartiéramos a ver si podemos sacarle jugo a estos regalitos sin morir en el intento.
120 comentarios:
¡Pero si ya lo tenía hasta el avatar para anónimos! jajajaja me vas a matar a disgustos.
Otra vez JMiur, le solucionaste casi todo, ahora mismo aplico el css pero con mucho cuidado.
De vez en cuando me molesta Blogger porque pareciera que quiere resolver todo pero lo complica más de lo que es.
Hola, vagabundios, tengo una consulta que mucho no tiene que ver con esta entrada, pero no debo ser el unico interesado en saber esto:
-Que hay que hacer para que el gadget de "lista de blogs" no nos abra en otra ventana o pestaña al hacer clic sobre uno de los blogs de la lista?
Desde ya mil gracias.
Hola,
¿esto solo aplica a los que tienen plantillas de las nuevas o sirve para los que aún tenemos plantillas del Blogger viejo?
Gracias
Eres un crack, estas cosas le dan una gran vista al diseño del blog, bueno sera que me fijo mucho en los detalles. Gracias tu blog me ayuda un buen :)
Cuando ya estaba tranquila ya estamos otra vez, ahora la tonteria es que en los comentarios se borraron hasta los iconos de blogger que habia antes y ahora no sale ni avatares ni nada creo que la mejor opcion sera poner iconos por mi cuenta me siento como el mono de la foto un saludo.
Hayyyy JM... en Folktango como decís, si tengo el código, aunque no es igual y los avatares no salen, ahora le puse el código que pusiste en la entrada anterior que supuestamente es el que pone Blogger, aunque NO en mi caso, ahora se ven los avatares pequeñiiiitos y fuera del cuadro de comentarios.
El scc que decís que viene por defecto no está en mi plantilla... Traté de poner el otro que vos ponés tambiéen en la entrada anterior debajo de body y sale código arriba de la cabecera en vista previa, así que lo saqué :S
No tengo css...
Que lio es esto mi Dios!!
Bueno algo vamos logrando... pude ponerle el css que pusiste aquí arriba, aunque le modifiqué algunas cositas como el color del borde y fondo, lo puse gris ya que en FolkTango resaltaba mucho el negro, le puse una imagen, provisoria para los que no tienen avatar (después la cambio que es horrible).
Me gustaría que la imagen-avatar quedara mas sobre el borde izquierdo de la pantalla, aunque sea un poquito mas corrida, se ensima mucho con el nick del autor del comentario, como puedo corregir eso?
Ahh... me olvidaba si no te molesta te robé la imagen para los anónimos, me encantó el paisaje de Windows XP!! Si te molesta la cambio, solo decime ehh... ;)
Hola JMiur, yo tengo puesto lo de Identificando a los autores ¿como lo vuelvo a poner como estaba?
Paciencia, Gem@, paciencia :D
Bonzu: ¿Todo? Oh no, a cada momento estoy arreglando algún detalle que se descompagina, ya he destruido la plantilla un par de veces así que, prudencia :D
Si, tanta cosa puesta a la fuerza es molesto y sólo nos hace trabajar el fin de semana.
FiX: Es lo que hace por defecto. Si te fijas en el código dice:
<a expr:href='data:item.blogUrl' target='_blank'>
y
<a expr:href='data:item.blogUrl' target='_blank'>
quita el target='_blank' de ambos y coneso se abrirá en la misma ventana.
Curiosa: Lo siento, no he leido nada al respecto y no sé si hay un equivalente para als plantillas clásicas.
Gracias, Mauricio :)
Nafire: En Mundos Paralelos veo que estan aunque también parecen estar los íconos personales. En Historia del vestir no veo que esté el código.
Todos quedamos como el mono, no te preocupes y ... paciencia :D
k_nelita:
En Folktango los veo bien aunque desplazados porque todo ese sector tiene un padding:
.comment-author {
..........
padding:13px 15px 15px 90px;
}
en lugar de 90px coloca otro valor menor, tal vez 15px.
El CSS por defecto no está en la plantilla, lo agrega Blogger y oor eso hay que ponerlo despues de BODY para sobrescribirlo.
Lo de la imagen no importa, envio factura y listo :D
uyyyyyyyyy ni siquiera he tocado nada aún, espero no sea para expertos de la Nasa :O porque los dejo como están :D
:P Feliz domingo para todos :P
Hola Jorge
Para lo del hueco que queda cuando el comentario no se identifica con una cuenta Blogger, en mi caso tuve que quitar la linea
comments-block .avatar-image-container.avatar-stock img {display:none;}
porque eso provocaba que en IE se siguiera sin ver nada, siquiera el fondo (IE8).
Como la imagen que por defecto coloca blogger es un gif de 1x1px totalmente transparente (http://img1.blogblog.com/img/blank.gif), con forzar un ancho y alto mínimo para el espacio del avatar y luego hacer lo que indicas de colocarle un fondo, ha sido suficiente.
Gracias. Un saludo
(y sigue funcionando bien el formulario incrustado ;) )
Holas! JMiur, la imagen de fondo con el globo de Blogger lo colocaste vos? Vi comentarios en los que la imagen de perfil no se mostraba y debajo aparecía un globo naranja con la B de Blogger.
Y para las imagenes más "anchas" se superponen al nombre del comentarista. En esta entrada tuya vi algo de lo que te digo. Avanzamos un paso y Blogger nos lleva a dos pasos atras.
Una cosa más: Cuando Blogger incorpore php(cuando Blogger sea "mayor de edad", supongo jaja)... Nos vas a dejar tus investigaciones como de costumbre??
ohhh yessssss olvidé algo 'La NASA busca agua en la Luna' jajaja
Hola :)
Ya había aplicado algunas de estas propiedades, pero como se ha hecho más completa.
Un Fuerte Abrazo de Portugal!
don JM solo sale mi avatar jajaja ególatra e ídola :S
qué puede suceder, usted que sabe de esto???
Ya lo he conseguido JMiur, ahora sólo me falta separar el nombre del comentarista del la imagen avatar ¿en donde tengo que cambiar algo? con esto de los comentarios estoy algo confundido :-I Por cierto le he dado mayor tamaño a 65 x 65 px.
Mis disculpas crack! veo que en el anterior post referente a este tema esta la solución a la pregunta que te formulé.
Si es que estás en todo je, jee. Gracias de nuevo!! :D
Salu2!!
De ahí es que digo casi todo :$
Creo que la razón por la que algunos avatares no se muestran es porque aquel comentarista borró la imagen que tenía en su perfil, o la reemplazó por otra y borró la anterior.
El problema sería que la url de la imagen del perfil no es genérica, esa url se guarda en nuestro blog, lo comprobé exportando un blog de pruebas.
Gracias JM!! Quedó perfecto!! Con pading 15px, casi igual a tus comentarios :D
Y lo de la factura que querés pasarme que sea de pastelera que son las que mas me gustan :D
Gracias por la imagen también ;)
Después seguimos con la plantilla nueva de Te Propongo ehh :D Voy a investigar sola primero, si no puedo te chiflo ;)
Raul:
Pués, por ahora, creo que ambos sistemas son incompatibles y no sé hasta que punto tendría sentido usar la identificación ya que el mismo avatar mostraría quién es quien.
Oloman
No me pasa lo mismo, eso es raro pero tu idea es buena. Siguiendo un comentario que dejaron ayer, le agregué otra definición más:
img.delayLoad {max-height: 45px; min-height: 45px; min-width: 45px; max-width: 45px;}
supongo que debe funcionar de manera similar, forzando el tamaño de la imagen para que siempre sea del mismo tamaño (en mi caso 45x45).
egoloco:
Si, esa imagen la puse yo como fondo en #comments-block .avatar-image-container img y se debería mostrar cuando la imagen de alguien logueado en Blogger no está disponible.
Si el texto se superpone hay que buscar la etiqueta que lo muestra y aumentar o agregarle padding-left para desplazarlo a la izquierda.
Si Blogger incorporara PHP sería feliz pero, no creo en milagros :D
Gracias por el comentario, alezandri. Imagino que debe haber muchas formas diferentes de llegar al mismo resultado.
Graciela:
Buena pregunta la suya. Se me ocurre que es porque estás usando el sistema de mostrar los comentarios de manera personal y me parece que ahí, Blogger se traba. Consejo: hacerlo en un blog de pruebas eliminado todo eso por completo y poniendo el código original de Blogger. Recién, a partir de eso, habría que ver si es posible agregarle más personalización.
Espineli:
Lo acabo de ver y quedó perfecto, me gusta eso de la sombra, tuve la misma idea pero no encontré una combinación que me gustara. Ahí queda de maravilla.
Bonzu:
En algunos casos es porque se han borrado pero en otros no, vaya uno a saber el motivo. Tamaño, formato, quien sabe.
k_nelita:
Factura con crema pastelera será entonces :D
me rindo, blogger me cansa, otra vez será :D
Quizá es un código tan complicado porque para Blogger la función principal de ésta imagen está relacionada con Google Friend Connect y los misteriosos scripts del formulario, de hecho hay un evento onclick que de momento no hace nada en cada imagen que crea.
JMiur. ¿Es posible colocar una imagen para los que dejan su nombre en Nombre/Url pero no dejan la url.
Y que esta sea distinta a la imagen de anonimos.
Roudy:
No lo sé, aún no lo he probado. Supongo que es posible.
Hola JMiur como le hago para que la de los anónimos sea diferente por que sale la misma que los usuarios cuando no tienen imagen, ademas de eso sale mas grande miara aquí:
http://pruevaplan.blogspot.com/2009/09/jdjyj.html
Por ahora, todo lo que he intentado al respecto es lo que está en esta entrada.
buen post
Hola JMiur todo me ha salido muy bien solo me falta un detalle como hago para que las imagenes de autor no se vean muy pegadas al nombre del autor y anonimos darle un poco de espacio para que no se vea imagenes y nombres muy pegado ¿?
PD:Agarre tu imagen para mientras luego la quitare :P Saludos Cordiales...
Ejemplo:
http://www.arenasgamerr.blogspot.com/2008/05/mundo-de-ingles-de-disney-en-descarga.html
Diego Arenas
Diego:
Podrías agregarle un margen en esta parte:
#comments-block .avatar-image-container.avatar-stock {
.............
margin-right:10px;
}
Pues ese valor de 10 pero puede ser cualquier otro. Eso, separará la imagen del nombre.
Perfecto :D pero quedo un detalle :( la imagen que uso no se corrio quedo igual y la de los que postean que tienen blog y imagen en su perfil de blog tampoco hecha un veo JMiur.... y veras ;)
http://www.arenasgamerr.blogspot.com/2008/05/mundo-de-ingles-de-disney-en-descarga.html
Diego Arenas
Tienes razón, el error fue mio. Te dije que colocaras esto:
#comments-block .avatar-image-container.avatar-stock {
.............
margin-right:10px;
}
pero, debería ser asi:
#comments-block .avatar-image-container {
.............
margin-right:10px;
}
elimina el anterior y coloca el margen en esa otra definción para que abarque a todas las alternativas.
Ahora si ya quedo JMiur muchisimas gracias por tomarte el tiempo y molestia de hecharme una mano saludos cordiales :D
Diego Arenas
Perfecto, Diego. Fue un placer.
Yo tengo dos problemas básicos con los avatares, después de modificar la plantilla. Primero es que en algún momento cambié el avatar y ahora en algunos comentarios me sale el avatar antiguo y en otros el nuevo (puedes verlo en este ejemplo http://lilleskvat.blogspot.com/2008/12/comentarios-sobre-mi-blog-en-general.html).
El segundo es que desde que he activado la opción me sale un icono al lado de los nombres que no sé cómo quitar.
Saludos y gracias!
Lille Skvat:
lo del avatar antigüo no es un error que hayas cometido, al parecer, Blogger hace eso y asocia el comentario al avatar que se tenía en el momento de publicarlo y no se actualiza.
¿El ícono al que te refieres es esta imagen?
Si es eso, es una imagen de fondo así que puedes elimianarla o modificarla:
#comments dl dt {
background:transparent url(http://www.blogblog.com/moto_son/commentbug.gif) no-repeat scroll left top;
font-style:italic;
font-weight:bold;
margin-top:35px;
padding:1px 0 0 18px;
}
Si quitas la línea de background, desaparecerá y quedará un espacio en blanco así que puedes mover el texto con el nombre a la izquierda cambiando ahí mismo el valor de padding; por ejemplo:
padding:1px 0 0 5px;
(el último valor es la separación izquierda)
Muchísimas gracias. Esa era la imagen que me molestaba y que he conseguido quitar con tu ayuda. ¡Siempre eres tan rápido contestando! :-)
Me alegra que funcionara, Lille :)
En mi blog los avatares funcionaban bien hasta ayer, ahora sólo se me ven cuadrados vacíos. :(
Ahora me aparecieron... creo. Esto de las imágenes de los perfiles esta un poco precario. :S
Heli: Al parecer hay un problema o error en Blogger.
Gracias, ya me parecía que estaba pasando algo más allá de mi blog :)
Heli: Conviene no tocar nada y esperar que pase la tormenta :D
JMiur, cómo estás !, siguiendo la línea de comentarios ... pasó la tormenta ? :). Había personalizado al extremo esa parte de la plantilla ... y antes de tocar algo ... te consulto. Un gran abrazo !, que pases una Felices Fiestas !
Jorge
Jorge: Desde aquel día hasta ahora, no he visto problemas así que, sería el momento oportuno para probarlo.
Gracias por el dato, ya modifiqué la plantilla (me resultó de gran ayuda tu artículo). Ahora, a esperar. Veremos qué sucede.-
Un gran abrazo, y Felices Fiestas !
Jorge
No creo que tengas problemas, Jorge. Todo parece estar bien.
JMiur: Creo que ya quedo solucionado lo de los smiley en los comentarios :) ahora bien vengo con otra duda? :) no se porque hace tiempo en mi blog los que tienen perfil en blogger pero sin imagen dejam comentarios pero en lugar de salir la imagen que tengo aparece la de blogger :O porque sera????
Ejemplo: http://arenasgamerr.blogspot.com/2009/10/ingles-sin-barreras-en-ratdvd.html?showComment=1262630257743
A ver si con estas dos definiciones mejora Diego:
esta ocultaria esa imagen por defecto
#comments-block .avatar-image-container.avatar-stock img {display:none;}
y esta es igual a la que tienes en #comments-block .avatar-image-container img {} pero se aplica al contenedor, de esa manera, ocultas la imagen de IMG y usas la imagen como fondo:
#comments-block .avatar-image-container {
background:#223344 url(http://1.bp.blogspot.com/_lNRUPTE-1Oo/S0QeZB9iOgI/AAAAAAAAAok/DlxuMFKEEWE/s400/Anonimo.png) no-repeat scroll 50% 50%;
border:1px solid #445566;
display:block;
float:none;
min-height:45px;
min-width:45px;
padding:2px;
}
Hola JMiur, tengo un problema no se porque la imagen de cuando es anónimo sale también cuando es usuario de blogger sin imagen que debería salir es el icono de blogger parecido al que tu tienes, miralo Aquí.
No sé como se resolvería eso porque la clase es la misma. Acá, está peusto tal como dice la entrada:
#comments-block .avatar-image-container.avatar-stock {
background: transparent url(imagen_ANONIMO) no-repeat scroll 50% 50%;
}
#comments-block .avatar-image-container img {
background: transparent url(imagen_BLOGGER) no-repeat scroll 50% 50%;
}
Hola ya arregle algo solo algo esta pasando y es que no esta bloqueando el icono de 16x16 que pone blogger por defecto si no que lo esta es estirando a 45x45 y entonces se ve distorcionado miralo aqui.
http://pruevaplan.blogspot.com/2009/09/aio-internet-2009.html
Lo que veo es esta imagen:
http://1.bp.blogspot.com/_2GzMzzEvC90/S3i_V4GPuAI/AAAAAAAABLU/GgDa-f3n-4c/s320/Blogger2.png
Hola Jorge
Sabes si Blogger interpreta algún otro operador lógico distinto al == y al !=.
Es decir, se puede estructurar algúna condición de tal manera que pueda incluir un "y o un o lógico".
La cosa va por este lado:
Cuando quiero personalizar los avatares en los comentarios que dejo yo tengo un problema porque he cambiado un par de veces mi "firma" de blogger.
La idea sería, si es posible, hacer algo masomenos así:
(En pseudocógico)
SI autor = "Mi nombre 1" o "Mi nombre 2" o data:post.autor
IMPRIME Avatar Mio
SI NO
IMPRIME Otro Avatar
FIN SI
Algo de ese estilo, pues probe de estos 2 modos y no funcionaron:
<if data:comment.autor == "Mi nombre 1" || "Mi nombre 2" || data:post.autor>
y agrupando los "autores" entre paréntesis.
<if data:comment.autor == ("Mi nombre 1" || "Mi nombre 2" || data:post.autor)>
Se me ha convertido esto en un reto, aunque de igual manera en mi blog tengo todo estructurado de tal manera que los avatares se vean bien, lo que no me gusta es que en mis comentarios se me muestran 2 avatares y eso me esta comiendo un poquito de espacio.
De antemano de envio un saludo cordial desde Bogotá. :)
No que yo sepa pero, puedes probarlo y ver.
Hola de nuevo Jorge :)
Pues fijate que no, los únicos operadores lógicos que funcionan en blogger tal como mencionas son == y !=.
Seguramente algún otro operador nos podría ahorrar un poquito de trabajo de vez en cuanto, pero bueno, mientras tanto será trabajar así.
Igual, ya le logrado arreglar el problema que tenia con los avatares y ahora todo anda muy bien por mi blog.
Como siempre, un saludo cordial desde Bogotown Colombia. :D
Es lo que me imaginaba. No estaba seguro pero, me parece que alguna vez lo había intentado sin éxito. Efectivamente, es una pena porque ahorraría mucho código.
Excelente Blog, gracias por todo tiempo y trabajo.
Mis mas sinceras felicitaciones
Gtacias por el comentario, Akiles.
Hola JMiur tu blog esta excelente siempre lo reviso en busca de nuevos trucos, y esto de los avatar esta muy bueno, encontraste una manera sencilla de cambiar los avatar y sin pelearte con el codigo de la plantilla :), JMiur quiero preguntarte algo ya que anduve por todo tu blog y en internet y nunca pude encontrar lo que buscaba, trato de que el fondo de mis comentarios sea de 2 colores ejemplo(el primer comentario con fondo negro, el segundo con fondo blanco y así sucesivamente), algo como en tu blog, espero que me puedas ayudar porque la verdad ya no se donde buscar.
Gracias de antemano
Eso de alternar el color de los comentarios está explciado en esta entrada aunque hay que verl ocon cuidado porque si estás usando el nuevo sistema de comentarios con avatares, algo puede variar.
Mil gracias JMiur por tu ayuda, al fin logré conseguir los comentarios como los quería y ahora lo tengo funcionando en mi verdadero blog, aunque tenias razon con respecto a los avatares, pero con ayuda de otro post tuyo y una plantilla vieja que tenia guardada logré reconstruir el codigo de los comentarios, y ahora funciona al 100%, perdón por no responder antes pero cuando se está en esto de modificar la plantilla el tiempo pasa volando :), seguiré revisando una por una cada entrada del menú para ver si encuentro otros trucos interesantes.
Excelente blog.
Nos vemos :D
Perfecto, Jiraiya :D
Hola JMiur. Simpre ayudando un favor al hacer todo esto se me duplican las imagenes no se por que me puedes hechar una ayuda gracias.
http://marcahuasi-huarochiri-peru.blogspot.com/2010/08/como-llego-marcahuasi-primer-viaje.html
Tienes algún código duplicado dentro de la etiqueta DT de cada comentario pero, no sabría decirte cuál es porque eso no puede verse online. Si no lo llegas a ver, envíame la plantilal y me fijo; debe ser una duplciación o una condición errónea.
Si tenias razón encontre el codigo repetido
Gracias.
Ahora a cuadrarlo nomas.
Aunque no se ve el código que has agregado,de todas formas, si lo has encontrado, listo :D
Hola otra vez pidiéndote ayuda.
Por mas que lo he intentado no puedo mover la caja del avatar hacia la izquierda.
Gracias por tu respuestas.
http://marcahuasi-huarochiri-peru.blogspot.com/2010/08/como-llego-marcahuasi-primer-viaje.html
T_T:
Vas a tener que agregar una regla de estilo en tu CSS para eliminar el padding que tiene la clase esa por defecto: El valor actual de ese padding (lo pone Blogegr) es 45px así que si lo reduces o empiezas poniendo cero, se moverá a la izqueirda:
#comments .avatar-comment-indent .comment-author {
padding-left:0 !important;
}
Gracias funciono. :)
Ahora el nombre esta muy cerca como lo puedo centrar. Perdón por las molestias.
Probablemente, en la misma definición, podrías agregar el centrado:
#comments .avatar-comment-indent .comment-author {
padding-left:0 !important;
text-align:center;
}
No pude, el código era para centrarlo fue lo que hizo, se centro pero de toda la caja.
Debes dejar el ejemplo visible porque sino, es imposible. Insisto en que si colocas el centrado acá:
#comments .avatar-comment-indent .comment-author { }
o eventualmente acá:
#comments-block .comment-author { }
lo único que centras es el rectángulo que contiene el avatar, el nombre y el contador. Como el avatar el contador, flotan, lo único que se centra es el nombre.
Discúlpame si no me exprese bien. Lo que deseo hacer es poner el nombre un poco mas a la derecha y un poco mas abajo.
Gracias por la ayuda.
http://marcahuasi-huarochiri-peru.blogspot.com/2010/08/como-llego-marcahuasi-primer-viaje.html
Entonces lo que hay que hacer es otra cosa; no te queda más remedio que modificar levemente el código y luego agregarle CSS porque sino, no hay manera de separar cada uno de los sectores que componen esa parte (avatar, nombre, contador).
Deberías fijarte si ves este código o algo similar:
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
Si lo ves, todo eso lo colocas dentro de una etiqueta SPAN a la que le colocas una clase con cualquier nombre, por ejemplo:
<span class='autorcomentario'>
....... aqui todo lo anterior .......
</span>
y ahora si, con eso, agregas la regla de estilo nueva:
.autorcomentario {
padding-left: VALORpx;
}
Da lo mismo usar padding que margin y puedes moverlo a la izquierda o a la derecha pero no hacia abajo. Si quieres moverlo hacia abajo, debes usar otra propiedad y verificarlo en los diferentes navegadores:
line-height: 50px;
GRacias quedo perfecto. :D
Hola JMiur primero queria agredecerte x tu magnifico blog, pero yo tube un problema con este tutorial todo me funciono de maravilla gracias a ti, pero resulta q ahora no se como centrar la seccion del comentario con la pagina de arriba, xq antes el avatar del comentario me aparecia a lado del comentario y no logro quitar ese espacio para q se vea centrado el comentario con el body de toda la pagina espero puedas ayudarme aqui dejo el link del comentario q me refiero
http://www.themovieworld.net/2010/12/grown-ups-1080p-2010.html
Jxandergaray:
Sobrescribe las definiciones de Blogger agregando esto:
#comments-block.avatar-comment-indent {margin-left: 0 !important;}
por defecto, tienen un margen de 45 pixeles.
Luego, modifica el padding de esta parte:
#comments-block {
.......
padding: 10px 10px 10px 0;
}
Creo que con eso, resolverías el problema.
JMiur arregle el problema de la imagen pero resulta q el avatar del comentario sale del cuadro de comentario, me gustaria mucho dejar el avatar dentro del comentario, espero puedas ayudarme, anticipadamente muchas gracias
Primero que nada, elimina dos líneas del CSS que impiden que se apliquen algunas de las propiedades que has agregado en la plantilla.
Dicen:
<!-- Paginar Blogger -->
y
<!-- Fin Paginar Blogger -->
Si son comentarios, debes usar esta sintaxis:
/* Paginar Blogger */
y
/* Fin Paginar Blogger */
como me dijistes JMiur quite:
y
y ya me queda a la misma altura los comentarios y el body de la pagina :D
lo unico que desaparecieron los avatar :(
pero ya hice lo primero q me dijistes muchas gracias JMiur
Jxandergaray:
Tenemos que ir por partes y, aunque no l ocrea, ahora vamos mejor :D
Ahora, cambia un poco las propeidades de esta parte:
#comments-block .avatar-image-container {
...........
}
En lugar de float: none; coloca float: left;
además, agrega: position: static;
Deberías ver algo como esto
JMiur
hice los pasos q me indicastes, y pues
definitivamente me salio tal y cual lo pusistes
en la imagen :D buenisimo
Perfecto. Creo que con eso ya podrás manipular el contenido sin problemas :D
Muchas gracias JMiur, solo una ultima cuestion espero no incomodarte, pero quisiera saber como soluciono q en mi avatar detras del mismo sale el avatar de los usuarios anonimos y en el mismo avatar mio sale otro cuadro color blanco alrededor de el avatar, espero puedas ayudarme con esto t lo agredecere mucho :D
Sí, ya veo. Es curioso, nunca lo había notado.
En este momento, no se me ocurre otra cosa que usar un avatar que no sea transparente como es el png que tienes ya que, en realidad, allí hay dos imágenes superpuestas.
Hola, JMiur segui los pasos al pie de la letra, pero la imagen me queda muy pegada al nombre del autor, que puedo hacer para solucionarlo?
Y como podria hacer que aparezcan los avatares con el tamaño que viene por defecto?
Espero no causar molestias :D
¿Tienes un ejemplo que pueda verse? Se trata de agregarle un padding a algo pero debería bver el ejemplo concreto para decirte dónde.
Hola Jmuir
Me funcionó en mi blog de prueba, pero el tedo del comentario me sale muy pegado a la imagen... ¿como puedo arregarlo?
Gracias
Pedro
Agrégale:
#comments-block .avatar-image-container {margin-right:10px;}
o cualquier valor.
Hola JMiur como has estado? espero que bien ;) mira tengo un problema con mi avatar en los comentarios no se visualiza esto a que se debe?
Mi blog
http://arenasgamerr.blogspot.com/2009/10/ingles-sin-barreras-en-ratdvd.html
Pués de eso no puedo decirte nada. El blog está bien, el código no tiene errores pero, al parecer, Blogger no envia tu avatar aunque existe y es el que se ve acá mismo. Puede ser un problema temporarl ya que estos días, el servicio tiene problemas surtidos.
Para aumentar el tamaño donde pongo el código:
#comments-block .avatar-image-container img {min-height: 50px; min-width: 50px;}
Cualquier definición de CSS la debes colocar dentro de <b:skin> ... </b:skin> o entre etiquetas <style> ... </style>
Hola JMiur me encanta tu blog, siempre lo consulto para agregarle cositas al mio.
tengo un problema, esta semana me decidí a modificar los comentarios por que se veían horribles le puse un recuadro al fondo de cada comentario y bordes arriba y abajo. e incluso una imagen para los comentarios anónimos. ubique todo y quedo fantástico. pero extrañamente, luego de hacer unos cambios todo se des configuro, los cambios fueron: modificar el formato de hora y fecha y agregar un mensaje para el formulario de comentarios. nada del otro mundo. ahora todos los comentarios se ven estándar, con la fecha de publicación en ingles y por mas que agrego comandos para modificar el comments-block nada se modifica.
Cual crees que pueda ser el problema? mi blog es elportaldemilo.blogspot.com
Un saludo Milo.
Los veo normales, Milo.
Hola JMmiur
Encontré el problema, antes había activado un feed para conectar mi blog con una página en facebook, utilice RSSgraffiti, aunque también tenía activado desde antes, twitterfeed para conectarlo con mi cuenta personal de facebook. pero el problema surjio justo despues de RSSgraffiti.
El blog funciona bien si tengo en configuración todos los feeds desactivados. Elimine la pagina de facebook, borre las aplicaciones de las cuentas de facebook, reactive el feed del blog esperando ver un cambio pero aun asi el virus vuelve: desde mi computador los comentarios se ven ese formato raro y desde otro equipo comienza a re-direccionar a otra pagina que no existe.
que puedo hacer al respecto, no puedo dejar el feed desactivado porque me interesa que los lectores puedan suscribirse y que mi blog aparezca en google.
elportaldemilo.blogspot.com <-- lo deje con el feed desactivado y funciona bien.
pruebasdemilo.blogspot.com <-- tiene el feed activado y por ende el virus que me redirecciona la pagina.
Gracias. Un saludo, Milo.
Disculpa molestar, para que veas el problema tienes que ver una entrada del blog de pruebas no la pagina principal.
Eso se ve asi poque está funcioanndo el nuevo sistema de comentarios anidados y las propiedades a agregar son diferentes a las que había: 1 | 2 | 3
Entiendo, Muchas Gracias!
Hola JMiur me pregunto como se podrá eliminar el enlace junto al toolip del avatar, busco y busco y nada. No encuentro un expr:title en mi plantilla para hallar la solución, es raro, quizás pueda con CSS, pero elimino todo el avatares ya que le cree una clase basándome en tu entrada la clase junto al "a" con un display none, tampoco, resulta.
Agradecería mucho tu ayuda :D, Gracias y saludos!
No estoy seguro de cuáles son los tooltips a los que te refieres pero, imagino que son los que están en el atributo title.
Si es así, hay varias etiquetas en los comentarios que no pueden editarse y que Blogger coloca automáticamente, creando el HTML. El nombre es editable porque es un enlace visible pero, la imagen del avatar no porque la coloca Blogger con un código <data:comment.authorAvatarImage/> o similar.
Entonces no se puede lastima :(
Muchas gracias, lo acabo de poner en el blog, ahora, los comentarios anónimos y sin imagen en el perfil ya me salen con una imagen
Saludos
JMiur, ¿Y si quiero que todo avatar de mi blog se vea igual? O sea, "imponer" uno a todo el que comente. Ya he conseguido que el fondo/base de todo avatar sea el mismo (esto se ve cuando se carga la página) así que supongo que sustituirlo/hacer que el de cada usuario no se cargue, no debería ser tan difícil.
Imagino que si en esta regla hay una imagen de fondo:
#comments-block .avatar-image-container {}
y en:
#comments .avatar-image-container img {}
colocas display: none; o visibility: hidden; n se verá la imagen del avatar sino la imagen de fondo.
Pues sí va, pero mira.
Hay algún tipo de margen que corta la imagen, y llevo un buen rato buscando y no sé qué puede ser. De paso, también me he puesto a darle borde a los avatares, pero pasa lo mismo, un algo invisible lo corta (por la izquierda y abajo). Que por cierto, ya que estamos, también quería desde hace mucho alargar el borde que separa los comentarios (como si conseguí en la derecha), pero nada, mismo problema: Un margen invisible lo corta/tapa todo (de 30px, btw)... ¿Cómo lo arreglo <:'C?
Tendrías que mostrar el ejemplo en tu blog porque, tal como están definidas esas reglas, no debería verse así ya que se trata de un elemento de bloque que está dimensionado:
#comments .avatar-image-container {
background: url(laimagen) no-repeat 0 0 transparent;
height: 36px;
width: 36px;
}
Ya he arreglado lo de los avatares impuestos, y de la mejor forma posible, además... ¡Gracias!
Estando eso zanjado, vuelvo a lo del muro invisible infernal. Así es como están las cosas en mi blog. No sé porque pasa, pero corta tanto el borde de los avatares como el borde que separa los comentarios (el cual quiero que ocupe todo. Antes en la derecha tampoco llegaba, pero lo arreglé poniendo "margin-right: -30px;" en "#comments .comment-author"... sin embargo, eso no funciona en la izquierda por el mentado muro invisible infernal). Y bueno, lo demás lo podrás ver tu.
Lo que ocurre es que toda esa sección posee márgenes y paddings diversos y además, las etiquetas de los comentarios también poseen propiedades por defecto de ese tipo y por lo tanto, para re-armarlo deberás sobrescribirlas, incluso, agregando !important en algunas de ellas porque sino, no tendrán efecto alguno.
Un ejemplo para que pruebes:
#comments-block.avatar-comment-indent {margin-left: 0 !important;}
#comments-block .avatar-image-container {margin-right: 10px;position: static;}
#comments .comment-author {
border-top: 1px solid #2A3D4F;
font-size: 13px;
margin-left: -30px !important;
margin-right: -30px !important;
padding-left: 30px !important;
padding-top: 17px !important;
}
Pues lo he puesto tal cual y... ¡Se junta se junta! ...Pero.
Oh, y el borde no va. Pero da igual, tampoco me importaba tanto eso... ¡Otra consulta! ¿Como puedo quitar ese molesto icono, la B de Blogger, de los comentarios? Tal como lo tengo ahora todo va bonito, pero eso se ve y prefiero removerlo a hacerlo transparente (que puedo)... ¿Cómo? =0
No sá cuál es el pero ya que no sé qué quieres hacer o cuál es el resultado que quieres obtener. De ahí en más sólo debes ajustar los detalles, sean cuales sean.
Oh, perdón por no concretar. Me refiero a esto.
O sea, con el código que has puesto se junta el borde, pero el texto se desplaza indeseablemente. Sería genial arreglar ese pequeño inconveniente.
Oh, y supongo que me basta con que el dichoso avatar no se vea (me molestaba porque enlazaba, pero bueh, me conformo me conformo)
Y ya poco más que decir, que muchas gracias por responderme y ayudarme, has sido de gran ayuda.
Como dije, todos esos detalles deberás modificarnos uno por uno colocando las propiedades y luego, probando in-situ.
Por ejemplo, es probable que deberá agregar esto:
.comment-body {clear: both;}
No, eso no va... Pero probando hallé una manera de conseguir que se junte el borde. Tan solo añadí margin-left: -75px !important; a #comments .comment-author y... bualá! Pero hay dos problemas: Este y que, misteriosamente, cuando aplico el margen a la plantilla, los avatares se muestran un píxel más abajo (y eso significa que se ve el avatar de fondo en vez del borde del avatar, y queda mal -si te das cuenta, eso sí. Oh, y sí, conseguí que se vea bien sin el margen!-)
Así que se me ocurre que para arreglar (o sea, que el nombre del autor/texto se vea donde debe) habría que añadir un .comment-author-text margin-left: 0px !important o algo así. Pero aquí viene un problema mayor: Yo me pongo a probar como el que más, pero por mucho que he gugleado no he encontrado una guía o lista de las categorías (o comosellamen) que puedo utilizar. Así que como ve, no tengo más remedio que acudir repetidamente a usted. Que por cierto, otra vez, muchas gracias por su ayuda!
Para terminar, un par de dudas nuevas que me han surgido:
1.-¿Se puede modificar/personalizar el iconito de suprimir comentario?
...La papelerita, vamos.
2.-Sobre el icono de lápiz que sale al lado del autor de la entrada, en los comenatrios... ¡No me sale! En su día lo borré por alguna razón que no recuerdo, y ahora me veo incapaz de restaurarlo... Vi este y otros artículos sobre el tema, pero ninguno me sirvió. Solo se me ocurre que haya borrado algo de la plantilla expandida que no debía... pero a saber.
3.-¡¿Se puede personalizar el mensajillo ese de "Introduce tu comentario"?! Aquí en Vagabundia se puede leer "Escribe tu respuesta"... ¿CÓMO? Deduzco que se debe a que usas "español latino" y viene por defecto así o algo. Pero espero que no!
Pues eso.
Si colocas un margen negativo en el nombre del comentarista, ocurrirá eso, estás desplazando ese enlace hacia la izquierda y poniéndolo debajo del avatar.
Como te dije, todo eso debe estar online para poder responder algo ya que el CSS no es abstracto sino que depende del contexto.
Bueno, pues te lo dejo online.
Sobre lo que decía del píxel, resulta que todo el contenido se sube 1 píxel si se va a la dirección de un permalink (???). Puedes comprobarlo aquí. Donde más se nota es en el border-top de los avatares, los pageadores del final (se cortan por un border mágico que aparece) y al final de la columna derecha, que se "despega" del footer.
No es por imperar, pero: ¿Y mis otras 3 dudas?
Si estás usando un margen negativo par desplazar todo el bloque, necesitarás un valor inverso para volver a ponerlo en su lugar:
#comments .comment-author { padding-left: 75px !important; }
En cuanto a ese pixel, no sé a que te refieres; no veo que los íconos de la navegación se muestren cortados. Dos tienen 20 pixeles de alto y el del centro 16.
El ícono de eliminar puede cambairse; es el código indicado como:
<span class='delete-comment-icon'>
puede usarse una clase y colocar una imagen de fondo que sobrescriba la imagen original.
El ícono de edicion tiene este código y puede agregarse en cualquier parte:
<b:include data='post' name='postQuickEdit'/>
El texto que se ve en el textarea del formulario no puede modificarse ya que es un iframe. Probablemente, las variantes se deban al idioma seleccionado en la cuenta del blog.
Fu-Fu-Fu-Funciona~~!! DIOS, llevaba desde el primer día queriendo que se vieran así, y hoy ya... snif snif Mushass grashiass snif snif
Lo he comprobado y parece ser que solo pasa en Chrome (la versión que tengo en mis ordenadores, por lo menos)
Hecho! (en mi plantilla resulta que viene con la url del icono original, así que solo he tenido que reemplazarla por la mía... LUCKY LUCKY~~)
Ay, no me refiero a ese. Me refiero al que sale al lado del autor de una entrada, el lapicito ese redondo que incluyeron con los comentarios anidados. Y que no me sale, sin importar que pusiera el css que lo hace aparecer. Por eso decía eso de que debía haber borrado algo del código expandido. Ni idea oye.
Ya veo. Una pena (eso se debería poder editar, leñe)
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...