[MOD] Pulsaciones "Online" en el perfil

Pulsaciones en estado "Online"

Esta es una modificación muy sencilla, lo que hace es dar una visualización bastante llamativa cuando los miembros están conectados a su sitio web. Para usarlos en otras versiones de foros ForoActivo no creo que haya mucha diferencia con PunBB.

[MOD] Pulsaciones "Online" en el perfil T6GKz1d

Instalación:

Está de mas recordar que tienes que ser fundador del foro para tener acceso a los Templates y modificarlas. Sin mas, vamos a los siguientes pasos.

Ir al Panel de Administración - Visualización - Templates - General - viewtopic_body

Cuando estemos dentro del template vamos a buscar:

Código:: {postrow.displayed.ONLINE_IMG}

Y vamos a reemplazarlo por el siguiente código y guardar los cambios:

Código:: <span class="user-status{postrow.displayed.ONLINE_IMG_NEW}"> <span class="user-online"></span> </span>

El siguiente código CSS usted lo puede añadir en el mismo Template o bien en su hoja CSS Stylesheet:

Código:: <style> .is.online{position:relative;color:#7fb900;border:7px solid transparent;border-top-color:#7fb900;border-left-color:#7fb900;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;-khtml-border-top-left-radius:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;-khtml-border-top-right-radius:3px;border-top-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;-khtml-border-bottom-left-radius:3px;border-bottom-left-radius:3px;top:0px;left:-1px} .is.online{margin-top:0px;margin-left:1px;-webkit-border-radius:100%;-moz-border-radius:100%;-khtml-border-radius:100%;border-radius:100%;width:10px;height:10px;border-width:0!important} .is.online{z-index:10;transition:ease-out .1s} .is.online .cponline{border:10px solid #7fb900;background:0 0;-webkit-border-radius:40px;-moz-border-radius:40px;-khtml-border-radius:40px;border-radius:40px;height:40px;width:40px;animation:pulse 3s ease-out infinite;position:absolute;top:-26px;left:-22px;z-index:1;opacity:0} @-moz-keyframes pulse { 0%{-moz-transform:scale(0);opacity:0} 25%{-moz-transform:scale(0);opacity:.1} 50%{-moz-transform:scale(0.1);opacity:.3} 75%{-moz-transform:scale(0.5);opacity:.5} 100%{-moz-transform:scale(1);opacity:0} } @-webkit-keyframes pulse { 0%{-webkit-transform:scale(0);opacity:0} 25%{-webkit-transform:scale(0);opacity:.1} 50%{-webkit-transform:scale(0.1);opacity:.3} 75%{-webkit-transform:scale(0.5);opacity:.5} 100%{-webkit-transform:scale(1);opacity:0} } </style>

Y listo, a disfrutar de los cambios. Si gusta ya puede adaptarlo a los colores que use su comunidad en especifico, por defecto el color que le puse es verde.

Saludos.