Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Descarga MyBB 1.8.12
SoporteMyBB tiene un total de 803 temas de soporte. 10 quedan aún por resolver, 151 han quedado obsoletos y 642 han sido resueltos.

Hola invitado, aún no tienes una cuenta? Regístrate gratis desde aqui !!! Como registrado podrás obtener puntos para adquirir los mejores plugins de nuestro sitio.
Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Creador del tema: eNvy[Tutorial] Index con sidebars colapsables + Cookies
Iniciado por: eNvy

 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 172
Gracias dados54Gracias recibidos174NacionalidadArgentina
16 Agosto 2014, 12:28 -
#1
8
Mejor respuesta del mensaje Index con sidebars colapsables + CookiesBueno... he visto que mucha pero mucha gente pregunta sobre ésto (No digo que aquí, pero mucha gente en general lo consulta) y terminan instalando plugins y demás cosas.

Personalmente trato de utilizar la menor cantidad de plugins posibles por diferentes motivos, así que aquí les va un mini (?) tutorial de cómo tener sus propios sidebars en el index, colapsables, y con la posibilidad de guardar los datos en una cookie, para que al ingresar nuevamente, quede guardada la configuración que ustedes deseen.

Antes que nada, aclaro que ésto es una recopilación de datos que obtuve navegando por MyBB.com, así que no me adjunto ningún tipo de crédito... Agradezcan al software libre ^^.

jQuery

En nuestra plantilla headerinclude, introduciremos el siguiente código:

No puedes ver estos contenidos como invitado

Voy a ir explicando por partes para que puedan comprender qué hace éste código, ya que seguramente deberán modificarlo según sus necesidades...

Las clases ".clickedbuttons" y ".buttons" serán las clases que utilizaremos para el botón de mostrar u ocultar nuestros sidebars.

La clase ".forums" es la que utilizaremos para agrandar o achicar nuestro foro. Aquí haremos un poquito de profundidad en el tema. Si observan con mucha atención, tanto en el comienzo, como en el final, a la clase ".forums" le asignamos un "width" (Ancho) de 984px (píxeles)... ésta medida es la que yo utilizo cuando diseño, ya que luego añado 20 píxeles de padding en total y obtengo una resolución de 1024px en total. Ésta medida deberá ser reemplazada por la medida de ancho que ustedes utilicen en su propio foro, y tengan en cuenta que ésta medida es la medida TOTAL cuando no hay sidebars visibles.

Ahora bien, en el centro de dicho código, veremos que nuestra clase ".forums" tiene un "width" (Ancho) de 724px (píxeles)... ésto se debe a que aquí, el código asigna dicho ancho AL MOSTRAR LOS SIDEBARS.

¿Porqué entonces utilizo ésta medida tan peculiar? Simple, si hacemos una simple resta (984 - 724) veremos que arroja como resultado un total de 260. Éstos 260 los separo en 10 y 250, ¿para qué? simple, dejo 10 píxeles de espacio entre nuestro foro y los sidebar, y luego, asigno un total de 250px (píxeles) a nuestros sidebars. Tengan en cuenta ésto, ya que aquí deberán colocar el ancho de su foro al mostrar dichos sidebars y también tienen que tener en cuenta el espacio entre el foro y los sidebars, y también el ancho de dichos sidebars.

Aclaración: Todavía no asignamos el ancho de los sidebars porque no va en el código de jQuery.

Con ésto finalizamos la explicación de la parte del código jQuery.

HTML

La modificación del HTML viene en varias partes...

Una ves más, en nuestra plantilla headerinclude, colocaremos la siguiente llamada:

No puedes ver estos contenidos como invitado

Lo que hace éste simple código es llamar al archivo especial que crea la cookie, que contendrá los datos al guardar la opción de si el usuario quiere o no quiere mostrar los sidebars.

Es importante que coloquen dicha referencia ANTES de nuestro código jQuery.

Prosigamos...

Plantilla portal_latestthreads_thread

En ésta plantilla simplemente añadiremos una clase que luego vamos a llamar desde el index, para traer la información de los últimos temas de nuestro foro, quedará del siguiente modo:

No puedes ver estos contenidos como invitado

Plantilla index

Voy a dejarles el código de cómo debería quedar la plantilla index, y luego explicaré paso por paso:

No puedes ver estos contenidos como invitado

Bien, la primera modificación que encontraremos es la siguiente:

Cita:<div class="sidebar" style="float: right; width: 250px;">

Este es el inicio de nuestro div que creará nuestro sidebar, si prestan atención al final estaré asignando un "width" (Ancho) de 250px (píxeles), es importante que definan el ancho aquí.

Luego observaremos lo siguiente:

