Poner menu jquery smf

Hola a todos, antes que nada este tuto lo "adapto" al smf, lo mire en el centro
de soporte para mybb [Mybb-Es.com], pense "Joder, es jquery, seguro y funca en smf" y asi es,
funca bien en el smf como podran ver en la imagen



Ahora si, comenzamos

Nos vamos a administracion->temas y diseño->modificar temas-> elijes tu theme en la opcion "Editar las hojas de estilo de este tema (stylesheets)."-> das clic en el index.css

Una vez ahi te vas al final del codigo y solo agregas:

.img_list_hp {
-moz-border-radius:6px;
-webkit-border;
-radius:6px;
border:1px solid #C0C0C0;
border-radius:6px;
color:#FFF!important;
float:left;
font-size:11px;
margin:auto 5px auto auto;
padding:0;text-align:center;
width:auto
}

.img_list_hp:hover {
background-color:#bebebe;
}

.img_list_hp img {
padding:8px 15px;
}

.img_list_hp span {
background:url(http://emuxela.net46.net/images/gamenow/tcat.png) top left repeat-x;
display:block;
padding:0 10px
color: #666;
border-bottom: 1px solid #bebebe;
text-shadow: 1px 1px 0 #fff;
font-size: 12px;
}

.img_list_hp a {
color:#666!important;
text-decoration:none
}

#img_list_alt {
background-image:url(http://i31.servimg.com/u/f31/13/31/18/01/flesha10.png);
background-position:20px 0;
background-repeat:no-repeat;
padding-left:55px;
padding-top:13px
}

Despues de eso guardamos y volvemos a "modificar temas" elejimos el de nosotros pero ahora la opcion "Examinar los archivos y plantillas de este tema." una vez ahi buscamos el boardindex.template.php y buscamos:

         <div id="boardindex_table">

Ahora agregamos antes:

echo '

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
 jQuery(function() {
 jQuery(".img_list_hp img").mouseover(function() {
 jQuery("#img_list_alt").html(jQuery(this).attr("alt"));
 }).mouseout(function() {
 jQuery("#img_list_alt").html("Pasa el mouse sobre las imagenes para mas informacion");
 });
 });
 </script>
 <div class="img_list_hp"><a href="#"><img src="http://cdn3.iconfinder.com/data/icons/humano2/48x48/apps/gkdebconf-icon.png" alt="Firethost.com te da la posibilidad de mejorar tu sitio web con el contenido que tenemos en el foro" height="50"><span>Foro</span></a></div>
<div class="img_list_hp"><a href="http://www.firethost.com/clientes/knowledgebase.php"><img src="http://cdn3.iconfinder.com/data/icons/musthave/48/Help.png" alt="Descubra aqui las respuestas a las preguntas mas frecuentes" height="50"><span>FAQ</span></div>
<div class="img_list_hp"><a href="http://foro.firethost.com/index.php?board=2.0"><img src="http://cdn3.iconfinder.com/data/icons/humano2/48x48/status/dialog-information.png" alt="Si tiene alguna sugerencia para ayudar a mejorar el foro o servicios puede dejarla en un post" height="50"><span>Sugerencias</span></div>
<div class="img_list_hp"><a href="http://www.firethost.com/planes/"><img src="http://cdn1.iconfinder.com/data/icons/bnw/48x48/apps/browser.png" alt="Consulte aqui nuestros diferentes planes de hosting" height="50"><span>Planes</span></div>
<div class="img_list_hp"><a href="http://www.firethost.com/clientes/"><img src="http://cdn5.iconfinder.com/data/icons/Copenhagen/PNG/48/client.png" alt="Visite el area de clientes para mandar tickets" height="50"><span>Clientes</span></div>
<div class="img_list_hp"><a href="#"><img src="http://cdn4.iconfinder.com/data/icons/bloggin/48/advertisment.png" alt="Mire las promociones mas recientes que firethost.com tiene para ti!" height="50"><span>Ofertas</span></div>
<div class="img_list_hp"><a href="http://foro.firethost.com/index.php?board=24.0"><img src="http://cdn3.iconfinder.com/data/icons/humano2/48x48/places/kde-folder-public.png" alt="Publica aqui tu sitio web para obtener sugerencias y mayor publicidad" height="50"><span>Publicate</span></a></div>
 <div style="clear: both;" id="img_list_alt">Pasa el mouse sobre las imagenes para mas informacion</div>

Ejemplo: www.foro.firethost.com

Ahi podrais ir modificando las imagenes, agregando o quitando los bloques del menu, editando las url, etc.   

Espero les sirva de mucho a todos   :bien: saludos!

Zedrick!~

Genial +1

Diganos si lo agregan a su foro o pongan imagen de como les quedo saludos

Yo solo agrege 2 botones.

Esta muy bueno el tuto! +1
Mastarde lo pongo en mi foro

Salu2!

Estaria bueno si se empaqueta

Lo queria hacer mod, pero como no se mucho php
y le queria poner panel en la administracion para añadir
y quitar cuadros desde ahi, por eso mejor no lo hice... :/

Vamos a tener que esperar aver si algunos de la Staff se anime a Empaquetarlo.

Saludos.

Si lo hacia mod, lo hubiera dejado incompleto, osea solo
le hubiera agregado eso, pero los cuadros se editarian manualmente,
no queria hacer mi primer mod incompleto xD aver si uno se anima y dan greetz :$

Si quieres lo puedo hacer mod. Estaria bueno. Seria como un menu opcional.
A la tarde si tengo tiempo lo hago.
+1 por la idea y el tuto!

Seria genial empaquetado
y que se pudieran agregar cuadros desde
la administracion.

Sal2!!

eyy yo tire la idea jajaj bien ahi lean otro mod para la coleccion saludos.

La idea principal fue mia XD , solo que no quice hacer mod sin poder editarlo desde el panel de administracion 

jjaja si te joed hermano saludos no desvirtuemos mas espero que se empaquete :bien:

Le pondre, idea del mod ready, idea de empaquetarlo gonza   

Asi todos contentos...