{TUTORIAL JS} Colocar Online/Offline en perfiles

por **Mikae** el Sáb Feb 20, 2016 5:37 pm

Colocar Online/Offline en perfiles

Nombre del tutorial: Colocar Online/Offline en perfiles
Dificultad: Intermedia
Tiempo de lectura: 10 minutos.
Creador del tutorial: Mikae

Bases y Recordatorios

Otro tutorial más (?) Esto solo fue más que un pedido en un foro de códigos, y lo comparto en diferentes foros en los que me encuentro, para hacer el tutorial, haremos uso de Templates, JS, y CSS, no es nada complicado. Esto será automático, al usuario que este online aparecerá automáticamente debajo o encima de su avatar.

Preview:

Manos a la obra

Primeros nos vamos a los templates, solo añadiremos una etiqueta simple, el cual es el contenedor de la caja donde irá el online/offline. Yo en este caso use div class

Código:: [code]<div class="holu"></div>[/code]

PA → Visualización → Templates → General → Buscamos en la lista de templates: viewtopic_body → Le damos a

Una vez dentro no se mareen (?) van al buscador que aparece y colocan

Código:: <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">

Y presionan buscar, debajo de ese código que encuentres le vamos a colocar nuestro contenedor:

Código:: <div class="holu"></div>

Esto hará que aparezca arriba del avatar, Otra opción: si lo quieres colocar debajo, buscas

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

y lo colocas debajo. Una vez colocado le damos registrar y vamos a la lista de templates de nuevo, apretando este icon

Sigamos con nuestro código ya armado, vamos al horrible JS, darle en "Temas" al registrar el JS

Código:: jQuery(document).ready(function(){ jQuery(".holu").append('<div class="holo">Offline</div>'); jQuery('.online .holu .holo').text('Online'); });

Este es el que yo ya tengo armado, explicaré sus funciones
La primera etiqueta, enmarca al div de contenedor que tenemos, dentro del append, vamos a meter la cajita que será del Offline

Código:: jQuery(".holu").append('<div class="holo">Offline</div>');

La segunda etiqueta, agrupa el css online, nuestro contenedor y el div que usamos para el onffline, no es necesario agregar div individual al Online como lo hicimos con Offline, ya que las propiedades del div "holo" afectarán a la cajita del Online y Offline

Código:: jQuery('.online .holu .holo').text('Online');

Ahora sigamos con el css, no es necesario crear una caja para el div holu en css, ya que este afectará en general y podría causar problemas. Yo en este caso solo haré uso en el css de la etiqueta "holo"

Código:: .holo { Propiedades aquí }

El mío quedo así:

Código:: .holo { background: #fff; margin: 10px; padding: 5px; width: 165px; text-align: center; text-transform: uppercase; }

Y eso es todo, agrupo todos los codes aquí al final:

Spoiler:

CSS

Código:: .holo { background: #fff; margin: 10px; padding: 5px; width: 165px; text-align: center; text-transform: uppercase; }

HTML

Código:: <div class="holu"></div>

JS

Código:: jQuery(document).ready(function(){ jQuery(".holu").append('<div class="holo">Offline</div>'); jQuery('.online .holu .holo').text('Online'); });