Imagen de "Conectado" sobre el avatar

[SergioG]

Buenas!

Antes de nada aviso: PIJADA

No llevo mucho en el foro, pero hay algo en lo que me fijo cada vez que entro y es la cartela de “Conectado” que aparece sobre los avatares de los usuarios.

Actualmente está en una capa interior a las imágenes, de ese modo, las que ocupan el ancho permitido, no se terminan de ver correctamente.

Propongo un par de soluciones:

1- Dejarlo tal cual y obviar mi mensaje jejeje

2- Modificarlo: seguramente será poner un div por encima (ya que es un gif transparente) o aplicar el mismo estilo .online a otra capa, aunque veo que está como background-image así que no se si va a servir, igual hay que hacer algún otro cambio. Si en algún momento lo habéis puesto detrás de las imágenes porque tapa demasiado, he hecho una opción de un punto verde, que es más discreto pero cumple su función.

Si os animáis a hacerlo y necesitáis que saque algún gif o png con la bolita verde o cualquier otra cosa que se os ocurra, contad conmigo.

Saludos!!

[cvillajos]

Buenas!

Antes de nada aviso: PIJADA

No llevo mucho en el foro, pero hay algo en lo que me fijo cada vez que entro y es la cartela de “Conectado” que aparece sobre los avatares de los usuarios.

Actualmente está en una capa interior a las imágenes, de ese modo, las que ocupan el ancho permitido, no se terminan de ver correctamente.

Propongo un par de soluciones:

1- Dejarlo tal cual y obviar mi mensaje jejeje

2- Modificarlo: seguramente será poner un div por encima (ya que es un gif transparente) o aplicar el mismo estilo .online a otra capa, aunque veo que está como background-image así que no se si va a servir, igual hay que hacer algún otro cambio. Si en algún momento lo habéis puesto detrás de las imágenes porque tapa demasiado, he hecho una opción de un punto verde, que es más discreto pero cumple su función.

Si os animáis a hacerlo y necesitáis que saque algún gif o png con la bolita verde o cualquier otra cosa que se os ocurra, contad conmigo.

Saludos!!

También se le puede poner un 'z-index' superior por estilos CSS, para que quede por encima del avatar.¿No? (Siempre que la imagen sea transparente, claro).

Un saludo!!

[javigody]

A mi la idea del puntito verde me gusta mucho.

[BhEaN]

Buenas!

Gracias por el aviso/sugerencia/propuesta (no se cómo llamarlo, jejeje)...

Es cierto lo que comentas, de hecho ya lo sabía, pero la solución no es "trivial" porque como bien dices dicha imagen está configurada como "background" del tag que contiene el avatar en lugar de ser un <div> por encima del mismo (no se en qué pelotas estarían pensando los de phpBB)...

De nada sirve por lo tanto el z-index, ya que lo que habría que hacer es quitar esa imagen del background y colocarla en otra capa flotante cuya posición fuera absoluta (para que estuviera por encima del avatar) en la misma posición en la que empieza el avatar... pero como ya he comentado varias veces, phpBB está fatal hecho, y encima las nuevas versiones NO son compatibles con las anteriores, por lo que no podemos actualizar... sino que tendríamos que rehacer de cero la web en lo que a diseño, funcionalidades, etc. se refiere...

Así que si queremos solucionar esto ya no podemos contar con esta gente, tenemos que hacerlo nosotros... y al no ser un cambio "rápido" no se cuando podré mirarlo...

Saludos,

[SergioG]

A mi la idea del puntito verde me gusta mucho.

Gracias @javigody, a mi me da un poco igual una solución u otra, esa la hice porque me parecía más discreta y funcional.

Buenas!

Gracias por el aviso/sugerencia/propuesta (no se cómo llamarlo, jejeje)...

Es cierto lo que comentas, de hecho ya lo sabía, pero la solución no es "trivial" porque como bien dices dicha imagen está configurada como "background" del tag que contiene el avatar en lugar de ser un <div> por encima del mismo (no se en qué pelotas estarían pensando los de phpBB)...

