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
![[Imagen: JZLGa.png]](http://i.imgur.com/JZLGa.png)
![[Imagen: 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:
Código:
postawayAhora se van a >>posbit_offline y cambian todo por:
Código:
postofflineEl tercer paso es ir a >>posbit_online y cambiar todo por:
Código:
postonlineComo cuarto paso vamos a posbit y a posbit clasicc y buscamos:
Código:
{$post['onlinestatus']}Borramos eso y buscamos:
Código:
{$post['useravatar']}Cambiamos esa variable por:
Código:
<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:
Código:
.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
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.
Equipo de Desarrollo de Skylium Network
Última modificación: 1 Dec, 2012, 8:36 pm por 1s44c.
