Modificacion - Tabbed Menu
Con esta modificación por nhtera888xxx lo que vamos a conseguir es organizar los foros en pestañas.
Imágenes:
[SPOILER]
![[Imagen: ?di=SVVQ]](http://img.linewarez.com/?di=SVVQ)
[/SPOILER]
** Las imágenes las hice de mi foro, donde también aparece una modificación de Sama por lo que no quedará exacto:
http://www.mybb-es.com/Hilo-tutorial-foros-en-columnas
Demostración en línea: Próximamente...
- Para empezar, descarga el archivo adjunto y súbelo a la carpeta JSCript.
- Después editar la plantilla "Caja del foro -> forumbit_depth1_cat"
Al inicio:
Código:
<div id="cat_{$forum['fid']}" class="content">Al final:
Código:
</div>- Una vez editada, ahora buscamos y editamos la plantilla "Inicio -> index"
En esta plantilla buscamos:
Código:
{$forum}Por encima de ello, vamos a pegar lo siguiente:
Código:
<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Titulo1" style="cursor: pointer;" rel="cat_X, #cat_X, ">Texto1</td>
<td class="tcat tab" title="Titulo2" style="cursor: pointer;" rel="cat_X, #cat_X, ">Texto2</td>
<td class="tcat tab" title="Titulo3" style="cursor: pointer;" rel="cat_X, #cat_X, ">Texto3</td>
</tr>
</table>- Ahora tenemos que añadir CSS, para ello vamos a edición de estilos y editamos de manera avanzada "global.css" añadiendo al final:
Código:
.at {
background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
color: #ffffff;
}De esta manera ya tendríamos la modificación realizada.
[attachment=1331]
Ahora, ¿Como lo uso?:
Bien, veamos un ejemplo, yo quiero añadir la categoría "Prueba" que su ID es 1, y quiero que aparezca dentro de la primera pestaña (Texto1):
Nos dirigimos a plantilla "Caja del foro -> forumbit_depth1_cat":
En el código que pegamos antes comprobamos:
Código:
<td class="tcat tab" title="Titulo1" style="cursor: pointer;" rel="cat_X, #cat_X, ">Texto1</td>Lo editamos y comparamos, de manera que en la pestaña 1 aparecerá nuestra primera categoría:
Código:
<td class="tcat tab" title="Aquí las pruebas..." style="cursor: pointer;" rel="cat_1, ">Pruebas</td>Lo que debemos editar:
Title: El texto que aparecerá al pasar el ratón.
Texto1: El texto que aparecerá en la pestaña.
rel: Esto es lo interesante, aquí ponemos el listado de categorías que se mostrarán en esta pestaña. cat_[ID DE LA CATEGORÍA].
Ahora añadimos al CSS (global.css):
Código:
#cat_1{
display: none;
}Ya tenemos la primera categoría, añadimos una segunda (su id es 5):
En el paso anterior nos quedó:
Código:
<td class="tcat tab" title="Aquí las pruebas..." style="cursor: pointer;" rel="cat_1, ">Pruebas</td>Modificamos y comparamos:
Código:
<td class="tcat tab" title="Aquí las pruebas..." style="cursor: pointer;" rel="cat_1, #cat_5, ">Pruebas</td>Ahora en CSS (global.css) añadimos:
Código:
#cat_5{
display: none;
}Con esto terminamos
Última modificación: 13 Dec, 2011, 7:55 pm por leXtreMoDuRol.