{TUTORIAL JS} Colocar Online/Offline en perfiles

Colocar Online/Offline en perfiles

Preview:

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');
});