Cita:<script type="text/javascript">
jQuery.NoConflict();
jQuery(function(){
jQuery(".latestthreads").load("{$mybb->settings['bburl']}/portal.php .latestthreads_portal");
});
</script>

Éste es nuestro código jQuery para importar nuestros últimos temas desde el portal hacia nuestro índice o index. Lo aclaro porque no estamos modificando ningún archivo php de MyBB, simplemente estamos haciendo uso de lo que ya existe y llamándolo hacia otro lugar, así que tengan en cuenta también que al estilizar dicho contenido, se verá del mismo modo tanto en el index como en el portal.

Ahora proseguimos con lo siguiente:

Cita:<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse.gif" id="ths_img" class="expander" alt="[-]" title="[-]" /></div>
<strong>Últimos temas</strong>
</td>
</tr>
<tr>
<td style="{$collapsed['ths_e']} padding: 0;" id="ths_e">

<div class="latestthreads float_left">
</div>

</td>
</tr>
</table>

¿Y qué es todo ésto? Pues ésto es una tabla, sí, una simple tabla (Sé que hay mejores formas de realizar ésto, pero ya que MyBB utiliza tablas, no nos vamos a complicar la vida de momento y vamos a seguir utilizando tablas).

Aquí veremos que tenemos nuestro título (Últimos temas), tenemos una imagen que no es más que el botón para cerrar o abrir las categorías, pero con un ID diferente, y luego un muy raro div sin contenido... pues no es raro ni tampoco está vacío, es que dicho div cumplirá la función de importar los datos con nuestro código jQuery desde el portal hacia el index.

Para finalizar, nos encontraremos con ésto:

Cita:<div class="forums" style="float: left; width: 724px;">

Aquí en otro div, haremos uso de nuestra clase ".forums" a la cual también le asignaremos un "width" (Ancho) de 724px (píxeles), ancho que ya explicamos al comienzo y que también es necesario que lo coloquemos aquí.

Ahora pasaremos a nuestra plantilla nav

Personalmente lo coloco aquí por gusto, pero ustedes pueden colocar ésto donde gusten y luego acomodarlo. Al colocarlo aquí, tendremos nuestros botones de mostrar u ocultar sidebars al final de nuestra barra de navegación.

¿Cómo quedaría ésto? pues así:

No puedes ver estos contenidos como invitado

Originalmente donde tienen la "O" y la "M" utilizo font-awesome icons para colocar un lindo ícono, pero como no todos lo utilizan, simplemente dejo una letra, y si ustedes quieren añadir font-awesome o una imagen, pues modifiquen dicha letra por el código que necesiten y ya está =).

CSS

Aquí simplemente van a estilizar los botones, les dejo la configuración del último tema que realicé, ustedes pueden modificarlo a gusto, más pequeños, más grandes, diferente color, etc. etc. etc.

No puedes ver estos contenidos como invitado

Por último, dejo adjunta la librería que utilizo para las cookies, calculo que la gente que utiliza cookies en MyBB utiliza la misma librería, pero por si las moscas...

Dicha librería deberán colocarla en la carpeta jscripts de MyBB.

Con ésto damos finalizado el tutorial. Sí, es un poco extenso, pero quería tratar de explicarlo lo mejor posible para que ustedes mismos puedan entender qué hace cada cosa, y animarse a integrarlo y modificarlo a gusto.

Si tienen alguna duda o les surge algún problema, pueden consultar aquí ^^.

¡No he comprendido nada de lo que has escrito!, ¿puedes mostrarme qué hace ésto? Claro que sí! mira la siguiente foto =)

[Imagen: fOJgyER.png]

Saludos!
Última modificación: 16 Agosto 2014, 12:33 por eNvy.


Archivos adjuntos
.js   jquery.cookie.js (Tamaño: 4.36 KB / Descargas: 20) - 16 Agosto 2014, 12:30
 DarkEternity
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:139
Temas:5
Registro:27 Sep 2013
Reputación: 38
Gracias dados55Gracias recibidos38NacionalidadVenezuela
17 Agosto 2014, 01:19 -
#2
1
personalmente soy una de las personas que cuando tenias tu foro de 7sins con los tutoriales que colocaste aprendi mucho es mas hasta me quede con las ganas de aprender un poco mas sobre el diseño ojala y retomes tu foro y puedas compartir mas de tu conocimiento talvez otros no agradescan lo que haces pero yo si te agradesco todo lo que enseñas y no solo a mi sino a muchos que no saben como hacer este tipo de cosas
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 172
Gracias dados54Gracias recibidos174NacionalidadArgentina
17 Agosto 2014, 02:07 -
#3
0
Estoy en eso DarkEternity! ya dí el primer paso hoy y con ayuda de la gente de soportemybb.es ^^.
 Brown
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:360
Temas:18
Registro:10 Mayo 2014
Reputación: 116
Gracias dados158Gracias recibidos116NacionalidadEl Salvador
17 Agosto 2014, 02:31 -
#4
0
Para mi un excelente tutorial y es que como dices tú muchos usuarios buscan hacer lo que este tutorial enseña :D

