- Desde
- 30 May 2008
- Mensajes
- 227
En este tutorial os enseñare como crear un menu de navegacion, con iconos para cada link, botones, buscados... este modulo que vamos a crear lo sustituiremos por el modulo "» Panel de Navegación" del vBadvanced el cual es muy cutre.
Podreis crear varias categorias dentro del menu por asi decirlo añadiendo tambien iconos a cada categoria y personalizarlo al 100%, las imagenes del fondo es como quedaria segun instalarlo como veis se adapta al estilo, pero no os fijeis en eso ya que son demos, como ya os exlpicare mas adelante podeis modificar, mover, quitar y añadir lo que querais sin limite.
Bueno vamos a empezar:
1. Bajaros esto, es un modulo base por asi decirlo; Navigation module for vBulletin and CMPS 2.0 - vBulletin.org Forum
2. Instalarlo: Admincp ->vBa CMPS -> Exportar/Importar modulo
3. Ir al estilo que quieras Admincp -estilos y plantillas-administrar estilo y expandes las plantillas del estilo que quieras es un boton algo asi como esto :
<< >> a la derecha
4.Entra en la plantilla adv_portal_navbarmenu
5. Toca editar, haber por donde empezamos xD
IMPORTANTE: No useis los codigos base del modulo, localizar su posicion y copiar los codigos que puse yo aqui ya que algunas cosas las modifique para que funcionaran bien, por ejemplo los mouseover y mouseout de MENU- LISTA DE LINKS DEL MENU DE NAVEGACION, o lo del ADMIN del final, con quitar lo que esta entre las etiquetas solo no sirve, si quereis probar y vereis que bonito os queda el portal xD
En los codigos vereis que sepado cada linea/link, da = cuanto los separeis no pasara nada, para crear un salto de linea y por lo tanto una separacion debeis usar <br> yo los separe para que entendiera mejor y no se viera todo el codigo amontonado
Cosas basicas que tienes que saber:
TITULO DEL MODULO
AdminCP -> vBa CMPS -> editar modulos -> Navigation menu
Título del Módulo: XXXXXXXXXX
MENU DESPLEGABLE "ITEMS"
Haber por ejemplo te voy a poner el primer bloque que sale, the comunity para que lo modifiques como quieras.Ves el inicio del codigo: <!-- The Community --> y el final <!-- / The Community --> pues busca eso en la plantilla y pega este codigo
MENU- LISTA DE LINKS DEL MENU DE NAVEGACION
BOTONES:
Bueno veras unos botones como el de upload images que ademas tienen un mouseover al pasar el raton por encima cambian, su codigo es el sigueinte
BUSCADOR:
ADMIN:
Como el buscador si lo quieres tener dejalo como esta y si lo quieres quitar pon esto en su lugar.
Si quereis quitar el Codigo de admin debereis de borrar lo que esta en azul, os quedara asi.
Si me olvide de algo o para cualquier duda dejar un post
A bueno se me olvidaba una imagen:
Todo lo que veis se puede mover o quitar, los iconos como ya os mostre arriba son individuales, las carpetas de los titulos y las lineas de puntos de cada opcion podeis poner la imagen que querais en cada uno.
Evidentemente como se puede ver se adapta a vuestro estilo, quedan mucho mejor que lo que aparece en estas imagenes.
Podreis crear varias categorias dentro del menu por asi decirlo añadiendo tambien iconos a cada categoria y personalizarlo al 100%, las imagenes del fondo es como quedaria segun instalarlo como veis se adapta al estilo, pero no os fijeis en eso ya que son demos, como ya os exlpicare mas adelante podeis modificar, mover, quitar y añadir lo que querais sin limite.
Bueno vamos a empezar:
1. Bajaros esto, es un modulo base por asi decirlo; Navigation module for vBulletin and CMPS 2.0 - vBulletin.org Forum
2. Instalarlo: Admincp ->vBa CMPS -> Exportar/Importar modulo
3. Ir al estilo que quieras Admincp -estilos y plantillas-administrar estilo y expandes las plantillas del estilo que quieras es un boton algo asi como esto :
<< >> a la derecha
4.Entra en la plantilla adv_portal_navbarmenu
5. Toca editar, haber por donde empezamos xD
IMPORTANTE: No useis los codigos base del modulo, localizar su posicion y copiar los codigos que puse yo aqui ya que algunas cosas las modifique para que funcionaran bien, por ejemplo los mouseover y mouseout de MENU- LISTA DE LINKS DEL MENU DE NAVEGACION, o lo del ADMIN del final, con quitar lo que esta entre las etiquetas solo no sirve, si quereis probar y vereis que bonito os queda el portal xD
En los codigos vereis que sepado cada linea/link, da = cuanto los separeis no pasara nada, para crear un salto de linea y por lo tanto una separacion debeis usar <br> yo los separe para que entendiera mejor y no se viera todo el codigo amontonado
Cosas basicas que tienes que saber:
Eso es una linea horizontal hay 3 o 4 yo las quite<hr size="1"/>
Saltos de linea, yo los use por ejemplo para poner espacio entre los tituls de cada bloque y el incio de las opciones / lista, menu o como querais llamarlo de links.
TITULO DEL MODULO
AdminCP -> vBa CMPS -> editar modulos -> Navigation menu
Título del Módulo: XXXXXXXXXX
MENU DESPLEGABLE "ITEMS"
<!-- Items -->
<table class="alt1" height="18" border="1" cellspacing="0" cellpadding="0" width="100%">
<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt2'"><td class="tcat" align="center" ><span id="items">
<script type="text/javascript"> vbmenu_register("items"); </script> <a href="#">NOMBRE A MOSTRAR EN EL BOTON(Por defecto Items)</a> </span></td></tr>
</table>
<!-- / Items -->
<!-- Items Menu -->
<div class="vbmenu_popup" id="items_menu" style="display:none;margin-left:100px;">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">TITULO MENU DESPLEGABLE</td></tr>
<tr><td class="vbmenu_option"><a href="URL A LA QUE QUIERES QUE TE DIRIJA">NOMBRE DE LA 1 OPCION</a></td></tr>
<tr><td class="vbmenu_option"><a href="URL A LA QUE QUIERES QUE TE DIRIJA">NOMBRE DE LA 2 OPCION</a></td></tr>
<tr><td class="vbmenu_option"><a href="URL A LA QUE QUIERES QUE TE DIRIJA">NOMBRE DE LA 3 OPCION</a></td></tr>
Y copias y pegas ese codigo tantas veces como quieras.
</table>
</div>
<!-- / Links menu -->
Haber por ejemplo te voy a poner el primer bloque que sale, the comunity para que lo modifiques como quieras.Ves el inicio del codigo: <!-- The Community --> y el final <!-- / The Community --> pues busca eso en la plantilla y pega este codigo
MENU- LISTA DE LINKS DEL MENU DE NAVEGACION
<!-- The Community -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td><img src="IMAGEN A LA IZQUIERDA DEL TITULO DEL BLOQUE" alt=""/> <b>TITULO DEL BLOQUE</b></td></tr>
<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt0'"><td><img src="IMAGEN A LA IZQUIERDA DE LA 1 OPCION" alt=""/> <a href="URL DE LA PRIMERA OPCION (ej: http://www.tuforo.com)">NOMBRE DE LA PRIMERA OPCION (EJ: foro)</a></td></tr>
<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt0'"><td><img src="IMG IZQ de la 2 OPCION" alt=""/> <a href="URL SEGUNDA OPCION">TITULO 2 OPCION</a></td></tr>
<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt0'"><td><img src="IMG IZQ de la 3 OPCION" alt=""/> <a href="URL 3 OPCION">TITULO 3 OPCION</a></td></tr>
Y ese codigo lo puedes repetir las veces que quieras, los otros bloques son iguales el de media gallery y contact zone, puedes cambiarlos completamente
</table>
<!-- / The Community -->
BOTONES:
Bueno veras unos botones como el de upload images que ademas tienen un mouseover al pasar el raton por encima cambian, su codigo es el sigueinte
Este codigo lo puedes donde quieras, incluso entre 2 opciones de la lista de arriba, al final, al principio, puedes poner todos los botones que quieras, solo copia el codigo y ve poniendo los datos que quieras, eso como veas, copia ese codigo lo modificas y lo pegas donde quieras o quitas los botones o lo que quieras.<table class="alt2" height="16" border="1" cellpadding="0" cellspacing="0" width="100%"><tr onmouseover="this.className='alt1'" onmouseout="this.className='alt2'"><td align="center"> <a href="URL A LA QUE QUIERES QUE TE LLEVE">TEXTO DEL BOTON</a> <img align="middle" src="IMAGEN DEL BOTON" alt=""/></td></tr>
</table>
BUSCADOR:
Esas etiquetas delimitan el codigo del buscador si lo quieres dejalo o muevelo, sino simplemente quita esa parte del codigo.<!-- Search -->
<!-- / Search -->
ADMIN:
Como el buscador si lo quieres tener dejalo como esta y si lo quieres quitar pon esto en su lugar.
Si quereis dejar el boton no toqueis nada.<!-- Administrators -->
<if condition="$show['admincplink']"> <hr size="1"/>
<table class="alt1" height="18" border="1" cellpadding="0" cellspacing="0" width="100%"><tr onmouseover="this.className='alt2'" onmouseout="this.className='alt1'"><td align="center">
<tr class="alt1">
<td align="center" class="tcat"><span id="other"><strong> <a href="$vboptions[bburl]/$admincpdir/index.php$session[sessionurl_q]" target="_blank"> $vbphrase[admin]</a></strong></span></td></tr>
<!-- / Administrators -->
</td>
</tr>
</table>
</if>
</tr>
Si quereis quitar el Codigo de admin debereis de borrar lo que esta en azul, os quedara asi.
Bueno con esto deberias de poder crear vuestro propio modulo a medida con cada cosa donde mas os guste.</td>
</tr>
</tr>
Si me olvide de algo o para cualquier duda dejar un post
A bueno se me olvidaba una imagen:
Todo lo que veis se puede mover o quitar, los iconos como ya os mostre arriba son individuales, las carpetas de los titulos y las lineas de puntos de cada opcion podeis poner la imagen que querais en cada uno.
Evidentemente como se puede ver se adapta a vuestro estilo, quedan mucho mejor que lo que aparece en estas imagenes.