Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Somos un foro de soporte en español que no tiene publicidad y tiene muchas cosas gratuitas aportadas por la comunidad, contribuye con el foro para poder así obtener alguna membresía de manera gratuita.
SoporteMyBB tiene un total de
1124 temas de soporte.
0 quedan aún por resolver, 244 han quedado obsoletos y 880 han sido resueltos.
Aún no tienes una cuenta, regístrate es gratis.

Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Avatar online offline away
 calamar
Usuarios
calamar
Estado:
 
0
0
0
0
7 March 2014, 13:08
#1
0
AUTOR ; Juliens SoporteMyBB.

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:

postaway

Ahora se van a >>posbit_offline y cambian todo por:

postoffline

El tercer paso es ir a >>posbit_online y cambiar todo por:

postonline

Como cuarto paso vamos a posbit y a posbit clasicc y buscamos:

{$post['onlinestatus']}

Borramos eso y buscamos:

{$post['useravatar']}

Cambiamos esa variable por:

<div class="{$post['onlinestatus']}">{$post['useravatar']}</div>

Ahora vamos a la parte divertida Gran sonrisa
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:

.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;
}

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.
 


Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Banderas en movimiento .gif Joseahfer 20 13,064 6 January 2018, 09:39
Último mensaje: mario
  [Tutorial] Página de error 404 Joseahfer 15 5,658 22 July 2016, 15:04
Último mensaje: Whiteneo
  [Tutorial] Avatar en index y forumdisplay Joseahfer 22 5,321 7 September 2014, 00:54
Último mensaje: Whiteneo
  [Tutorial] Diferentes colores para los thead Brown 4 1,681 27 May 2014, 17:33
Último mensaje: Brown
  [Tutorial] Tooltips animados con css3 Brown 2 1,484 23 May 2014, 05:26
Último mensaje: Brown
  [Tutorial] Montar un foro Localhost con EasyPHP Brown 16 3,578 19 May 2014, 23:29
Último mensaje: Whiteneo
  [Tutorial] Poner sombras a los enlaces calamar 5 1,507 19 May 2014, 23:16
Último mensaje: Whiteneo
Información [Tutorial]Añadir una nueva pestaña al header Brown 3 1,711 18 May 2014, 02:07
Último mensaje: Whiteneo
Información [TUTORIAL] Añadir Font Awesome a tu Foro Jean Pierre 6 3,285 12 May 2014, 22:46
Último mensaje: storm
Gran sonrisa [TUTORIAL] Script de Mensajes Aleatorios Jean Pierre 10 3,054 9 April 2014, 23:28
Último mensaje: DarkEternity



Usuarios navegando en este tema: 1 invitado(s)