Página 1 de 1

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

Publicado: 13 Oct 2014, 21:09
por mitch
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:
Imagen

>> 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 menú con las pestañas, acá la solución: http://www.phpbb-es.com/foro/viewtopic. ... 98#p106498
  • Fíjate 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<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/faq.php' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></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<!-- IF $_SERVER['SCRIPT_NAME'] == '/faq.php' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></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<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/rules.php' --> class="activetab"<!-- ENDIF -->><a href="rules.php" title="Reglas"><span>Reglas del Foro</span></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 clic 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<!-- IF $_SERVER['SCRIPT_NAME'] == '/foro/viewforum.php' && $_GET['f'] == '2' --> class="activetab"<!-- ENDIF -->><a href="viewforum.php?f=2"><span>OFF TOPIC</span></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
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

Comentado por Alorse

Si por ejemplo tengo una la pestaña en un archivo determinado y luego voy a una extensión de ese mismo archivo, también 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 código 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 -->

Comentado por Mitch

Para que no te quede marcada la pestaña que va al panel de control de usuario, al irse a otra pestaña que ocupe ucp.php tambien, tienes que modificar la linea de la pestaña del panel del usuario. La tienes así:

Código: Seleccionar todo

<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>
Fuente: http://www.phpbb.com/community/viewtopi ... 93&start=0
Modificado y mejorado por mitch