Ú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
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
Página 1 de 1. • Comparte •
{TUTORIAL JS} Colocar Online/Offline en perfiles
Colocar Online/Offline en perfiles
Nombre del tutorial: Colocar Online/Offline en perfiles
Dificultad: Intermedia
Tiempo de lectura: 10 minutos.
Creador del tutorial: Mikae
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}">
- Código:
<div class="holu"></div>
- Código:
{postrow.displayed.POSTER_AVATAR}

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');
});
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
Mikae- Mensajes : 275
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.