Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL JS} Colocar Online/Offline en perfiles

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL JS} Colocar Online/Offline en perfiles

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


mikae © 2016
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.