Pero vamos a explicar un par de truquillos usando CSS que no sólo nos facilitan bastante la tarea, sino que también nos permitirán volver atrás cuando queramos, borrando sólo una única línea. La misma que ahora vamos a insertar en nuestro código para arreglar esto.
La primera opción es aplicar un fondo con el dibujo que queremos y que se aplicará en todos los casos. El truco está en que cuando existe avatar, este se mostrará por encima del fondo y no se apreciará que hay otra imagen debajo. Estamos hablando de CSS, así que esto habría que meterlo entre las dos etiquetas SKIN.
.comments .avatar-image-container {
background: url(http://4.bp.blogspot.com/-CCyY8H1_br0/Tx3wxWoTvmI/AAAAAAAABss/_SquuwCipG8/s1600/anonimo.jpg) no-repeat 50% 50%;
}
background: url(http://4.bp.blogspot.com/-CCyY8H1_br0/Tx3wxWoTvmI/AAAAAAAABss/_SquuwCipG8/s1600/anonimo.jpg) no-repeat 50% 50%;
}
Este sistema sólo tiene un problema y es cuando el usuario utiliza una imagen con transparencia. En este caso, el avatar que usamos de fondo se verá a través de las zonas transparentes.
Segunda opción. Para solucionar eso echaremos mano de los selectores de atributos, que nos permiten filtrar dentro de una determinada clase, aquellos elementos con un característica peculiar.
Y esta característica en los comentarios anónimos es precisamente la imagen sin contenido que Blogger les aplica y cuya dirección es http://img1.blogblog.com/img/blank.gif. Si pincháis en el enlace veréis... nada, pues eso es lo que contiene la imagen. Bueno, en honor a la verdad es una imagen casi imperceptible de 1x1 px.
Teniendo en cuenta esto, la otra alternativa a mi parecer más completa, sería esta:
.avatar-image-container img[src$="img1.blogblog.com/img/blank.gif"] {
background:url(http://4.bp.blogspot.com/-CCyY8H1_br0/Tx3wxWoTvmI/AAAAAAAABss/_SquuwCipG8/s1600/anonimo.jpg) no-repeat 50% 50%;
}
background:url(http://4.bp.blogspot.com/-CCyY8H1_br0/Tx3wxWoTvmI/AAAAAAAABss/_SquuwCipG8/s1600/anonimo.jpg) no-repeat 50% 50%;
}
Para los curiosos, lo que hace esto es buscar en todas las clases .avatar-image-container que haya en nuestra página y comprobar si la imagen que incluyen termina en la cadena img1.blogblog.com/img/blank.gif.
A las que cumplen con esa condición se les aplica un fondo que es el dibujo de nuestro anónimo amigo.
En este segundo sistema, el problema reside en que los navegadores más antiguos no reconocen los selectores de este tipo, pero afortunadamente, cada vez quedan menos.
¿Vemos otro post al azar por si le encuentras utilidad?
Una pregunta Oloman¿?
ResponderSuprimirEstoy utilizando el codigo para numerar comentarios con css este, y cada vez que hay un nuevo comentario a parece el numero 1 y cuando hay replies, cambia a 1.a y asi sucesivamente, pero cuando pongo otro comentario aparece la lista así:
1
1.a
1.b
1.c
1
1.a
y se repite de nuevo...
AYUDA
como lo soluciono...
Sergio, he mirado aquí y todo va bien. Supongo que ya está solucionado. Agradecería que me lo hicieráis saber y así no tengo que andar mirando para nada. Gracias.
SuprimirOloman, te doy otra regla CSS. Hay gente que comenta con este avatar, por defecto de blogger.
ResponderSuprimirLa regla sería esta:
.comment .avatar-image-container img[src="http://img2.blogblog.com/img/b16-rounded.gif"]
Es verdad. No recuerdo en qué casos sale pero es otra opción que nos permitiría sustituir también eso. Lo que ocurre es que sería algo más complicado porque esa imagen no es transparente como la otra y cuando pusiéramos un fondo como aquí se ha explicado, esa B seguiría viéndose por encima.
SuprimirPara solucionarlo se me ocurre que se podría usar un CONTENT posicionado con ABSOLUTE por encima del contenido original (el logo de Blogger).
Gracias por el apunte que supongo sirve para todos.
Yo lo que he hecho es usar: visibility:hidden y solucionado.
SuprimirAhora me perdí. Si a esta segunda imagen le pones un hidden, no se ve nada ¿no? Ni el background ni la B ¿?
Suprimirsí, con visivility:hidden la imagen en sí no es visible, pero ocupa espacio, así que el contenedor sí, por lo que el fondo se ve.
SuprimirEs cierto, se me fue la perola.
SuprimirSi ocultas la imagen con visibility:hidden, no se ve el fondo de la imagen, pero si el del contenedor.
Yo lo que haría sería poner un fondo a las imágenes normales para evitar que se vea el fondo del contenedor si son transparentes, y ocultar esas dos para que se vea el fondo del contenedor.
Creo que el resultado sería el mismo. Si las imágenes normales tienen un fondo, el avatar con transparencia dejaría ver detras ese fondo. No te comas el coco que el logo de Blogger no es tan grave como un hueco. De todas formas, creo que si lo que quieres es que no se vea la B, puede que ocultar esa imagen y poner un fondo al contenedor puede funcionar. Es casi lo mismo que has dicho ;)
Suprimir.avatar-image-container img[src="http://img2.blogblog.com/img/b16-rounded.gif"] {display:none;}
.avatar-image-container {BACKGROUND}
Me acabo de fijar en algo olo...
ResponderSuprimir¿Cómo has hecho para que los links de los comentarios sean interactivos al hacer clic? Los mios solo cambian de color al pasar el cursor pero si hago clic no funcionan.
Gracias.
Usando la clase a:active
SuprimirLo siento oloman si te quito trabajo ;)
es como si me hubieran hablado en chino jajaja
Suprimir¿Que es una clase? ¿Que hago con esa clase?
xDD
No problemo Emilio. Se agradece una ayuda. Lo que pasa es que no sé si es eso lo que pregunta William porque mis enlaces sólo tienen el hover. De hecho pensaba que se refería a que los enlaces de Responder no le funcionaban como les pasaba a otros, pero tampoco es eso porque en su blog pitan bien.
Suprimir¿A qué te refieres entonces William?
Oloman. Hola soy Alex, y pues ya tiene mucho tiempo que he visitado este sitio, pero por lo regular no leo ninguna entrada, pero ahora que me percato, que eres un genio, te sigo en twitter y facebook, para estar al tanto.
ResponderSuprimirFelicidades con el sitio.
Bueno, gracias. Pero estoy lejos de ser un genio. Como mucho alguien muy observador, con ganas de aprender y muy cabezota cuando algo no funciona :)
SuprimirTwT ha dejado de salir la imagen de los cometarios anónimos
ResponderSuprimirSí, este truco ya no sirve. Hace un par de días Blogger volvió a cambiar el código y ahora es más complicado cambiarlo sólo con CSS. Tanto que no he dado con la manera :s
SuprimirTwT eso me imagine, bueno ni modo, habra que esperar :D
Suprimir