Avatar online offline away
Hace un tiempo estuve buscando como colocar un borde de color al avatar de usuario según este esté online u offline.
Pues solo había con un plugin que usaba cuatro imágenes, una para cada lado.
Seguro muchos saben como hacerlo, pero bueno, traigo una forma sencilla de hacerlo editando las plantillas y agregando unas cuantas líneas a nuestra hoja de estilos css.
Lo primero que deben de hacer es ir a ACP>>Estilos y Plantillas>>Plantillas>>Tu theme>>Caja del Mensaje>>postbit_away
Y cambian todo por:
Ahora se van a >>posbit_offline y cambian todo por:
El tercer paso es ir a >>posbit_online y cambiar todo por:
Como cuarto paso vamos a posbit y a posbit clasicc y buscamos:
Borramos eso y buscamos:
Cambiamos esa variable por:
Ahora vamos a la parte divertida xD
Nos dirigimos a ACP>>Estilos y Plantillas>>Tu theme>>global.css>>editar modo avanzado
Nos dirigimos al final de esa hoja de estilos y agregamos:
Capturas de como queda pero usando otro CSS, ya digo que es cuestión de jugar con el CSS
![[Image: JZLGa.png]](http://i.imgur.com/JZLGa.png)
![[Image: sfmpU.png]](http://i.imgur.com/sfmpU.png)
Lo demás ya es cuestión de que cada uno juegue con el css a su antojo y que, de ser necesario, agregue los prefijos para mozilla, chrome, opera.
Pues solo había con un plugin que usaba cuatro imágenes, una para cada lado.
Seguro muchos saben como hacerlo, pero bueno, traigo una forma sencilla de hacerlo editando las plantillas y agregando unas cuantas líneas a nuestra hoja de estilos css.
Lo primero que deben de hacer es ir a ACP>>Estilos y Plantillas>>Plantillas>>Tu theme>>Caja del Mensaje>>postbit_away
Y cambian todo por:
Code:
postawayAhora se van a >>posbit_offline y cambian todo por:
Code:
postofflineEl tercer paso es ir a >>posbit_online y cambiar todo por:
Code:
postonlineComo cuarto paso vamos a posbit y a posbit clasicc y buscamos:
Code:
{$post['onlinestatus']}Borramos eso y buscamos:
Code:
{$post['useravatar']}Cambiamos esa variable por:
Code:
<div class="{$post['onlinestatus']}">{$post['useravatar']}</div>Ahora vamos a la parte divertida xD
Nos dirigimos a ACP>>Estilos y Plantillas>>Tu theme>>global.css>>editar modo avanzado
Nos dirigimos al final de esa hoja de estilos y agregamos:
Code:
.postonline img {
border: 5px solid #069400;
border-radius:5px;
margin-top: 10px;
margin-bottom: 10px;
}
.postoffline img{
border: 5px solid #000;
border-radius:5px;
margin-top: 10px;
margin-bottom: 10px;
}
.postaway img{
border: 5px solid #FF6600;
border-radius:5px;
margin-top: 10px;
margin-bottom: 10px;
}Capturas de como queda pero usando otro CSS, ya digo que es cuestión de jugar con el CSS
![[Image: JZLGa.png]](http://i.imgur.com/JZLGa.png)
![[Image: sfmpU.png]](http://i.imgur.com/sfmpU.png)
Lo demás ya es cuestión de que cada uno juegue con el css a su antojo y que, de ser necesario, agregue los prefijos para mozilla, chrome, opera.
Muy buena modificacion, Juliens. Habrá que probarla
podrias poner imagenes para que el usuario se oriente sobre que es

Voy a ver de poner las imágenes que ahora ando medio ocupado.
Pero en esencia es los bordes del avatar como acá en mybb-es solo que con un color diferente según si está online offline o ausente
Pero en esencia es los bordes del avatar como acá en mybb-es solo que con un color diferente según si está online offline o ausente
Gracias por el aporte! la verdad es que esta muy bueno
y como quito eso que sale asi al lado del avatar
postonline , postoffline y eso D:
postonline , postoffline y eso D:
![[Image: PROMO-DOMINIO.png]](http://skyliumplus.com/wp-content/uploads/2012/07/PROMO-DOMINIO.png)