Crear Menu con Pestañas (tabs) en estilos tipo Prosilver

por **mitch** » Jueves, 18 Diciembre 2008, 16:14

Hola... la idea de esta pequeña guía es lograr un menú para tu web, en pestañas, para estilos como prosilver (y estilos que se basen en este), aprovechando que prosilver trae por defecto esta función.

Puede quedar mas o menos así, en la cabecera de tu foro:

>> Pasos a seguir

En el archivo /styles/prosilver/template/overall_header.html

Buscar:
Código: Seleccionar todo
```
<div class="navbar">
```

Agregar ANTES:

Código: Seleccionar todo

<div id="tabs">
       <ul>
          <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/index.php' or $_SERVER['SCRIPT_NAME'] == '/foro/viewforum.php' or $_SERVER['SCRIPT_NAME'] == '/foro/viewtopic.php' --> class="activetab"<!-- ENDIF -->><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
          <!-- IF S_DISPLAY_SEARCH --><li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/search.php' --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
          <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/memberlist.php' --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
          <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/faq.php' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a></li>
       </ul>
    </div>

Si tienes un portal (portal.php), en vez de ese código, agrega este:

Código: Seleccionar todo

<div id="tabs">
       <ul>
          <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/portal.php' --> class="activetab"<!-- ENDIF -->><a href="{U_PORTAL}"><span>{L_PORTAL}</span></a></li>
          <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/index.php' or $_SERVER['SCRIPT_NAME'] == '/foro/viewforum.php' or $_SERVER['SCRIPT_NAME'] == '/foro/viewtopic.php' --> class="activetab"<!-- ENDIF -->><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
          <!-- IF S_DISPLAY_SEARCH --><li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/search.php' --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
          <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/memberlist.php' --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
          <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/faq.php' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a></li>
       </ul>
    </div>

nota: Si tienes phpBB3 Portal, y no te apareciese el menu con las pestañas, acá la solución: viewtopic.php?p=106498#p106498" onclick="window.open(this.href);return false;

Fijate primero, de una cosa super importante que debes editar de este código que agregaste. En el código que dejé, supuse que tu foro se encuentra en la carpeta /foro/ (como esta web). Pero si tu foro se encuentra en otro directorio, vas a tener que editar en ese código la palabra /foro/ por la carpeta en donde tengas tu propio foro
<li class="activetab"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

nota: Si tu foro no se encuentra en ninguna carpeta (es decir, se encuentra en la raíz de tu sitio.. no en /foro/, ni en /phpBB3/ ni nada asi), debes eliminar la frase /foro (tal cual, sin la última barra diagonal) de cada linea de los códigos antes dejados ... es decir, se vería algo asi:
<li class="activetab"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

Fijate que queda /faq.php

>> Añadiendo nuevas pestañas

Ahora, si quieres agregar una nueva pestaña, el formato es el siguiente (para el ejemplo, vamos a suponer que la página que vamos a agregar es la página de Reglas y que se llama rules.php)
<li class="activetab"><a href="rules.php" title="Reglas">Reglas del Foro</a></li>

En azul, coloco la página (anteponiendo /foro/ o la carpeta donde se encuentre tu foro).
En naranjo, el enlace hacia la página (para que al hacer click en la pestaña nos lleve hacia allá).
En verde, el texto de la pestaña

Lo agregas antes del </ul> del código que agregaste al principio.

Para agregar pestañas para Registrarse y Conectarse, son pestañas algo "especiales", el código es el siguiente:

Código: Seleccionar todo

<!-- IF not S_USER_LOGGED_IN -->

	<li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/ucp.php' && $_GET['mode'] == 'login' --> class="activetab"<!-- ENDIF -->><a href="ucp.php?mode=login" title="Conectarse"><span>Conectarse</span></a></li>
	  <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/ucp.php' && $_GET['mode'] == 'register' --> class="activetab"<!-- ENDIF -->><a href="ucp.php?mode=register" title="Registrarse"><span>Registrarse</span></a></li>

<!-- ENDIF -->

Si quisieras agregar el acceso a cierto foro en una de estas pestañas (en este foro, una pestaña para ir al foro de [OFF Topic] por ejemplo), el código es mas o menos así:
Código: Seleccionar todo
```
<li class="activetab"><a href="viewforum.php?f=2">OFF TOPIC</a></li>
```
Ahi cambias OFF TOPIC por el nombre de tu foro (texto de la pestaña), y el numero 2 (que aparece 2 veces), lo cambias por la ID de tu foro.

nota: La ID de tu foro es el numero que aparece en la URL del foro. En el ejemplo la url es asi: http://www.tupagina.com/foro/viewforum.php?f=2" onclick="window.open(this.href);return false;

Puede resultar un poco complejo... para los que han programado, les resultará fácil jugar con las sentencias IF. Recuerda que si tienes problemas entendiendo esto, puedes preguntar en nuestros foros.

Salu2

Fuente: http://www.phpbb.com/community/viewtopi ... 93&start=0" onclick="window.open(this.href);return false;
Modificado y mejorado por mitch

mitch he encontrado una falla, no se si sea tuya o mia, pero no me cuadra... es acerca del activetab de las pestañas

Si por ejemplo tengo una la pestaña en un archivo determinado y luego voy a una exencion de ese mismo archivo, tambien queda activada, me explico...

Tengo en diferentes pestañas ucp.php, ucp.php?mode=login y ucp.php?mode=login, pues si estoy en ucp.php, todo perfecto, queda activado y las otras dos sin sombrear, pero cuando paso a una de las otras pestañas, sigue activado el ucp.php.

Este es el codigo en que me sucede (solo un ejemplo).

Código: Seleccionar todo

<!-- IF not S_USER_LOGGED_IN -->

   <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/ucp.php' --> class="activetab"<!-- ENDIF -->><a href="ucp.php" title="Panel del control de Usuario "><span>Panel del control de Usuario</span></a></li>
   <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/ucp.php' && $_GET['mode'] == 'login' --> class="activetab"<!-- ENDIF -->><a href="ucp.php?mode=login" title="Conectarse"><span>Conectarse</span></a></li>
     <li<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/ucp.php' && $_GET['mode'] == 'register' --> class="activetab"<!-- ENDIF -->><a href="ucp.php?mode=login" title="Registrarse"><span>Registrarse</span></a></li>

<!-- ENDIF -->

La verdad no le trabajado mucho a como solucinarlo ya que no tengo conocimientos muy claros sobre esto...