Leyenda con estilo Invisionfree en FA

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Bueno, anoche mi adorada Black Raven me preguntó si había forma de hacer esto, y sí, efectivamente la hay. No es tan difícil, el único verdadero problema es que debes hacerlo de forma manual - si agregas un nuevo grupo, tendrás que modificar los codes. El resultado final sería esto:

Grupo 1 Grupo 2 Grupo 3 Grupo 4

Para hacer este efecto, requeriremos colocar un poco de HTML en nuestro mensaje del índice:

Código:

<table id="grupos"><tr><td></td><td>
<a href="link1" class="gb g1"><span class="tg1 tg">Grupo 1</span></a>
<a href="link2" class="gb g2"><span class="tg2 tg">Grupo 2</span></a>
<a href="link3" class="gb g3"><span class="tg3 tg">Grupo 3</span></a>
<a href="link4" class="gb g4"><span class="tg4 tg">Grupo 4</span></a>
</td></tr></table>

En este ejemplo, emplearemos cuatro grupos. Donde dice Grupo 1 deben colocar el nombre del primer grupo, y así con los demás. Donde dice link1 deben colocar el link al primer grupo, e igual con los demás. Si quieren emplear más de cuatro grupos, sólo deben agregar luego de la quinta línea lo siguiente:

Código:

<a href="link5" class="gb g5"><span class="tg5 tg">Grupo 5</span></a>

Es importante que cambien todos los números que figuran en el code por el consecutivo del último grupo: en este ejemplo, en todos los lugares donde decía 4 antes coloqué 5. Si tuviese que agregar otro, reemplazaría todos los 5 por 6, y así.


¿Y ahora? Ahora agregamos algo de CSS a la fórmula.

Código:

#grupos {display: block; width: 100%;}
#grupos td {display: inline-block;min-width: 200px;position: relative;}

.gb {
    display: inline-block;
    width: 20px;
    float: left;
    margin-left: 2px;
    height: 20px;
}

.tg {
    text-transform: uppercase;
    display:none;
    margin-right: 3px;
    text-align: right;
    width: 200px;
    position: absolute;
    left: -200px;
}

.g1 {background: #666;color: #666 !important;}
.g2 {background: #0A4559;color: #0A4559 !important;}
.g3 {background: #590A0A; color: #590A0A !important;}
.g4 {background: #B89E63;color: #B89E63 !important; }

#grupos td .gb:hover .tg {
display:inline-block;
}

¿Qué puedes modificar acá?
1. Los colores de los grupos: donde dice #666 debes reemplazar por el color de tu primer grupo, #0A4559 es el segundo, #590A0A es el tercero y #B89E63 es el cuarto.
2. El espacio para el texto. Si has probado el código y el nombre de algún grupo no entra en el espacio asignado, busca TODOS los lugares donde dice 200px (o -200px) y modifica ese valor por uno más alto.
3. Tendrás que añadir un códigos más a tu CSS por cada grupo que hayas añadido. Va en un lugar indistinto, y será:
.g5 {background: #B89E63;color: #B89E63 !important; }
Este es el código que asigna el color del grupo en la leyenda. No olvides cambiar el numero por cada grupo que tengas.
Recuerda repetir la operación cambiando el número tantas veces como grupos hayas añadido. Por ejemplo, el CSS de un foro con nueve grupos sería así:

Código:

p em {
display: none;
}

#grupos {display: block; width: 100%;}
#grupos td {display: inline-block;min-width: 200px;position: relative;}

.gb {
    display: inline-block;
    width: 20px;
    float: left;
    margin-left: 2px;
    height: 20px;
}

.tg {
    text-transform: uppercase;
    display:none;
    margin-right: 3px;
    text-align: right;
    width: 200px;
    position: absolute;
    left: -200px;
}
.g1 {color: #666; background: #666;}

.g2 {background: #0A4559;color: #0A4559;}

.g3 {background: #590A0A; color: #590A0A;}

.g4 {background: #B89E63;color: #B89E63; }

.g5 {background: #96B863; color: #96B863;}

.g6 {background: #7A608A;color: #7A608A;}

.g7 {background: #608A75;color: #608A75;}

.g8 {background: #B3000C;color: #B3000C;}

.g9 {background: #157517; color: #157517;}

#grupos td .gb:hover .tg {
display:inline-block;
}

Una vez que ya tengas todo esto colocado, deberás decidir adonde ubicar tu leyenda. Por defecto, esta saldrá en tu mensaje de índice. Si, por ejemplo, decides añadirla reemplazando la vieja leyenda, deberás ir a PA > Módulos > Gestión de los códigos JavaScript > Crear un nuevo JavaScript y colocar lo siguiente:

Código:

$(document).ready(function () {
    $('#grupos').appendTo('.img-whois+p');
});​

¡Asegurate de tener los códigos JavaScript activados!

Otra opción es colocar la leyenda de modo que salga en una barra en todas las páginas. Para hacer algo así deberías colocar el HTML en un módulo que salga en todas las secciones del foro, y añadir al CSS donde dice #grupos { una linea que diga position: fixed; bottom: 5px; left: 5px;


Una variante que me han solicitado es la que se ve así:


El HTML es prácticamente igual:

Código:

<div id="grupos">
<a href="link1" class="gb g1"><img src="http://i1180.photobucket.com/albums/x405/pyritewolf/Gremory.png"><span class="tg1 tg">Grupo 1</span></a>
<a href="link2" class="gb g2"><img src="http://i1180.photobucket.com/albums/x405/pyritewolf/Allinde.png"><span class="tg2 tg">Grupo 2</span></a>
<a href="link3" class="gb g3"><img src="http://i1180.photobucket.com/albums/x405/pyritewolf/Emereth.png"><span class="tg3 tg">Grupo 3</span></a>
<a href="link4" class="gb g4"><img src="http://i1180.photobucket.com/albums/x405/pyritewolf/Marchosias.png"><span class="tg4 tg">Grupo 4</span></a>
</div>

Nuestro CSS, en cambio, tendrá algunas modificaciones más. Lean con atención pues tienen que editar algunas cosas:

Código:

.gb {position: relative;
top: 25px;}

.tg {opacity: 0; position: absolute; display: block;
width: 75px;
top: -85px;
}

.tg1{ background: #666;}
.tg2{ background: #666;}
.tg3{ background: #666;}
.tg4{ background: #666;}

.gb:hover .tg {opacity: 1;}
p em {
display: none;
}
 

¿Qué deben modificar?

• Dentro de .gb, donde dice top: 25px; deberán ajustarlo según lo que requieran: es el espacio que quedará libre por sobre las imágenes para que salga el texto.
  
• Dentro de .tg, donde dice width: 75px; podeis modificarlo por el tamaño del ancho que quieren que tengan las áreas de su texto (lo que aparece al pasar el mouse sobre las imágenes). Además, donde dice top: -85px; deberán ajustarlo según el alto de sus imágenes y disposiciones de su propio foro. Es la altura a la que sale el texto al pasar el mouse sobre las imágenes.
  
• Donde dice .tg1, .tg2, etc. deberán cambiar el color de background por el que ustedes deseen.

¡Eso es todo! Luego sólo deberán aadir el JS señalado en el paso 3.

Las opciones son, en verdad, infinitas, por lo que si a alguien se le ocurre algo nuevo y no saben cómo hacerlo, no vayan corriendo a dejar una petición, avisen aquí así lo añadimos todo junto en un post (: Si creen que se me pasó algo, ¡por favor avisen! (: