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.
Última modificación: 1 Dec, 2012, 8:36 pm por 1s44c.
(30 Nov, 2012, 9:50 am)papi escribió: Muy buena modificacion, Juliens. Habrá que probarla
Esta ya la puse en Skylium papi, solo que ahí fue Dark quien puso el CSS que ahí es diferente al que pongo aquí en el tuto
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
