Ú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} Posicionar "Últimos Temas"

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL JS} Posicionar "Últimos Temas"

Mensaje por Mikae el Miér Jul 08, 2015 12:43 pm

Últimos temas
Nombre del tutorial: Posicionar últimos temas.
Dificultad: Intermedia.
Tiempo de lectura: 10 minutos.
Creador del tutorial: Mikae
Si está dedicado a alguien en particular: Usuarios

Bases y Recordatorios

¿Han visto que los últimos temas aparecen en un tablón, o en otro lugar que no es un módulo? Pues en está ocasión les enseñare como lograr ese pequeño efecto. Una muestra de ello en nuestro tablón en el header. Cuaqluier duda postearla aquí mismo.


Manos a la obra

Obligatorio: Deben tener los wigdets activados, incluido el de últimos temas.

HTML


Primero armamos la estructura HTML, trabajaremos tanto el HTML, CSS & finalizando el Javascript.

La base de HTML debe ser :
Código:
<marquee class="recentpost"></marquee>
No colocamos nada adentro. Si queremos modificar el tiempo, distancia, etc de los ultimos temas, añadimos esto dentro:
Código:
<marquee class="recentpost" direction="up" scrolldelay="1" scrollamount="1" onmouseout="this.start()" style="margin-left: 2px; margin-bottom: 0px; width: 180px;" onmouseover="this.stop()"></marquee>

Códigos a modificar libremente:
ection="up" la dirección de los mensajes
style="margin-left: 2px; margin-bottom: 0px; width: 180px;" Aquí edita los ultimos temas, width el ancho, height la altura, son modificables y puedes añadir lo que desees.

Este código HTML lo podemos colocar en cualquier de estas opciones:

  • Modulos
  • Anuncios
  • Mensaje del indice


CSS


Van a Visualización > Imágenes y Colores > Colores >  CSS Stylesheet

Añaden el siguiente código: (No es editable)

Código:
#left {
display: none;
}

JAVASCRIPT


Van a Visualización > Módulos > HTML & JAVASCRIPT > Gestión de los códigos Javascript > Crear nuevo JavaScript

Título: Últimos temas
Posición: En todas las páginas
Código:

Código:
$(function(){
    widget=$('#comments_scroll_div').html();
    $('.recentpost').html(widget);
});


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.