Con esta modificación por nhtera888xxx lo que vamos a conseguir es organizar los foros en pestañas.

Imágenes:

[SPOILER]


[/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:

<div id="cat_{$forum['fid']}" class="content">

Al final:

</div>

- Una vez editada, ahora buscamos y editamos la plantilla "Inicio -> index"

En esta plantilla buscamos:

{$forum}

Por encima de ello, vamos a pegar lo siguiente:

<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:

.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:

<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:

<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):

#cat_1{
display: none;
}

Ya tenemos la primera categoría, añadimos una segunda (su id es 5):

En el paso anterior nos quedó:

<td class="tcat tab" title="Aquí las pruebas..." style="cursor: pointer;" rel="cat_1, ">Pruebas</td>

Modificamos y comparamos:

<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:

#cat_5{
display: none;
}

Con esto terminamos

O.O gracias por el tuto pero en mi theme cuando importo una jquery no funcionan los botones ni opciones de moderacion.. alguna idea de el porque.?

PD: se parece al theme mysthic de ipb
PD2:+rep

Déjame el contenido de la plantilla index, aunque suena raro :S

Bueno +

El problema es por que jquery da problemas con prototype, se puede solucionar.

13 Dec, 2011, 8:13 pm Sama34 wrote:
Bueno +

El problema es por que jquery da problemas con prototype, se puede solucionar.

Como lo podria solucionar por que hay varias cosas que le quiero poner a mi foro, esta es una de ellas pero jquery no me deja

Arreglado fallo en el código del index.

Una duda, ya que el mytabs me está dando problemas... ¿Puedo añadir una 2 imágenes para cada pestaña (una normal y una cuando esta seleccionada, cierto? . ¿Es posible?