Personalmente espero que sigas avanzando en tú proyecto y que te vaya muy bien, recuerda que son más los que aprenden de ti, que los que te critican
 Tbo29
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:37
Temas:1
Registro:22 Jun 2014
Reputación: 14
Gracias dados10Gracias recibidos14NacionalidadGermany
24 Agosto 2014, 23:04 -
#5
0
Muchas gracias. Funciona perfectamente. Acabo de implementar este tutorial con algunos cambios a mi tema de la versión Mybb 1.8.
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 172
Gracias dados54Gracias recibidos174NacionalidadArgentina
14 Septiembre 2014, 18:37 -
#6
0
Para la versión 1.8, puedes saltear el segundo paso, que añade la siguiente línea:

No puedes ver estos contenidos como invitado

Según leí en el foro oficial, la versión 1.8 ya cuenta con una cookie que guarda datos, así que éste paso es innecesario (Para la versión 1.6 sí es necesario).

Saludos!
 Pilar1977
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:115
Temas:14
Registro:19 Feb 2014
Reputación: 71
Gracias dados39Gracias recibidos71NacionalidadSpain
14 Septiembre 2014, 23:43 -
#7
1
Muy buen tutorial @ eNvy
Ya sabes que soy una fiel seguidora de tus themes y trabajos Sonrisa
Última modificación: 14 Septiembre 2014, 23:43 por Pilar1977.
 Tbo29
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:37
Temas:1
Registro:22 Jun 2014
Reputación: 14
Gracias dados10Gracias recibidos14NacionalidadGermany
15 Septiembre 2014, 22:54 -
#8
0
También en la version 1.8 no es mas necesario el noconflict en el Jquery script creo.

En realidad, yo estoy tratando de hacer un tema de fluido con un javascript como en tu tema de Business de 1.6 de la versión 1.8. El sitio MyBB hace esto con un selector de tema, pero esto no se ve muy bonito, me gusta tu versión mucho mejor. Logré hacer que funcione de alguna manera trabajando con el wrapper, todavía tengo que trabajar en la barra de menú que he añadido a mi tema que si pone in una mala posicion , pero ya se ve bien.  

Tus temas son muy agradable y tus tutoriales son muy buenos @eNvy.
Última modificación: 15 Septiembre 2014, 22:55 por Tbo29.
 eNvy
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:252
Temas:36
Registro:16 Aug 2014
Reputación: 172
Gracias dados54Gracias recibidos174NacionalidadArgentina
15 Septiembre 2014, 23:50 -
#9
0
Gracias @ Tbo29

El código para cambiar el ancho puedes hacerlo utilizando el wrapper, que se aplica en todo el foro, y te es mucho más fácil para utilizar... simplemente tienes que buscar la clase que ingrese en business (Creo que era .forum o .forums) y cambiarla.

Sino puedes abrir un div en headerinclude y cerrarlo en el footer y listo Lengua.
 Tbo29
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:37
Temas:1
Registro:22 Jun 2014
Reputación: 14
Gracias dados10Gracias recibidos14NacionalidadGermany
17 Septiembre 2014, 02:15 -
#10
0
Gracias. Hice terminarlo y funciona bien. He adaptado el estilo del sitio Mybb con los bordes grises, y como iconos usé los de font-awesome.

No pensé encontrar un sitio tan útil como éste, aunque mi español no es muy bueno, puedo entender los tutoriales bastante bien.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Ver prefijos en el index Joseahfer 10 2,290 8 Noviembre 2014, 12:54
Último mensaje: Joseahfer
  [Tutorial] Avatar en index y forumdisplay Joseahfer 22 3,455 7 Septiembre 2014, 00:54
Último mensaje: Whiteneo
  [Tutorial] Tablas Colapsables Jean Pierre 1 765 22 Agosto 2014, 03:57
Último mensaje: Lorean
  [Tutorial] Aceptación de cookies Joseahfer 18 3,161 17 Agosto 2014, 05:13
Último mensaje: Juliens
  [Tutorial] Tipos de cookies BitLiberal 5 1,030 1 Junio 2014, 14:08
Último mensaje: papi
  Entender el index del foro calamar 10 1,519 8 Marzo 2014, 05:33
Último mensaje: DarkEternity



Usuarios navegando en este tema: 1 invitado(s)