De nada sirve por lo tanto el z-index, ya que lo que habría que hacer es quitar esa imagen del background y colocarla en otra capa flotante cuya posición fuera absoluta (para que estuviera por encima del avatar) en la misma posición en la que empieza el avatar... pero como ya he comentado varias veces, phpBB está fatal hecho, y encima las nuevas versiones NO son compatibles con las anteriores, por lo que no podemos actualizar... sino que tendríamos que rehacer de cero la web en lo que a diseño, funcionalidades, etc. se refiere...

Así que si queremos solucionar esto ya no podemos contar con esta gente, tenemos que hacerlo nosotros... y al no ser un cambio "rápido" no se cuando podré mirarlo...

Saludos,

Ok @BhEaN, si te animas a hacerlo en algún momento, yo saco un .png o un .gif de un circulito verde para los conectados a la medida que me digas y encantado, puedes contar conmigo

En cuanto a la versión de phpBB ni idea, por lo que habéis comentado en otras ocasiones es un poco faena que no sea compatible, pero igual no es tontería plantearse una fecha, hacer el cambio y luego ir incorporando funcionalidades poco a poco.

Al final mantenerse actualizado ya no sólo por temas de funcionalidad y visuales, si no por seguridad. Pero bueno como veáis, sólo que me da que en algún momento se va a tener que actualizar deprisa y corriendo y quizá sea peor. Pero bueno, tampoco ha pasado nada.

Gracias por el espacio para las sugerencias, saludos!!!

[cvillajos]

Jod****r... ya me habéis hecho tener que desempolvar mis apuntes de CSS

Otras opciones sin necesidad de desarrollo, únicamente con estilos e imagen de background:

Opción 1:

Avatar-OnLine-1.png

Opción 2:

Avatar-OnLine-2.png

Un saludo!!

[SergioG]

Jod****r... ya me habéis hecho tener que desempolvar mis apuntes de CSS

Otras opciones sin necesidad de desarrollo, únicamente con estilos e imagen de background:

Opción 1:

Avatar-OnLine-1.png

Opción 2:

Avatar-OnLine-2.png

Un saludo!!

Yeah @cvillajos!!!! Ese tab con la chuleta de https://www.w3schools.com/ jejeje

A mi las esquinas redondeadas de una forma tan exagerada no me molan mucho, sobre todo porque no todas las fotos de avatares ocupan el 100% del espacio, por ejemplo para la del compañero @CrAfTy (que se me ocurre ahora mismo) se le cortaría un cacho importante en proporción.

Yo creo que es “sencillo”, seguramente lo más complicado sea localizar el trozo del código donde insertarlo, supongo que si tenéis guardada alguna versión en local no será muy complicado buscando dentro del proyecto.

Para tirar, creo que pondría un div nuevo así, por ejemplo, después del tag “dl” del class profile:

<div class="online-v2" style="
position: absolute;
margin-left: 123px;
margin-top: 8px;
"><img src="https://cdn.shopify.com/s/files/1/0166/4148/t/40/assets/green_light_10.png?5264068037243078244"></div>

Y luego eliminar la clase que hay con la cartela actual y a correr.

Supongo que habrá formas más elegantes de hacerlo, pero para salir de paso puede valer.

Saludos!

[CrAfTy]

Aparezco porque se me menciona en un post y solo digo:

Dejad de dar trabajo a BhEaN, malditos porculeros!

[SergioG]

Aparezco porque se me menciona en un post y solo digo:

Dejad de dar trabajo a BhEaN, malditos porculeros!

Perdona @CrAfTy, pero es que me venías perfecto para ponerte como ejemplo

Y todo lo contrario, era por facilitar la tarea a @BhEaN por si en algún momento decide ponerse con ello

[CrAfTy]

Aparezco porque se me menciona en un post y solo digo:

Dejad de dar trabajo a BhEaN, malditos porculeros!

Perdona @CrAfTy, pero es que me venías perfecto para ponerte como ejemplo

Y todo lo contrario, era por facilitar la tarea a @BhEaN por si en algún momento decide ponerse con ello

Pobre @BhEaN