he quedado impresionado del skin tan hermoso de este foro, todo está perfecto, han hecho un trabajo envidiable la verdad, mi foro no es tan bonito, lo unico bueno de mi foro es que tiene letras mas grandes jejeje, es broma, pasando a otro asunto, quiero de favor me pasen el codigo para implementar esa barra inferior en mi foro, por favor os lo suplico, solo quiero la barra, odio la de wibiya porque enlentece mucho los foros, pero esta que ustedes tienen esta genial!!!

por favor pasenme el codigo si??? expliquenme el tutorial, mi foro es phpbb2

gracias de antemano, felicidades por tan chulo foro

AYUDENME PLIS

A ver si lo lee nuestro experto informático

Carlos dame un poco de tiempo que ahora no puedo, quiero hacer el tuto para foroactivo

Carlos, ya envie el tutorial a foroactivo, pero tardaran en publicarlo, asi que aqui te lo dejo


He recibido muchisimas peticiones para hacer este tutorial, asi que aqui lo traigo. En este tutorial os enseñare como crear un menu de iconos basico, "icomen".

[Tienes que estar registrado y conectado para ver esa imagen]

Para que esto funcione, tendremos que llamar primero al css, para eso agregamos lo siguiente

Código:

<style type="text/css">

</style>

Entre los codigos para llamar al css, añadiremos el diseño de nuestro icomen.

Ejemplo

Código:

<style type="text/css">

#icomen {
position: fixed;
}

</style>

Ya sabiendo esto, comenzamos a diseñar nuestro icomen. Primero vamos a crear el fondo.

Spoiler:

#icomen {
position: fixed; hara que el icomen valla a la paz de la barra de desplazamiento
width: 580px; Aqui le damos los px de ancho del icomen
height: 26px; Aqui le damos los px de alto del icomen (recomendado 4px mas que los iconos)
text-align: center; esto hara que los iconos queden centrados
bottom: 0px; donde colocar el icomen: top = arriba o Bottom = abajo. Los px es la distancia de separacion de top o bottom
right: 25px; donde colocar el icomen: left = izquierda o right = derecha. Los px es la distancia de separacion de left o right
background-color: #ffffff; es el color de fondo. [Tienes que estar registrado y conectado para ver este vínculo]
background-image: url(https://i.servimg.com/u/f26/12/56/56/12/12210.png); es la imagen de fondo
background-repeat: repeat; si queremos que la imagen de fondo se repita, repeat = repetir, repeat-x = repetir en horizontal, repeat-y = repetir en vertical
background-position: center top; posicion de la imagen, (center = centrado)
border: 1px solid #80c9ff; el borde. los pixeles de ancho y el color html, [Tienes que estar registrado y conectado para ver este vínculo]
border-bottom: 0px; esto quita un lado del borde, por ejemplo: border-top quitara el borde de arriba, borde-bottom el de abajo.
z-index: 999; Esto hara que quede arriba de cualquier tabla del foro (widgets etc.)
}


Ahora los iconos y el hover

Spoiler:

.icomen img {
background-color: transparent; color de fondo del icono (transparent = vacio) [Tienes que estar registrado y conectado para ver este vínculo]
width: auto;
height: auto;
padding: 4px 4px; margen de arriba y de abajo y margen de izquierda y derecha
border: 0px;
}
.icomen img:hover {
background-color: #80c9ff; color de fondo del icono en hover (transparent = vacio) [Tienes que estar registrado y conectado para ver este vínculo]
width: auto;
height: auto;
padding: 4px 4px;margen de arriba y de abajo y margen de izquierda y derecha
border: 0px;
}


Ahora el small, que seria los titulos de los iconos

Spoiler:

#icomen a small {
display: none;
text-align: center;
width: 180px; Aqui le damos los px de ancho del small
padding: 4px 0px;
background-color: #ffffff; es el color de fondo. [Tienes que estar registrado y conectado para ver este vínculo]
font-family: Arial;
font-size: 14px; Tamaño de las letras
font-weight: bold; en negrita, si no quieres en negrita, sustituye bold por none
color: #000000; es el color de las letras. [Tienes que estar registrado y conectado para ver este vínculo]
background-image: url(https://i.servimg.com/u/f26/12/56/56/12/12210.png); es la imagen de fondo
background-repeat: repeat-x; si queremos que la imagen de fondo se repita, repeat = repetir, repeat-x = repetir en horizontal, repeat-y = repetir en vertical
background-position: center left; posicion de la imagen, (center = centrado)
border: 1px solid #80c9ff; el borde. los pixeles de ancho y el color html, [Tienes que estar registrado y conectado para ver este vínculo]
border-bottom: 0px; esto quita un lado del borde, por ejemplo: border-top quitara el borde de arriba, borde-bottom el de abajo.
}
#icomen a:hover small {
display: block;
position: absolute;
margin-top: -24px; donde colocar el small: solo los px, -24 lo mueve hacia arriba o 24 lo mueve hacia abajo
top: 0;
right: 375px; donde colocar el small: left = izquierda o right = derecha. Los px es la distancia de separacion de left o right
z-index: 999;
}

Ya tendremos el css terminado, ahora toca añadir los iconos

Los llamaremos desde los div

Código:

<div id="icomen"><div class="icomen img"><div id="icomen">

<a href="URL" target="_self"><img src="URL IMAGEN" border="0"><small>TITULO</small></a>

<a href="URL" target="_self"><img src="URL IMAGEN" border="0"><small>TITULO</small></a>

<a href="URL" target="_self"><img src="URL IMAGEN" border="0"><small>TITULO</small></a>

</div></div></div>

Puedes ir agregando o quitando

Código:

<a href="URL" target="_self"><img src="URL IMAGEN" border="0"><small>TITULO</small></a>

segun los iconos que quieras poner

Finalizado el codigo, tendria que quedar mas o menos asi:

Spoiler:

Ahora para hacerlo funcionar como javascript, como a cualquier codigo html, tenemos que convertir el codigo html en javascript.

Crearemos una pagina html para converitr en un solo click el HTML en JS

Panel de administracion > Modulos > Gestion de las paginas HTML > Crear una nueva pagina

Copia y pega el siguiente codigo y guardamos

Código:

<style type="text/css">
body {
background-color: #000000;
}
</style>


<center><form action="#">
<table align="center" cellpadding="0" cellspacing="5" border="0">
<tr>

<td width="225" align="center">
<textarea name="xx" cols="98" rows="15">
</textarea>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Convertir a JS" onclick="s=form.xx.value;s=s.replace(/\\/g,'\\\\');s=s.replace(/\//g,'\\/');s=s.replace(/\r/g,'\\r');s=s.replace(/\n/g,'\\n');s=s.replace(/\'/g,'\\\'');form.yy.value = 'document.writeln(\''+s+'\');'; return false;" />
</td>

</tr>
<tr>
<td align="center">
<textarea name="yy" cols="98" rows="15">
</textarea>
</td>
</tr>

</table>
</form><br></center>

Entramos en la direccion de la nueva pagina html y pegamos el codigo del icomen en el primer recuadro, le damos a convertir y copiamos el codigo javascript del segundo recuadro

Vamos a la seccion de javascript de nuestro panel de administracion, creamos una nueva pagina de javascript, pegamos el codigo del icomen, seleccionamos la opcion para ver en todo el foro (o la que mas se ajuste a vuestra opcion) y guardamos. Ya tendreos nuestro icomen